吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

ngAnimateモジュールを使用したアニメーション(TweenMaxでアニメーションを設定)

2013年12月5日 / category : angularjs, lab, nganimateモジュール

ngAnimateモジュール+jQuery+TweenMaxでアニメーションを実装するサンプルを記事にまとめます。
このサンプルは、前回の記事のサンプルに、ライブラリ「TweenMax」を読み込み、アニメーション実行処理の箇所を、TweenMaxのアニメーションに変更するだけになります。

前回に記事
ngAnimateモジュールを使用したアニメーション(jQueryでアニメーションを設定)

今回のサンプルは、前回のサンプルを変更する流れで説明していきます。

手順としては、下記のような感じになります。

1.jQueryを読み込む
2.TweenMaxを読み込む(追加箇所)
3.ngAnimateモジュールファイル「angular-animate.min.js」を読み込む
4.AngularJSのanimation関数を使用して、アニメーションを設定する(TweenMaxに変更箇所)
5.HTML側でアニメーション分岐を設定する

追加・変更箇所のみの説明となります。

【2.TweenMaxを読み込む】

<script src="js/libs/TweenMax.min.js"></script>

ライブラリ「TweenMax」は、下記の公式サイトからダウンロードしてきます。
http://www.greensock.com/get-started-js/

【3.AngularJSのanimation関数を使用して、アニメーションを設定する】

前回記事のコードから変更します。

変更前(jQueryのanimateメソッドでのアニメーション設定)

myApp.animation('アニメーション対象となるクラス名', function(){
	return {
		addClass: function(element, className, done){
			$(element).animate({'width':640, 'height':480, 'opacity':1}, 1000, 'easeInOutQuint');
		},
		removeClass: function(element, className, done){
			$(element).animate({'width':0, 'height':0, 'opacity':0}, 1000, 'easeOutQuint');
		}
	}
});

変更後(TweenMaxでのアニメーション設定)

myApp.animation('.animate', function(){
	return {
		addClass: function(element, className, done){
			TweenMax.to( $(element), 2, {'width':640, 'height':320, 'opacity':1, ease:Bounce.easeIn,
            onComplete:function(){
				addCompleted(className)
			}} );
		},
		removeClass: function(element, className, done){
			TweenMax.to( $(element), 1, {'width':0, 'height':0, 'opacity':0, ease:Bounce.easeOut,
            onComplete:function(){
				removeCompleted(className)
			}} );
		}
	}
});

これですべての準備が完了しました。
サンプルを確認しましょう。

■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/10/
■サンプルファイル一式
ダウンロード – zip
■HTML – index.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/libs/jquery-2.0.3.min.js"></script>
<script src="js/libs/jquery.easing.1.3.js"></script>
<script src="js/libs/TweenMax.min.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<link href="css/reset.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>

<div id="container">

<div id="btns">
<button ng-click="animateCss='animate'">Open Animation</button>
<button ng-click="animateCss=''">Close Animation</button>
</div>

<div id="contents">
<div id="rect" ng-class="animateCss"></div>
</div>

</div>

</body>
</html>
■CSS – styles.css
#rect{
	width:0;
	height:0;
	background:#cc285f;
}
■JavaScript – app.js
var myApp = angular.module('app', ['ngAnimate']);

myApp.animation('.animate', function(){
	return {
		addClass: function(element, className, done){
			TweenMax.to( $(element), 2, {'width':640, 'height':320, 'opacity':1, ease:Bounce.easeIn,
            onComplete:function(){
				addCompleted(className)
			}} );
		},
		removeClass: function(element, className, done){
			TweenMax.to( $(element), 1, {'width':0, 'height':0, 'opacity':0, ease:Bounce.easeOut,
            onComplete:function(){
				removeCompleted(className)
			}} );
		}
	}
});

function addCompleted(_className){
	alert('add completed ! : ' + _className);
};

function removeCompleted(_className){
	alert('remove completed ! : ' + _className);
};