アニメーションの２つの方法

アニメーション方法には２つあります。

1. 予めアニメーションの動きのキーフレームを定義する方法

1. 実行時にアニメーションを適用されるようにプロパティを随時変更する方法

キーフレームアニメーション

まず環境を作ります

シーン、ライト、カメラを設定してから、箱を一個置いてみます。

function createScene() {
//Here... your basic scene as before: [scene, light, camera]
//Create a box
var box1 = BABYLON.Mesh.CreateBox("Box1", 10.0, scene);
box1.position.x = -20;

アニメーションオブジェクトを定義します。
(GSAPみたいなトゥイーン的な方法ですね)

// new BABYLON.Animation(名前,変更対象(例:xの大きさ),値の型,動作タイプ);
var animationBox = new BABYLON.Animation("myAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

値の型は次の設定値があります

• BABYLON.Animation.ANIMATIONTYPE_FLOAT

• BABYLON.Animation.ANIMATIONTYPE_VECTOR2

• BABYLON.Animation.ANIMATIONTYPE_VECTOR3

• BABYLON.Animation.ANIMATIONTYPE_QUATERNION

• BABYLON.Animation.ANIMATIONTYPE_MATRIX

• BABYLON.Animation.ANIMATIONTYPE_COLOR3

動作タイプには次の設定があります

• BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE・・・以前の値を使いインクリメントしてループ

• BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE・・・初期値にリセットしてループ

• BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT・・・最後の値をキープしてループ

動作モードについてもう少し捕捉すると

次のように　アニメーションキーを設定するとして

// 配列にキーフレームを設定(フレームは昇順でpushしないとならない！)
var keys = [];
//キーフレーム 0で, スケールを1
keys.push({
frame: 0,
value: 1
});
//キーフレーム20で, スケールを0.2
keys.push({
frame: 20,
value: 0.2
});
//キーフレーム 100で, スケールを1
keys.push({
frame: 100,
value: 1
});

Vector2、Vector3、Quaternionの場合は、キーにinTangent値とoutTangent値を設定します

var keys = [];
keys.push({
frame: 0,
value: BABYLON.Vector3.Zero(),
outTangent: new BABYLON.Vector3(1, 0, 0)
});
keys.push({
frame: 20,
inTangent: new BABYLON.Vector3(1, 0, 0),
value: new BABYLON.Vector3(1, 1, 1),
outTangent: new BABYLON.Vector3(-1, 0, 0)
});
keys.push({
frame: 100,
inTangent: new BABYLON.Vector3(-1, 0, 0),
value: BABYLON.Vector3.Zero()
});

そして、定義したアニメーション配列をアニメオブジェクトに設定します

animationBox.setKeys(keys);

そして、このアニメーションを箱に紐付けます

box1.animations = [];
box1.animations.push(animationBox);

そして、実行コマンド(beginAnimation)でアニメーションが起動します

// 箱をキーフレーム0から100まで実行！
scene.beginAnimation(box1, 0, 100, true);

キーフレームを入れ替えて逆に実行も可能！

scene.beginAnimation(box1, 100, 0, true);

beginAnimationには、そのほかスピード設定などなど、いろいろ設定できるのドキュメントを確認してみてくださいな

var newAnimation = scene.beginAnimation(box1, 0, 100, true);

newAnimation.pause();

var anim = scene.beginAnimation(box1, 0, 100, false);
console.log("before");
await anim.waitAsync();
console.log("after");

BABYLON.Animation.CreateAndStartAnimation('boxscale', box1, 'scaling.x', 30, 120, 1.0, 1.5);

// 停止 重み 1.0
// scene.beginWeightedAnimation(対象,開始フレーム,終了フレーム,重み,ループ(true/false),(スピード),(終了後の処理),(アニメート設定))
var idleAnim = scene.beginWeightedAnimation(skeleton, 0, 89, 1.0, true);
// 歩き 重み 0
var walkAnim = scene.beginWeightedAnimation(skeleton, 90, 124, 0, true);
// 走り 重み 0
var runAnim = scene.beginWeightedAnimation(skeleton, 125, 146, 0, true);

// 例
var bezierEase = new BABYLON.BezierCurveEase(0.32, -0.73, 0.69, 1.59);

複雑なアニメーション

複雑なアニメーションでは、アニメーションの各フレーム（ティック）ごとにすべてを選択できます。

ゲームのような複雑なアニメーションを設定する場合は、こちらを使います。

requestAnimationFrameを使うわけですがbabylon.jsでは便利なregisterBeforeRenderが用意されています

scene.registerBeforeRender(function () {
//Your code here
});

例はこちら
https://playground.babylonjs.com/#YJVTI6

まとめ

アニメーションには、予め動きを定義できる

「キーフレームアニメーション」

と

「複雑なアニメーション」

の２つがありました。

「キーフレームアニメーション」には、かなり細かい設定が可能なプロパティが多く用意されており、予定調和可能な映画やCMのような表現で活躍すると思います。

また、ゲームのような動きが予測出来ないような場合には「複雑なアニメーション」をregisterBeforeRender関数を利用して実行します。

お次はコリジョン(衝突)判定

いきましょう

hollywis.hatenablog.com