[WEB] Tween Maxを使ったアニメーション02
01 08 2016
前回Tween Maxを使ったアニメーションを行いましたので、その続きでTween Maxを使ってBOXにアニメーションを設置しました。
デモ01~デモ03はBOXを回転させて移動するアニメーションを設置しています。
回転方向もX、Y、Zと指定でき、スピードのコントロールも出来ますので色々試してみました。
デモ04は、マウスをクリックするとついてくるアニメーションになります。
デモ01
「#box」を2秒かけて「右」方向に300px、Y方向に回転して移動します。
<div id="box" class="tween01">box01</div> <style> #box { position:relative; display:inline-block; padding:50px; background: #906; color: #fff; } </style> <script> var tween01 = document.getElementsByClassName("tween01"); // タイムラインを作成する var tl = new TimelineMax({repeat: -1}); // 右側に2秒かけて移動するアニメーションを指定する tl.to(tween01, 2.0, {left: "300px", rotationY: 360}); </script>
box01
デモ02
「#box」を2秒かけて「右」方向に300px、X方向に回転して2倍の速度で移動します。
<div id="box" class="tween01">box01</div> <style> #box { position:relative; display:inline-block; padding:50px; background: #906; color: #fff; } </style> <script> var tween02 = document.getElementsByClassName("tween02"); // タイムラインを作成する var tl = new TimelineMax({repeat: -1}); // 右側に2秒かけて移動するモーションを指定する tl.to(tween02, 2.0, {left: "300px", rotationX: 360}); // 2倍の速度のアニメーション tl.timeScale(2.0); </script>
box02
デモ03
「#box」を2秒かけて「右」方向に300px、Z方向に回転して移動
その移動する0.25秒後スローになり0.5秒後通常のスピードに戻る
<div id="box" class="tween01">box01</div> <style> #box { position:relative; display:inline-block; padding:50px; background: #906; color: #fff; } </style> <script> var tween03 = document.getElementsByClassName("tween03"); // タイムラインを作成する var tl = new TimelineMax({repeat: -1}); // 右側に2秒かけて移動する動きを指定する tl.to(tween03, 2.0, {left: "300px", rotationZ: 360}); // タイムラインの0.25秒後に tl.addCallback(function () { // 0.1倍の動きになり tl.timeScale(0.1); }, 0.25); // タイムラインの0.50秒後に tl.addCallback(function () { // 1.0倍の動きになる tl.timeScale(1.0); }, 0.5); </script>
box03
今回はTweenMaxの簡単な説明02になります。
調べると沢山の使い方がありますので是非使ってみて下さい。