Angular.jsで実践 アニメーション

  • 65
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

スライドの動きやフリック時の画面遷移、昔アニメーションといえばゲームなイメージでしたが、モバイル端末が登場して以来結構身近なものになりました。

ただ、身近だから簡単というわけでもなく、動作にアニメーションをつけるのは結構面倒。「これちょっとさ、下からひゅっと出てくる感じにしてよ」と言われてそんな簡単じゃないんだよとイラッとすることもあるだろう。
「アニメーションはもうデザインみたいなもんだし、CSSで書いてよろしくやってくれたらな・・・」とJQueryで実装しながら見るはかない夢・・・を現実にしてしまうのが、Angular.jsのng-Animateなのであります!

準備

アニメーションを使用するには、angular.js本体意外にangular-animate.jsが必要となります。Googleがホスティングしてくださっているので、ありがたく使わせていただきましょう。
Google Hosted Library
//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular.min.js
//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js

X.Y.Zはバージョン番号になります。これらをロードした上で、以下宣言をしておけばOK。

  angular.module('app', ['ngAnimate']); //Animateモジュールの導入

CSS定義

以下のようにCSSクラスの定義を行います。

 .demo.ng-enter { }            /* enter 処理の開始値 */
 .demo.ng-enter-active { }     /* enter 処理の終了値 */
 .demo.ng-leave { }            /* leave 処理の開始値 */
 .demo.ng-leave-active { }     /* leave 処理の終了値 */

アニメーション実装はCSS3のtransitionなので、ブラウザが対応していないと動かない点には注意(業務で使用しているのはIE?それは残念だ)。
以下のようにアニメーションさせたいDOMにクラス(この場合demo)を指定することで動作させることができます。実際のCSS3定義より簡単。

 <div ng-view class="demo">Animate!</div>

なお、1.2.5の段階ではアニメーションが使用可能なdirectiveは以下のようになっています。

Directive Supported Animations
ngRepeat enter, leave and move
ngView enter and leave
ngInclude enter and leave
ngSwitch enter and leave
ngIf enter and leave
ngClass add and remove
ngShow & ngHide add and remove (the ng-hide class value)

実践

実際作成してみたのがこちら。Animationに必要ないコードはなるべく省きました。

http://jsfiddle.net/icoxfog417/x94jb/

作ってみて気づいた点など。
* アニメーションで使用できる種類(linear/ease-inなど)は、CSS3のtransitionに準拠しています→参考
* add/removeなど、要素の追加/削除にのみ反応するようで、単純に表示/非表示が切り替わる際は反応しない
* どんなanimationにしようかな、と思ったときはパワポのアニメーションとかが参考になる。実装はこちらに色々なサンプルがあるのでご参考。

最後に、公式ドキュメントはこちら