jQuery無しでアニメーション。TweenMaxを使ってサイトをコーディング
今更ですが、アニメーションライブラリ「TweenMax」を触ってみました。
かなり高度でスムーズなアニメーションが実装できますが、理屈はかんたんで、
少し理解するだけで、Webサイトで使われるような効果は実装できます。
TweenMaxを使うメリット
jQuery には豊富な機能が揃っているぶん、無駄なコードが多かったり、処理に時間がかかるなど昨今では気にかけるクリエイターが多いようです。
かんたんにアコーディオンを実装できるslideToggle();ですが、実際、スマートフォンで見たときにアニメーションがもたついたりする場合があります。
TweenMaxを開発？しているGSAPのサイトにアニメーションの比較があるのでよければ参考にしてみてください。なんとなーくjQueryよりもTweenMaxやほかのライブラリがスムーズに動いているような気がします。
TweenMax（TimelineMax）とは
「TweenLite」というアニメーションライブラリの拡張版です。
アニメーションのリピートや反復ができるのが「TweenMax」で、よほど問題がなければ拡張版であるTweenMaxを選んでいいと思います。
また、アニメーションを連結して複数の動作を続けるときは「TimelineMax」を使います。こちらにも「TimelineLite」というものの拡張版です。
jQueryセレクタを使えたりと、アニメーションの要素を選択するのもかんたんで、かつ、アニメーションの指示をドットで順につなげて書く（TimelimeMax / Lite）ので、あとで見たときに解りやすく、非常に導入しやすいのです。
ライセンス
商用・非商用問わず無料です。が、splitTextやその他一部の機能は課金ユーザーのみしか使用することができるものがあります。
TweenMaxの使い方、基礎
まずはプラグインをTweenMaxを読み込みます。開発元であるGSAPのサイトからダウンロードするか、CDN.jsから読み込みます。
1 | <script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js”></script> |
読み込んだ上で、TweenMaxオブジェクトに対して記述していきます。
1 2 3 4 5 6 7 | TweenMax.【操作方法】(【エレメント】, 【アニメーション秒数】, { 【CSSプロパティ: 値】, 【CSSプロパティ: 値】, 【CSSプロパティ: 値】, ... , 【ほか、オプション・イージングの設定】 } ); |
このような順で記載します。
操作方法
アニメーションの操作方法です。初期値の設定、アニメーションの目標値などをここで宣言します。
| 目的 | メソッド |
|---|---|
| CSSをセットするだけ | TweenMax.set.(~) |
| CSSなどの初期値から、 to設定値までのアニメーションをセット | TweenMax.to(~) |
| fromTo初期値から fromTo設定値のアニメを両方セット | TweenMax.fromTo(~) |
| from設定値から、 初期値までのアニメをセット | TweenMax.from(~) |
| 配列で指定された要素を順番に、 初期値からstaggerTo設定値にアニメさせる | TweenMax.staggetTo(~) |
ほかにも一時停止や指定の秒数からアニメーションを始めるメソッドなどありますが、ここでは割愛します。
エレメントを指定する
| エレメント | 指定方法 |
|---|---|
| id | TweenMax.to.(‘#element’, 1,{ ~ }); |
| クラス | TweenMax.to.(‘.element’, 1,{ ~ }); |
| 配列 | TweenMax.to.([‘#element1’, ‘#element2’], 1,{ ~ }); |
| Element | var element = document.getElementById( ‘#element’ ); TweenMax.to.( element , 1,{ ~ }); |
| jQueryオブジェクト | TweenMax.to.($(‘.element’), 1,{ ~ }); |
これは上でも書いたように、jQueryセレクタのように、htmlタグの名前でも、class=””の値でも、idでも指定できます。[‘.A’,’.B’]のように配列もOKです。もちろん、getElementByIdで取得したHTML ElementでもOKです！
アニメーション秒数
ミリ秒でなく、秒数で書きます。1000ms = 1です。500ms = 0.5と書きます。ここで書いた時間だけ、アニメーションします。
CSSプロパティ・値
数値で指定できるCSSプロパティはアニメーションさせることができます。
また、leftやtopの指定もできますがX軸Y軸に対しての指定、演算、関数を発火させることもできます。
| 書き方 | CSS | 備考 |
|---|---|---|
| marginTop: ’10px’ | margin-top: 10px | ハイフンは書かず大文字にする |
| rotation: ‘5deg’ | transform: rotateX( 5deg ) | rotateは「rotation」と書く. degではなく cw（時計回り）ccw（反時計回り）の指定もできる |
| left: “+=100” x: “+=100” | left: ~ transoform: translate3d( ~ ) | 現在の値に加算する書き方。 + や – など演算が可能。 leftなどではなくX軸Y軸に対しての指定もできる |
| x: function() { return Math.random() * 300; } | デモ | 関数も指定できる |
ほか、オプション
アニメーションのディレイや反復、アニメーション終了時、アニメーション開始時、アニメーションのリピートのたびに、コールバック関数を渡せます。
コールバック系
| 実行タイミング | メソッド |
|---|---|
| アニメーション開始時 | TweenMax.to.(element, 1,{ ~, onStart function(){~} }); |
| 実行中随時 | TweenMax.to.(element, 1,{ ~, onUpdate: function(){~} }); |
| 終了時 | TweenMax.to.(element, 1,{ ~, onComplete: function(){~} }); |
| リピート時 | TweenMax.to.(element, 1,{ ~, onRepeat: function(){~} }); |
| 反復時 | TweenMax.to.(element, 1,{ ~, onReverse: function(){~} }); |
| 反復終了時 | TweenMax.to.(element, 1,{ ~, onReverseComplete: function(){~} }); |
ちなみに、「this.target」でアニメーション中の要素が取得できます。
リピート・反復・遅延系
| 目的 | メソッド |
|---|---|
| 回数分のリピート | TweenMax.to.(element, 1,{ ~, repeat: 2, ~ }); |
| 反復 | TweenMax.to.(element, 1,{ ~, yoyo: true, ~ }); |
| リピートの遅延 | TweenMax.to.(element, 1,{ ~, repeat: 5, repeatDelay: 0.5, ~ }); |
| アニメ開始の遅延 | TweenMax.to.(element,1,{ ~, delay: 0.5, ~ }); |
| アニメ停止状態にする | paused: true |
イージングの設定
「ease」メソッドで、アニメーションの動き方を設定します。
実際の動き方と書き方は、下のボタンからGSAPオフィシャルサイトでご確認ください。
| 目的 | 指定方法 |
|---|---|
| アニメーションのイージング | TweenMax.to.(‘#element’, 1,{ ~, ease:【イージング指定】 }); |
アニメーションを止める、始める
「操作方法」で少し書きましたが、
TweenMaxのオブジェクトを作ることで、アニメーションを一時停止、リセット、反転などすることができます。
1 2 3 4 5 6 7 | button.addEventListener( ‘click’,function(){ if( anim ){ anim.restart(); } else { anim = TweenMax.to( element, 1, { ~ }); } }); |
| 目的 | メソッド |
|---|---|
| 再生 | anim.play(); |
| 指定した秒数からスタート | anim.play( 1 ); |
| 再スタート | anim.restart(); |
| 反復 | anim.reverse(); |
| スピードを調節 | anim.timeScale( 0.3 ); |
| 一時停止 | anim.pause(); |
TweenMaxのかんたんなデモ
ここまで説明したことから、最も基礎的なデモを作ってみます。
TweenMaxの使い方、基礎2
時間差でアニメーションさせる
先述の、「staggerTo」メソッドを使います。
単調なアニメーションを時間差で行うにはこれを用います。
1 2 3 4 5 | TweenMax.staggerTo(【複数のエレメント】, 【アニメーション秒数】, { 【CSSプロパティ: 値】, ... , 【ほか、オプション・イージングの設定】 }, 【アニメーションの間隔】 ); |
複数のエレメント
ここには、getElementsByClassNameや、$(‘.elements’)など、複数の要素を指定します。
アニメーションの間隔
staggerToを使う場合は、連続して処理される要素ごとの、アニメーションの間隔を指定する必要があります。これがないと一気に処理されてしまうので、時間差が生まれません。
staggerToのデモ
ローディングアニメーション等に使いやすそうですね！
TimelineMaxの使い方、基礎
TweenMaxとは別に、アニメーションを連結していろいろなパターンを設定できる「TimelineMax」というものがあります。これはTweenMaxと同じ考え方で、もちろん単一のアニメーションの実装にも使えるので、TweenMaxの更に拡張版と考えても良いと思います。
同じように、ダウンロードもしくはcdn.jsから読み込みます
1 | <script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js”></script> |
ドットで連結して指示をしていきます。その順でアニメーションが実行されますが、先程も書いたように基本的にはTweenMaxと同じ考え方で、ただ連結した順に動くだけの話です。
1 2 3 4 5 6 7 8 9 10 | var tl = new TimelimeMax(); tl.【操作方法】(【エレメント】, 【アニメーション秒数】, { 【CSSプロパティ: 値】, ... , 【ほか、オプション・イージングの設定】 } ).【操作方法】(【エレメント】, 【アニメーション秒数】, { ~ },【前のアニメーションとの間隔】, 【ラベル】 ).【操作方法】(【エレメント】, 【アニメーション秒数】, { ~ },【前のアニメーションとの間隔】,【ラベル】); |
【前のアニメーションとの間隔】と【ラベル】はオプションで、指定しなくてもOKです。
前のアニメーションとの間隔
小ネタですが、ここを「‘-=0.8’」などと書くことで、アニメーションの実行を早めることができます。
通常は連結した順に、前の処理がピッタリ終わってから次の処理に移りますが、この値を指定することで、その秒数分フライングしてアニメーションを開始します。
TimelineMaxのラベル
ラベルを書いておくと、アニメーションの開始をラベルの位置からにすることができます。
1 | tl.seek( ‘【ラベル名】’ ) |
アニメーションの時間や進捗を取得する
TimelineMaxオブジェクトから、アニメーションに関する情報を取得することができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 | var tl = new TimelimeMax(); tl.【操作方法】(【エレメント】, 【アニメーション秒数】, { 【CSSプロパティ: 値】 【ほか、オプション・イージングの設定】 } ).【操作方法】(【エレメント】, 【アニメーション秒数】, { ~ },【前のアニメーションとの間隔】, 【ラベル】 ).【操作方法】(【エレメント】, 【アニメーション秒数】, { ~ },【前のアニメーションとの間隔】,【ラベル】); progress = tl.progress(); //進捗 totalProgress = tl.totalProgress();//リピートなど含む進捗 time = tl.time(); //秒数 |
TweenMaxとTimelineMaxを使ったデモ
だいたいここまでの考え方と書き方が理解できれば、TweenMaxを使うことはできるでしょう。staggerToなんて、書くだけでオリジナルのローディングアニメーションが作れますから。
ここで、デモ集を作ってみました。
コードも書いてあるので、参考にしてみてくださいー！
ちなみに、GSAPのサイトの下層ページにあるメインヴィジュアルのアニメーションも、TimelineMaxを使って実装されていますよ！スムーズですね。こちらも参考程度に、気に留めてみてください。
でわ！
