定番機能
定番機能について
35. アニメーション
  • アニメーションのチェック項目
  • アニメーションするクライアント
  • ゲームエンジン
  • 今後の準備すること

アニメーションのチェック項目

  • アニメーションの使用箇所、こだわりたいページや要素はあるか
    • 例えば、購入のボタンを押した時や、Tinderみたいにしたいなど
  • アニメーションの種類、目的、演出
  • 音との連携

アニメーションするクライアント

  • HTML5 (SVG & Canvas)
  • CSS3
  • JavaScript
  • iOS
  • Android

HTML5 (SVG & Canvas)

  • SVG: ベクター形式、DOM要素なのでイベント駆動でコードが書きやすい
  • Canvas: ビットマップ形式、画像書き出しが簡単

Canvasアニメーションの要点 - Qiita

参考

CSS3

参考

JavaScript

iOS

  • Spring
  • POP
  • GLDTween

iOSのアニメーションあれこれ(Objective-C/Swift(※随時更新中)) - Qiita

Android

android アニメーションライブラリ - Qiita

ゲームエンジン

  • 原則、ゲームエンジンまで踏み込まないこと
  • Unity, unreal, cocos2d-x, enchant.jsなどが必要なもの
  • カジュアルゲームはやらない
  • ゲーム例: Flashゲーム、ビンゴゲーム、すごろくゲーム、パズルゲーム、ねこあつめ

今後の準備すること

  • アニメーションライブラリで事前にアニメーションカタログを用意しておく
  • 顧客はカタログのなかからアニメーションを選択する
  • 試行錯誤するアニメーションデザイナーが必要ないフロー
  • プロセスAの時点でアニメーションに関しては、パーツとして実装してしまう
機能カタログ