用TimelineMAX來寫動畫是一件很簡單的事情
不過在寫連續的動畫圖,卻遇到了麻煩
```javascript
var tl = new TimelineMax({repeat:-1});
tl.to($('.Scroll'),0.1,{css:{'backgroundPosition':'-683px -222px'}});
tl.to($('.Scroll'),0.1,{css:{'backgroundPosition':'-693px -111px'}});
tl.to($('.Scroll'),0.1,{css:{'backgroundPosition':'-693px -0px'}});
tl.to($('.Scroll'),0.1,{css:{'backgroundPosition':'-595px -525px'}});
tl.to($('.Scroll'),0.1,{css:{'backgroundPosition':'-517px -525px'}});
```
如果這樣寫的時候,會發現background-position在變換的時候會由A點移動到B點,
而不是原本所預想的直接換background-position
試了很久終於想到可以用delay方式來處理就行了
所以正確的程式碼如下
```javascript
var tl = new TimelineMax({repeat:-1});
tl.to($('.Scroll'),0,{css:{'backgroundPosition':'-683px -222px'}},'+=.1');
tl.to($('.Scroll'),0,{css:{'backgroundPosition':'-693px -111px'}},'+=.1');
tl.to($('.Scroll'),0,{css:{'backgroundPosition':'-693px -0px'}},'+=.1');
tl.to($('.Scroll'),0,{css:{'backgroundPosition':'-595px -525px'}},'+=.1');
tl.to($('.Scroll'),0,{css:{'backgroundPosition':'-517px -525px'}},'+=.1');
```
沒有留言:
張貼留言