Ad Network

あわせて読みたい

  • あわせて読みたい

« Javascriptクイズ(中級者向け):無名関数と実行効率の話 | Main | 映画「タイタニック2」の予告編 »

iaime.js v0.28: style-tweenを追加

 ようやく期末試験もメドが付いたので欲しかったstyle-tween機能をiAnime.jsに追加(v0.28としてGoogle code/ianimejsにリリース済み)。使い方は下の例を見ていただければ自明だと思うが、アニメーション前のスタイルと後のスタイルをfrom/toで指定するとその間を指定した時間で変化させる。JSON形式で渡すため、スタイルシートとは少し異り、値の方は必ず"か'で囲う必要があるし、スタイル名が'-'を含む場合も"か'で囲う必要がある。色のフォーマットは#rrggbb形式のみサポート。

   anime.add({
       element:this,
       effect:'style',
       from: { background: '#eeffff', 'font-size':'10pt',
               width:'20pt', height:'14pt', margin:'1pt', 'padding-top':'0pt' },
       to:   { background: '#80ffff', 'font-size':'14pt',
               width:'26pt', height:'20pt', margin:'-2pt', 'padding-top':'1pt' },
       duration: 200
   });

 テスト用に作ったのが、Wii風のバーチャルキーボード。マウスを上で動かすと何とも気持ちが良い(クリックしても何もしない)。

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4f9853ef00e54fb6dd5f8834

Listed below are links to weblogs that reference iaime.js v0.28: style-tweenを追加:

Comments

Post a comment

This weblog only allows comments from registered users. To comment, please Sign In.