ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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製のオープンソース・ソフトウェアです。

Cquence Example

RamonGebben/Cquence

 

MOONGIFTの関連記事

  • DevRel
  • Com2