A-Frameを使って黄色いボックスをweb上に出して、それに対して移動、大きさ、回転のアニメーションを出してみます。
a-frameをインポートしたhtmlを用意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- 四角いボックスを出す デフォルトは白色 -->
<a-box
color="yellow"
position="0 0 -5"
></a-box>
</a-scene>
</body>
</html>
黄色いボックスの位置を移動させるアニメーションをつけてみる。
animation属性を追加する。
propertyの値を「position」にすることで、位置を移動させるアニメーションをつけることができる。
「from」と「to」の‘0 0 0’の値は、XYZ軸を表している。
下記の場合、X軸が0・Y軸が0・Z軸が-5の位置から、X軸が0・Y軸が-5・Z軸が-5の位置への移動を表している。
loopはアニメーション繰り返すかどうかの値、trueで繰り返しあり、falseで繰り返しなし。
<a-box
color="yellow"
animation="property: position; from: 0 0 -5 ; to: 0 5 -5 ; loop: true;"
></a-box>
※見やすいように背景は緑にしています。
黄色いボックスを回転させるアニメーションをつけてみる。
propertyの値をrotationにすることで、回転させるアニメーションをつけることができる。
positionと同じように’0 0 0’はXYZ軸を表し、角度を表します。
下記の場合、Y軸に対して360度のアニメーションを付けてるので、Y軸に対して回転します。
<a-box
color="yellow"
position="0 0 -5"
animation="property: rotation; from: 0 0 0 ; to:0 360 0 ; loop: true;"
></a-box>
※見やすいように背景は緑にしています。
黄色いボックスを大きさを変更するアニメーションをつけてみる。
同じようにpropertyをscaleに変更すれば、大きさを変更するアニメーションをつけることができます。
下記の場合は、XYZ軸がそれぞれ長さを表しているので、’0 0 0’の何もない状態から’2 2 2’の大きさになっている。
a-boxはscale属性を設定しないと、デフォルトで’1 1 1’なので、大きさが2倍になっている。
<a-box
color="yellow"
position="0 0 -5"
animation="property: scale; from: 0 0 0 ; to:2 2 2 ; loop: true;"
></a-box>
※見やすいように背景は緑にしています。
全体のコード
大きさを変更するアニメーションの場合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: green">
<a-box
position="0 0 -5"
color="yellow"
animation="property: scale; from: 0 0 0 ; to:2 2 2 ; loop: true;"
></a-box>
</a-scene>
</body>
</html>
コメント