Tweenmax.js 绳索动画效果

http://xiaojiu.date/animateFrame/

html:

class="fibers">

  //引入Tweenmax.js文件

javascript:

var st=0;
TweenMax.set('.fibers',{ repeat:-1, backgroundPosition: '0px 0px',ease:Linear.easeNone,onComplete: function () {
    
    for (var y = 0; y < 5; y++) {
        for (var x = 0; x < 10; x++) {
            TweenMax.to('.fibers',0,{x:10,delay:st+=0.1,backgroundPosition: '-' + (275 * x) + 'px -' + (600 * y) + 'px',ease:Linear.easeNone,onStart: function () {
                
            }});
        }
    };
}})

css:

.fibers {
    display: block;
    width: 275px;
    height: 600px;
    background: url(http://spectrafishing.com/_ui/skin/img/spectra-wire-sprite.png) no-repeat 0 0 transparent;
    margin: -300px 0 0 100px;
}

png：

总结：实际就是对一张图片的遍历定位；