応用・JavaScript関連技術SMARTのJavaScript講座が書籍になりました。Platform)は、高速・軽量のHTML5アニメーションライブラリで、アニメーションライブラリのデファクトスタンダードといえる程多くのサイトで利用されています。近年、アニメーションはますます重要度を増しています。Webサイトのギャラリーサイトとして有名なAwwwardsでは、日毎、月ごと、年ごとに優れたサイトを表彰していますが、その入賞経験のあるサイトのトレンドを分析すると、90パーセント以上のサイトがアニメーションを使っていて、65パーセントサイトがGSAPを使っているという結果がでました。GreenSockの主なモジュールとして、トゥイーンを実現するTweenMaxと、タイムラインを制御するTimelineMaxの2種と、それぞれの簡易版の2種があります。HTML5アニメーションライブラリです。TweenMaxの簡易版です。複数のトゥイーンやタイムラインを制御します。TimelineMaxの簡易版です。以降の説明はすべてすべての機能が揃っているTweenMax、TimelineMaxが対象です。使い方は同じなので、簡易版にも同じ機能が用意されていれば名前を変えるだけでそのまま使えます。GreenSockはMITやGPLのライセンスではなく、独自のライセンスを採用しています。GreenSockのライセンスを要約すると、無料で公開されているサイトであれば無料ですが、有料なコンテンツがある場合は有料のライセンス登録が必要です。TweenMaxを使ったアニメーションTweenMaxはトゥイーン・アニメーションを実現するためのライブラリです。利用するには、オフィシャルサイトからダウンロードするか、CDNサイトでも提供されているので、そのURLを読み込みます。-cdnjsCDNを利用する場合は、下記のようなSCRIPTタグになります。src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>ダウンロードはGSAPのオフィシャルサイトか、Githubからになります。GSAPのオフィシャルサイトGithubのGSAPページGSAPのダウンロードファイルには、srcフォルダがあり、その中にminifiedとuncompressedフォルダがあります。minifiedにはコンパクト化されたTweenMax、TimelineMaxなどが含まれ、uncompressedにはコンパクト化されてないファイルが含まれます。利用する際はminifiedにあるファイルを読み込んでください。TweenMaxには様々なメソッドが用意されていますが、その中でも代表的なメソッドはfrom()とto()です。ここではfrom()メソッドを使って説明します。from()メソッドはアニメーション開始時の状態をセットし、現在の値までアニメーションさせます。引数はターゲット(セレクタかオブジェクト)、アニメーションの実行速度、CSSプロパティやオプションのオブジェクトです。TweenMaxの構文は下記のとおりです。アニメーションのターゲットを指定します。idやclass、jQueryオブジェクトなどで指定できます。配列にして複数のオブジェクトを指定することもできます。アニメーションの秒数を指定します。アニメーションさせるCSSプロパティと、オプションをオブジェクト形式で指定します。第3引数はCSSのプロパティ以外にもTweenMaxが用意しているオプションを指定できます。中でも実行までの待ち時間を指定できるdelay、イージングを指定できるease、コールバック関数を指定できるonCompleteなどが便利です。);実習|TweenMaxを使うTweenMaxを使って、ボタンを1秒かけて透明にします。TweenMax.from()はCSSで設定した値から、from()メソッドで指定したCSSの値までアニメーションさせます。HTML、CSS、JavaScriptのコードは下記の通りです。);ターゲットターゲットにはidやclass名以外に、getElementById()やjQueryなどを使って取得したオブジェクトを指定できます。);複数のターゲットを指定したい場合、リストを使います。次の例ではbtn1IDとbtn2IDの要素をターゲットにしています。);CSSプロパティGSAPに指定できるCSSプロパティには、アニメーションでよく使うCSSとして横幅(width)、高さ(height)、上配置(top)、左配置(left)、背景色(background-color)、外余白(margin)、内余白(padding)などや、回転(rotation)、拡大・縮小(scale)、傾斜変形(skew)、透過(opacity)などがあります。指定方法はオブジェクト形式です。"#fff"}CSSプロパティに数値を指定する場合、加算・減算などの四則演算子も使えます。下記は変数xに100を足して、ピクセル指定しています。}CSSプロパティにハイフンが含まれる場合は、ダブルクォーテーションで囲うか、ハイフンを削除して次の単語の頭文字を大文字にします。translateYの代わりに、X座標(x)、Y座標(y)、Xパーセント(xPercent)、Yパーセント(yPercent)を提供しています。);オプションCSSプロパティを設定する第3引数には、GSAPが提供する下記のようなオプションも設定可能です。アニメーションを停止するTweenMaxには種類豊富なイージングが用意されています。公式サイトで様々なイージングが試せます。Visualizer自然なアニメーションに仕上げやすいのがPower1.easeOutからPower4.easeOutあたりで、その他使えるイージングとしてはバネのような効果がだせるElastic、ボールが跳ねたような効果をだせるBounceなどがあります。);先程のサンプルを少し変更してイージング処理を試してみましょう。次のコードはボタンをクリックするとバネのようなイージングで右に移動して戻ります。);コールバックGSAPの第3引数には、コールバック関数を指定できるオプションが幾つかあります。アニメーション開始時にコールバックするonStart、アニメーション中何度もコールバックするonUpdate、アニメーション終了時にコールバックするonCompleteなどのオプションで、オプション名の後にコロン(:)で区切り、関数名を指定します。反復終了時トゥイーンの参照TweenMaxのメソッドはトゥイーンの参照を返します。利用法としては、たとえば、pausedオプションを使ってトゥイーンをストップさせた状態にし、そのトゥイーンの参照を変数に代入すると、それ以降はその変数を使ってトゥイーンを操作できます。トゥイーンを再開tm.resume();トゥイーンの参照を操作できるメソッドとしては、pause()、resume()、reverse()、restart()などがあります。アニメーションを再生。開始時間を秒数指定できる。スピードを調節pause()引数に秒を指定することで、任意の秒数の状態でストップさせることができます。);timeScale()はアニメーション速度を指定の倍速に変更することができます。);次のコードは左のボタンを押した場合は下に200ピクセル移動して元の位置に戻ります。右のボタンは同じアニメーション処理の後、1秒後にそのアニメーションを停止させます。);よく使うメソッドGSAPが用意しているメソッドには、from()やto()の他に、アニメーションの初期設定をするset()や、複数のターゲットを順番にアニメーションさせるstaggerTo()、staggerFrom()、staggerFromTo()などがあります。複数のターゲットを順番にアニメーションさせるTimelineMaxを使ったトゥイーンの管理TweenMaxで定義したトゥイーンは全て同時に開始されるため、連続してトゥイーンを続けたい場合、delayオプションを使って前のトゥイーンが終わる時間を指定する必要があります。このような複数のトゥイーンを組み合わせたいような場合は、TimeLineMax使ったほうが簡単に実装できるます。TimeLineMaxはTweenMaxの拡張版のようなもので、TweenMaxのようにトゥイーンを制御し、さらにそれぞれのトゥイーンを連結することができます。連結されたトゥイーンは、最初のトゥイーンが終了するタイミングを待って、次のトゥイーンが自動的に開始されます。TimeLineMaxもTweenMax.jsに含まれます。CDNであれば次のように読み込んでください。src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>TimelineMaxは最初にインスタンスを生成します。そのあとに、to()、from()などのメソッドを使います。)でメソッドを連結することができます。1.5});メソッドチェーンでつなげた場合、前のトゥイーンが終わったタイミングで次のトゥイーンが自動的に開始されます。delayを使ってさらにタイミングを遅らせることもできますが、「-=2」のようにマイナスの値を指定することで前のトゥイーンの途中から次のトゥイーンを開始することができます。TimelineMaxのインスタンス生成時に指定可能な主なオプションは以下のとおりです。repeatオプションを使って5回繰り返します。);ラベルTweenMaxが提供するラベル機能を使うと、アニメーションを開始させるタイミングを簡単に操作することができます。ラベルをタイムラインに追加しておくと、あとでそのラベルを指定することで、アニメーションの開始をラベルの位置にすることができます。次のスクリプトはまずx座標を150ピクセル移動し、ラベル名scene1を登録します。次にy座標を150ピクセル、透過を0に指定し、scene1のラベルを指定しています。そのため、この2つのトゥイーンはx座標のトゥイーンが終わると同時に2つのトゥイーンが開始されます。);ラベルは追加時にディレイを指定することができます。秒数を指定すると、そのラベルを指定したアニメーション全てにディレイが適用されます。)ターゲットのラベルを指定する際、演算子を使ってディレイを指定することができます。);play()を使って任意のラベルに飛ばすこともできます。);タイムラインのネストタイムラインは他のタイムラインに追加することができます。メインのタイムラインを用意し、そのインスタンスに追加したいタイムラインをadd()メソッドで追加します。);上記のコードでは、メインのタイムラインtmがx座標に150ピクセル移動します。追加したいタイムラインtm2は透過します。透過するタイムラインtm2をメインのタイムラインtmに追加すると、移動が終わったタイミングで透過処理が始まります。任意のラベルから再生するseek()メソッドは、引数で指定したラベルの位置からアニメーションを開始させることができます。ラベル以前のアニメーションは飛ばされるので、開発時やデバッグ時に便利です。);"scene2"からアニメーションを開始したい場合は、seek()メソッドに"scene2"を指定します。);長いアニメーションの場合、途中のトゥイーンを調整するには何度も最初からアニメーションを繰り返すことになり、アニメーションの再生に多くの時間が費やされます。seek()メソッドを使えば、好きなラベルからスタートできるので、確認したいアニメーション部分から開始させることができて非常に便利です。複数の要素をCSSのクラスなどを使ってグループにして、それらをタイミングを少しずつずらしてアニメーションを実行させたい場合、staggerTo()、staggerFrom()、staggerFromTo()が便利です。これまでに紹介したto()、from()、fromTo()メソッドとほぼ同じですが、、staggerTo()、staggerFrom()、staggerFromTo()には第4引数があり、アニメーション開始までの時間間隔を指定します。同じクラス名を持った複数の要素を用意しておき、次のようにstaggerTo()を使って時間間隔を指定すると、最初の要素が動き始めてから0.5秒たって、次の要素が動き始めます。0.5)staggerTo()メソッドを使ったアニメーションを作成してみましょう。次のコードは4つのボタンが左、下、右の順番に移動します。コメントをキャンセルメールアドレスが公開されることはありません。USリズムファクトリーはホームページの制作会社です。ホームページ制作に関するご要望・ご相談はこちらからどうぞ。