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. JavaScript

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

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

  2. JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

  3. JavaScript

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

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

  4. JavaScript

    クエリーストリングを利用してWebページ間でデータを受け渡してみる

    「クエリーストリング」っていうのは以下のようなGoogleで検索し…

  5. JavaScript

    WebアプリでCanvasを使うための指定方法

    Webアプリをデザインするときのお決まりになりつつあるHTML5の…

  6. JavaScript

    JavaScriptでは「変数のスコープ」を正しく理解してエラーを減らそう!

    変数の「スコープ」は正しく理解しないと、エラーにならないエラーが起…

最近の記事

  1. 進撃の巨人展FINAL チラシ
  2. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  3. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  4. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  5. 【コレクション】カードダス:SDガンダム外伝シリーズ
  6. 懐かしい!!カードダスSD戦国伝!!
  7. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!

アーカイブ

  1. プロダクト

    これが「はやぶさスマホキャップ」だ!
  2. Minifig Festa 2011

    展覧会

    MINIFIG FESTA 2011(大阪レゴの旅)
  3. 読書

    オトナも読みたい! つくることの楽しさを教わった絵本『もぐらとずぼん』
  4. AKATSUKI HAYABUSA

    イベント

    第30回 宇宙科学講演と映画の会
  5. Minimalist Art Photography

    写真

    この空間の使い方がたまらない!ミニマリスト写真が好き!「Minimalist A…
PAGE TOP