JavaScript

【TweenMax.js】アニメーション終わりに関数を呼び出す!

tweenmax_js_oncomplete

最近はWebアプリでアニメーションが必要になったときに、「TwenMax.js」を使うようになりました。いろいろできて便利なんですよね。

で、今回は、「アニメーションが終わったら関数を呼び出す」というやり方をメモ。
これはかなり便利です♪

「TwenMax.js」のダウンロードは以下です。

基本的な使い方は以下にメモしました

関数を呼び出す構文

TweenMax.to( DOMのID名, アニメーション秒数, {css:{プロパティ:数値}, ease:アニメーションの効果, onComplete:関数名});

1
2
3
4
5
6
7
8
9
10
11
12
//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:関数名」を付け足すだけです。

▼基本は大事♪

関連記事

  1. js_style.jpg

    JavaScript

    CSSのプロパティをJavaScriptで指定する

    Elementオブジェクトのstyleプロパティでその要素に対し…

  2. offset_style.jpg

    JavaScript

    「offset」で取得した値を使い回す

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

  3. parseInt.jpg

    JavaScript

    JavaScriptでローカルストレージを使うときに覚えておきたい文字列型から数値型への変換方法

    HTML5を使ったWebアプリをデザインしているときに必要だったの…

  4. trycatch.jpg

    JavaScript

    JavaScriptでエラーが起っても固まらないように「try-catch」する

    HTML5とJavaScriptでこねこねしてWebアプリを作って…

  5. style_backgroundImage.jpg

    JavaScript

    背景画像をJavaScriptで入れ替える2種類の方法

    ものごとには「正解」というものがひとつではない、ってことが多いもん…

  6. getElementById

    JavaScript

    JavaScript内で、HTMLのIDを直接指定したらダメ

    Webアプリをデザインしていて、JavaScriptの記述について…

アーカイブ

  1. 日常

    3/25 行動開始
  2. gatecrash_FNM-1.jpg

    MTG

    【MTG】「ギルド門侵犯」発売記念FNMで記念プロモもらってきた
  3. 20120709185011

    iOS

    デバッグのために「NSLog」でログをはきだす
  4. 日常

    絶妙なマネジメント
  5. 夢コラボ「スター・ウォーズ × ビックリマン」!

    コレクション

    夢コラボ「スター・ウォーズ × ビックリマン」!
PAGE TOP