JSTweenerでアニメーション

javascript

JSTweenerを使ってスライドしてみようと思ったものの、
AS3でTweener使ってたときの感覚で書いたら巧くいかなかったのでメモを。


思い通りに動かなかったコードは次のもの。

var element = document.getElementById('hoge');
element.style.position = 'absolute';
element.style.left = '1024px';
JSTweener.addTween(element, {
    time: 2,
    transition: 'linear',
    left: 0
});

実行結果は、アニメーションはなく、2秒後に0pxに移りました。


何故これでアニメーションにならないか。
AS3のときはこれでいけたじゃないか！
leftの値が文字列で保存されてるからなのか？(原因は未確認)


なんてことを思いながらしばらく嵌り、サンプルコードを覗いてみると違った書き方でした。
それを基にコード修正。

// 動かしたい要素
var element = document.getElementById('hoge');
element.style.position = 'absolute';
element.style.left = '1024px';

// アニメーション用の値
var o = {left: 1024};

JSTweener.addTween(o, {
    time: 2,
    transition: 'linear',
    left: 0,
    onUpdate: function(el, o){
        el.style.left = o['left'] + 'px';
    },
    onUpdateParams: [element, o]
});


こんな感じで無事動きましたとさ。