連載
» 2014年05月14日 18時00分 公開

Webサイト作成手順を勉強するまとめ(3):HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選 (2/3)

[岡本紳吾,hatte.Inc]

【ステップ4】エレメントを「シンボル」化して、まとめて再利用

 アニメーションを作っていると、同じ形の要素を複数動かすシーンを作ることがよくある。この場合、エレメントをシンボル化して、シンボルのインスタンスをアニメートさせるとよい。インスタンスはシンボルを参照しているので、シンボルを修正すれば、全てのインスタンスに変更が適用されるようになる。

 シンボルをマスターしておけば、後々必ず役に立つはずだ。

【ステップ5】「モーションパス」で曲がる軌道のアニメーションを作る

 アニメーションを作る上で重要なテクニックがモーションパスだ。今まで学習したアニメーションは直線的な動きしかできなかった。始点と終点の間のパスをEdge Animateでは「ベジェ曲線」で表現できるので、曲がったアニメーションを作ることができる。例えば、放物線を描くボールのようなものや、風に流される花びらなどだ。

 モーションパスをマスターすると、単純なアニメーションが一気にリッチになる。

【ステップ6】アニメーションを「レスポンシブWebデザイン」に対応

 Edge Animateの基本をマスターしたら、応用テクニックも身に付けてみよう。Edge Animateではアニメーションを「レスポンシブWebデザイン」やリッチメディアへの対応も進められているのだ。

 Edge Animateでアニメーションを作るときに、座標をピクセルではなく「%」で指定できる。これは「相対座標」といって、「ブラウザーのウィンドウを100%としたときに、どの辺にあるのか」を指定できるものだ。つまり、ブラウザーのウィンドウの幅に合わせてコンテンツを展開できるようになる。

[レスポンシブな拡大/縮小]にチェックを入れ、[幅]を選択する(Edge Animateを試そう! HTMLアニメーションをつくろう。第1回 レスポンシブなアニメーションの作成(Adobe Pinch In)より引用)

【ステップ7】「モーションパス」で複雑な動きを付ける

 モーションパスは入門編でも紹介したが、実はこのモーションパスは変形させることもできる。ベジェ曲線を思い通りに描くのはある程度の技術が必要だが、変形をうまく使えば意図したアニメーションに持って行くことも容易になるだろう。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。