最近はWebアプリでアニメーションが必要になったときに、「TwenMax.js」を使うようになりました。いろいろできて便利なんですよね。
で、今回は、「アニメーションが終わったら関数を呼び出す」というやり方をメモ。
これはかなり便利です♪
「TwenMax.js」のダウンロードは以下です。
Getting Started with the JavaScript Version of the GreenSock Animation Platform (GSAP) « GreenSock ここからダウンロード |
基本的な使い方は以下にメモしました
関数を呼び出す構文
TweenMax.to( DOMのID名, アニメーション秒数, {css:{プロパティ:数値}, ease:アニメーションの効果, onComplete:関数名});
//jQueryを使用
//アニメーションのイーズ効果をつけない→ease:Linear.easeNone
TweenMax.to( $('#hoge'), 3, {css:{left:"95px"}, ease:Strong.easeOut, onComplete:hoge});
//jQueryを使用しない、DOM取得での書き方
//アニメーションのイーズ効果をつけない→ease:Linear.easeNone
var hogehoge = document.getElementById('hoge');
TweenMax.to( hogehoge, 3, {css:{left:"95px"}, ease:Strong.easeOut, onComplete:hoge});
function hoge(){
//処理
}
カンタンですね♪
今までの使い方の最後に「onComplete:関数名」を付け足すだけです。
▼基本は大事♪
