JSTweenerを触ってみたけどXHTMLで動かなくて手を入れてたら遊んでしまった結果

javascript JSTweener

はい、やや長いタイトルの通りで半分ネタです。
JSTweener - JavaScript でモーショントゥイーンするライブラリ - 2nd lifeを弄ってみました。
こんな感じになりました。

(そういえばSafariで確認してない。あとで確認する。確認した。問題なっし。)
Timeを1秒以下にすると楽しい。じゃなくて、かなりきびきび動いて気持ちいい。調子に乗って、ランダムに動くサンプルを追加してみたり。

ポイント

  • まずXHTMLで動かなかったのは、CSSの値指定にpxなどの単位を省くことが出来ないため。なので単位を指定できるようにしてみました。
  • ついでに、プロパティごとにeasing 関数を指定できたら面白そうだなーと思って、その部分も手を入れました。これで無闇に複雑な動きが!(…あまり実用的ではないです＞＜)
  • あと、JSTweener#toNumberもちょっと怪しかったので手を入れた。

その結果、書き方は以下のような感じに。

JSTweener.addTween(square.style, {
    time: 2
    ,transition: 'linear'
    ,onComplete: function(){}
    ,width: {to:10,unit:'px'}
    ,height: {to:10,unit:'px'}
    ,left: {to:100,unit:'px',transition: getTranstion(2)}
    ,top: {to:100,unit:'px',transition: getTranstion(1)}
});

なお、プロパティにtransitionがないときは親(?)のtransitionを使用します。
つまり、上の書き方でいえば、widthとheightのtransitionは linear になります。まあ、予想通りの動作ですね。

unitは単位を後につけるだけなので、あまり汎用性はないかも。
簡易テンプレートメソッドを用意してあげたほうが、色んなプロパティを弄れるようになって素敵だろうけど、それは必要になったらやる。


しかし、JSTweenerというか、Tweenerは扱いやすくていいなぁ。