Cquence – 簡易的なアニメーションをお手軽に
Web上でアニメーションを流すのはFlashの時代から行われてきましたが、その作成はとても大変なイメージがあります。キャラクターをパーツごとにばらしたり、その動きを制御すると言った具合です。 シーンごとのアニメーションを簡単に制御できれば良いという程度であれば大げさなツールは使わず、Cquenceを使ってみましょう。
Cquenceの使い方
Cquenceを使うと、こんなアニメーションが作成できます。
使い方としては、まずHTMLを次のように作成します。
<div id='container'>
<div id='frame1' class ="frame">
<img src="http://example.com/some_sprite.png"/>
</div>
<div id='frame2' class ="frame">
<img src="http://example.com/some_sprite.png" style="left: -300px; top: 40px;"/>
</div>
<div id='frame3' class ="frame">
<img src="http://example.com/some_sprite.png" style="left: -602px"/>
</div>
:
<div id='frame10' class ="frame">
<div id="cta">
<div id="button">Download</div>
</div>
</div>
</div>
つまりframeというクラスで囲んでいくだけです。JavaScriptは次のようになります。
render = Cq.combine(
Cq.sequence(
Cq.sleep( 100 ),
Cq.linear('frame3', 10000, { left: -900 }, {left: 300 })
),
Cq.sequence(
Cq.easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
Cq.combine(
Cq.easeIn('frame8', 1500, { opacity: 0 }, { opacity: 1})
),
:
Cq.sequence(
Cq.easeOut('frame10', 1000, { bottom: -260 }, { bottom: 0 })
)
)
);
こんな感じでシーケンスをつないでいけばいいだけです。後はframe単位で制御していきます。画像はシーン別に制御できますので背後で繰り返す流す画像、前の方で流す画像を別で制御できます。
CquenceはHTML5/JavaScript製のオープンソース・ソフトウェアです。