初めて学ぶCreateJS

TweenJSを使った簡単なトゥイーンアニメーション

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
トゥイーンは、ごく簡単なアニメーションから始めましょう。Tween()コンストラクタとTween.to()メソッドのふたつで加えます
講師:
12:25

字幕

TweenJS のライブラリを使うと easing つまり 加速や減速のかかったアニメーションが 間単に script で作れます TweenJs の script の書き方について 基本的なご説明をします html ドキュメントの JavaScript コードには トゥイーンさせる shape の 星型が置いてあります まだトゥイーンをさせていません 確認しますと canvas 要素に対して stage を作り shape インスタンスを作って stage の子供に加えています そして位置調整をした後 draw という関数に shape の graphics プロパティから取った graphic オブジェクトを 引数 に送っています そして draw は その graphic オブジェクト に対して 線と塗りを定め星型を描いています 現在の状況を確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」します 星型が止まったまま描かれています 上から落とすアニメーションにしますので 少し位置を上のほうに調整しましょう shape インスタンスの y座標は0にします x座標は canvas の 真ん中にしたいと思います その為には canvas 要素を持った変数 canvasElement ですね この幅を調べることができます width です それを半分にすれば 真ん中ということになります では保存して確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です 星型のシェイプが 水平方向では真ん中 それから垂直方向では 上の方に移りました シェイプの基準点が中央にありますので 下半分 足がちょっと見えています これはトゥイーンアニメーションが 上手くいったら もう少し上に持って行きましょう TweenJS は独立したライブラリです ですから html ドキュメントの script 要素として TweenJs が読み込んであります では TweenJs のトゥイーンの設定を どのように行うのかという事を ご説明しましょう TweenJs ライブラリを使った TweenJs アニメーションの 設定はとても簡単です まず第1にお約束ですが Tween のオブジェクトを 作らなくてはなりません new 演算子に createjs.Tween です TweenJS ではないのでご注意ください そして引数には トゥイーンアニメーションを させたいオブジェクト 今回はシェイプインスタンスですが それを渡します これで準備はできましたので 次はどういう風に トゥイーンするのかということは Tween オブジェクトに対して to メソッドを呼び出します ここでどのプロパティ ターゲットのオブジェクトの どのプロパティをトゥイーンするのか どこにトゥイーンするのかという設定を オブジェクトで渡します この { で囲まれた部分というのは オブジェクトを意味しまして そのオブジェクトのこのプロパティ 例えば x とか y とか rotation とかの そのプロパティを 現在の値からこの値に変えなさい という指定になります そしてトゥイーンをするのに どれぐらいの時間を使うかという時間を ミリ秒で 1000 ミリが 1秒ということで設定します この2つでトゥイーンはできます トゥイーンの設定は関数を別に定めて その中で行う事にします 名前は setTween です そしてどのオブジェクトをトゥイーンするのか という指定が必要でしたから Shape 引数として渡しましょう そして function を定めます 「コピー」使ってしまいましょう 間違いのないように そして } を閉じる 関数 setTween に トゥイーンを設定する 2つのステートメントを書き加えます まずはインスタンスを作ります 変数を定めて new の createjs.Tween ですね そしてターゲットは 引数にもらったオブジェクトになります 次にトゥイーンの設定です どこにトゥイーンするかという to メソッドを呼び出します 水平座標を変えたいと思いますので { } の中に y 座標を 下が180 ピクセルですので 180 時間は少し今 長めに見えるますが 5秒 5000 ミリ秒としします 保存して確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」します 星が落ちてきません TweenJS ライブラリは 仕事をしていたのかと思うかもしれませんが 一生懸命仕事はしています プロパティの値を言われた時間で 操作をして設定をしています 但し TweenJS は描画はしません ですから描画の script を 書き加える必要があります ここは注意してください 描画は EaselJS ライブラリの Ticker クラスで行います ですから Ticker に登録の必要があります createjs.Ticker. の ここに addListener tick 関数はこの script 要素の中に 書くつもりなので オブジェクトとしては この場所を司る window を渡します そして tick 関数を定めましょう function の tick です 閉じまして さて何をするかといいますと 描画だけすればいいです ということなので やることは stage の update だけです では もう一度保存して確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」します 星型のインスタンスが 上からゆっくりと下りてきます そして止まります script にもう少し手を加えましょう まず初めの星の位置ですが 少し上に上げます 実は星型の半径が 変数に取ってありますので この分を上に持ち上げれば 殆ど見えなくなるでしょう -radius です あとトゥイーンに設定する このプロパティなんですが 1個だけに限ったことではありません 複数の設定ができます その場合にはカンマで区切って では 360 度回転させましょうと その場合にはプロパティは rotation です それを度数でいいので 360 という風に書きます シッタックスエラーの表示が 邪魔なので消しましょう では保存して確認をしましょう 「ファイル」メニューから 「ブラウザでプレビュー」します 星型が完全に見えない状態から 落ちてきて 回転しながら落ちてきます そして下で止まります 360 度ですから丁度1周して止まりました 単純に落ちるだけでは面白くありません TweenJS では easing が加えられますので それを試してみましょう easing は to メソッドの 3番目の引数として渡します TweenJS には Ease というクラスがあって その中に様々な Easing の設定があります とりあえず1つ試してみましょう createjs の Ease です そしてその中の1つ bounceOut を試してみたいと思います トゥイーンの y 座標なんですけれども canvas の下足から 星の半径分だけ上に持ち上げておきましょう radius です では保存をして「ファイル」メニューから 「ブラウザでプレビュー」します 星型のインスタンスが 上から回りながら落ちてきて弾みます bounce というのはバウンドの事です Ease クラスには他にも 様々な easing があります それを少し見てみましょう CREATEJS サイトの TWEENJS のページを開きました ここに Demos というのがあります これを見てみます 1番右の SPARK TABLE で ここで様々な easing が確認できます このコンテンツはグラフになっていて 選ばれた easing が どういう変化をするのかを見せてくれます 今 少しここで踊り場のようになっていますが 本当は真っ直ぐになるはずです linear というのがデフォルトの単調な easing のない状態です 今さっき試しましたのが bounceOut 弾んでます 隣には circIn というのがあります この名前には約束事があって out というのは 終わりの方で easing がかかります in というのは初めの方で easing がかかります 両端というのもあります 例えば elasticInOut 初めにも終わりにも easing がかかります これを試してみれば どういう easing になるのかというのが 視覚的にわかって試しやすいと思います もう1つだけ設定を加えましょう このトゥイーンインスタンスを作る statement です 引数にはオプションで 追加できるものがあります ここにはオブジェクト { } を向かい合わせて この中に設定できるプロパティがありますが 1つご紹介します loop です それに対して true という値を与えると loop をしなさいという事になります つまり先ほどのアニメーションを 何度でも繰り返します 保存をして確認をして見ましょう 「ファイル」メニューから 「ブラウザでプレビュー」します 落ちてきた星型が bound し終わると すっと消えてまた上から落ちてきます ほうっておけば これはずっと繰り返されます とても簡単ですね TweenJS の基本的な設定の仕方 オブジェクトを作り to メソッドでトウィーンを設定し 更に easing をかけるという方法 についてご説明しました

初めて学ぶCreateJS

このコースではCanvasへの簡単な描画からTweenJSによるトゥイーンアニメーション、PreloadJSでの外部画像ファイルの読み込みやSoundJSでのサウンドの再生などのさまざまな種類のスクリプティングについて解説します。さらにEaselJSでのマウスによるインタラクティブな操作やフィルタを使った動的な表現なども紹介します。

3時間31分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年02月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。