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. offset_style_data.jpg

    JavaScript

    「offset」と「style」で取得する値が違う

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

  2. chrome_touchevents.jpg

    JavaScript

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

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

  3. js_global.jpg

    JavaScript

    JavaScriptでグローバル変数を減らす方法

    グローバル変数はいいことない!もしかしたら使っているライブラリー…

  4. oncomplete_function.jpg

    JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

  5. offset_style.jpg

    JavaScript

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

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

  6. 20120716134815

    JavaScript

    正規表現で入力されたテキストが有効かをチェックする

    テキストボックスに入力されたテキストが整数かどうかをチェックします…

最近の記事

  1. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  2. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  3. コミックのイラストが新鮮だった!『MARVEL展』
  4. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  5. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 日常

    かぜにかこまれて
  2. burnit01

    プロダクト

    燃え残ったような付箋
  3. 日常

    「ニッポンのデザイナー展」ギャラリートーク3
  4. WordPress

    ダダ漏れBlogデザイン
  5. kimuraihei_domonken-1.jpg

    展覧会

    「近代写真の生みの親 木村伊兵衛と土門拳」展
PAGE TOP