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

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

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

  2. JavaScript

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

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

  3. JavaScript

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

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

  4. JavaScript

    配列に入れた無名オブジェクトの値をクリアする

    オブジェクトの値を配列にいれて管理することってけっこうあります。…

  5. JavaScript

    【TweenMax.js】回転アニメーションも楽々!

    以前も記事に書いたアニメーション用のJavaScriptライブラリ…

最近の記事

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

アーカイブ

  1. 【UNIQLO】カラフルなレゴT。インナーにいいかも♪

    ファッション

    【UNIQLO】カラフルなレゴT。インナーにいいかも♪
  2. 日常

    『デザインするな』
  3. 日常

    会社スタート
  4. GIZMODO

    LEGO

    レゴ「はやぶさ」がGIZMODOで取り上げられた!?
  5. 日常

    ほとんど聞き取れない
PAGE TOP