2013年9月24日 星期二

TimelineMax background position change

用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'); ```

沒有留言:

張貼留言