[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になります。
調べると沢山の使い方がありますので是非使ってみて下さい。
