- アニメーションのチェック項目
- アニメーションするクライアント
- ゲームエンジン
- 今後の準備すること
アニメーションのチェック項目
- アニメーションの使用箇所、こだわりたいページや要素はあるか
- 例えば、購入のボタンを押した時や、Tinderみたいにしたいなど
- アニメーションの種類、目的、演出
- 音との連携
アニメーションするクライアント
- HTML5 (SVG & Canvas)
- CSS3
- JavaScript
- iOS
- Android
HTML5 (SVG & Canvas)
- SVG: ベクター形式、DOM要素なのでイベント駆動でコードが書きやすい
- Canvas: ビットマップ形式、画像書き出しが簡単
参考
- svg vs canvas @html5 - Qiita
- SVG と Canvas: どちらを選ぶか (Windows).aspx)
- canvg.js·SVGをパースしてCanvas上に描画 MOONGIFT
- ハイパフォーマンス・アニメーション - HTML5 Rocks
CSS3
参考
JavaScript
- Velocity.js
- CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
- 最近のJS&CSSアニメーションライブラリまとめ - Qiita
- モーションデザインはUIの未来 | デザイン | POSTD
iOS
- Spring
- POP
- GLDTween
iOSのアニメーションあれこれ(Objective-C/Swift(※随時更新中)) - Qiita
Android
ゲームエンジン
- 原則、ゲームエンジンまで踏み込まないこと
- Unity, unreal, cocos2d-x, enchant.jsなどが必要なもの
- カジュアルゲームはやらない
- ゲーム例: Flashゲーム、ビンゴゲーム、すごろくゲーム、パズルゲーム、ねこあつめ
今後の準備すること
- アニメーションライブラリで事前にアニメーションカタログを用意しておく
- 顧客はカタログのなかからアニメーションを選択する
- 試行錯誤するアニメーションデザイナーが必要ないフロー
- プロセスAの時点でアニメーションに関しては、パーツとして実装してしまう