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

    JavaScript

    JavaScriptでテキストボックスから値を取得する

    テキストボックスに入力された値を取得します。Elementオブジ…

  2. canvas.jpg

    JavaScript

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

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

  3. fb022d1ac056d555673c17937de7f431.png

    JavaScript

    強力なアニメーション用のJavaScriptライブラリー「TweenMax.js」が便利!

    jQueryでもアニメーションはできるのですが、それよりも表現力豊…

  4. about_debug-4.jpg

    JavaScript

    Android端末のデフォルト・ブラウザでJavaScriptのデバッグをする方法

    Webアプリをデザインするときに必須となるのがJavaScript…

  5. offset_style.jpg

    JavaScript

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

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

  6. getElementById

    JavaScript

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

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

最近の記事

  1. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  2. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  3. 【コレクション】カードダス:SDガンダム外伝シリーズ
  4. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  5. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  6. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  7. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  8. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  9. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  10. コミックのイラストが新鮮だった!『MARVEL展』

アーカイブ

  1. aero-1.jpg

    グルメ

    夏はすぎましたが「エアロ チョコミント」がすっきり涼感あるチョコでした
  2. テーマを新しくしてみた

    WordPress

    ブログのテーマを新しくしてみた♪
  3. QUOVADIS_Executive_Notes_2013-1.jpg

    プロダクト

    今年の手帳も「QUOVADIS Executive Notes」にしました
  4. WPtouch

    WordPress

    スマートフォン対応してみた
  5. apple_events_october2012-1.jpg

    Appleイベント

    iPad miniがきた!アップル・イベント覚え書き
PAGE TOP