CreateJS実践講座

Easeクラスのメソッド

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
トゥイーンの値の変化の仕方を定めるEaseクラスのメソッドをご紹介します。
講師:
05:23

字幕

このレッスンではトゥイーンの変化のさせ方に どのようなバリエーションがあるのか 簡単にご紹介したいと思います いま画面でみているトゥイーンは バウンドするように変化しています これは変化を定める Ease クラスのメソッドの中で Bounce out というのを使っているからです Bounceというのはバウンドで まさに弾むように変化します 他にも Ease クラスには様々なメソッドがあります Dreamweaver で開いたのは 今バウンドのようなトゥイーンをしていた HTMLドキュメントです このバウンドのようなという変化の指定は この Set tween という トゥイーンオブジェクトを作る関数 トゥイーンをさせたいオブジェクトを 引数に受け取って CreateJS.tween その中にトゥイーンさせたいオブジェクトや その他のパラメーターを指定します 変化のさせ方はそのオブジェクトに対して to メソッドを呼び出した時 この時に変化させたいプロパティをまず指定し 次にトゥイーンに要する時間を ミリ秒で指定します その後に指定するのが変化のさせ方 Ease クラスのメソッドになります ここでは ease. bounce out ということで Ease クラスの中の Bounce out という バウンドするような変化のメソッドを指定しています 他にどんなクラス この Ease クラスの中には メソッドがあるのかとうことを CreateJS のドキュメントで確認してみましょう ブラウザで CreateJS のサイト CreateJS.com を開きました その中でドキュメントを見たいという時は この DOCS のリンクで ドキュメントのコーナーに行きます そして今回は TweenJS ですから Go to DOCS ということで TweenJS のドキュメントにとびます 残念ながら英語です そして Ease クラスの中に 値の変化のさせ方のメソッドがありますので Ease をクリックします Ease クラスですね そして下のほうにあるのが 指定できる 変化のさせ方として指定のできる メソッドの一覧です 結構たくさんありますね そして それぞれがどんな変化をするのか このドキュメントだけでは残念ながら ちょっとわかりにくいです ですので1ついい方法をご紹介します それは TweenJS のページに戻って Demo です この Demo の中でなかなか見栄えのする サンプルがあります これは1個目 2個目です 3個目にあるのが実は 先ほどちょっと見た覚えがありますね Ease クラスのメソッドにどんなものがあるか という紹介なんです このグラフの見方として 下方向に時間経過です そして右方向に値の変化の仕方 先ほどの Bounce out を見てみましょう そうするとこんな感じです 他のメソッドについても out とか in がついてますね out というのは終わりのほうで値が変化する バウンドというのはそうですね でもこれも Bounce in というのがありまして in ですと頭のほうで弾みます ちょっと変わった動きですけれど 確かに頭のほうで弾めばこうなるでしょう それから in out というのもあります これは両方で変化します 両端で変化します 例えば面白いのは Elastic Elastic の中の in out というのを調べましょう そうするとバネのようなというかー 伸び縮みするような Elastic というのはそういうことですね ビヨーンと伸び縮みするような変化をするわけで それが両方で 両端で変化しています Bounce と Elastic とが 中では見栄えがするほうなんですが 他のメソッドというのは比較的穏健です 例えばよく使われるのは 例えばサーク in in ですから頭で変化しますね それからキュービック in ですと こんな感じです カーブが微妙に違うんですね それからクオート in 全部 in で比べていますけど サイン in これはサインカーブのサインです ということで これは実際グラフで見るからわかりますけど アニメーションで見ても なかなか変化がわかりにくいものです なのでわかりやすい Bounceとか Elastic を 最初にお見せしました ただ普通使うのはサークとかクオータとか そういったものを使うことのほうが多いと思います このグラフで確かめて 使うものを選ぶといいでしょう このレッスンでは トゥイーンの値の変化のさせ方として 指定できる Ease クラスの メソッドについてご紹介しました メソッドの詳細を調べるには TweenJS の中のドキュメントで Ease クラスを見ます 文法的な説明は こちらでご覧になるといいと思うのですが もし変化の仕方を見たいという場合には TweenJS のサイトのデモに行って 3つ目のグラフを確認するといいでしょう

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

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

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

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

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