Animating the same object property in different animations

[Aranda]

Hi all, I may be missing something but I'm finding the Animation API in BJS a little confusing and unwieldy. I want to animate a door to open and close, but it seems that the API is not geared towards applying multiple subsequent animations to the same property? You have to "push" those animations onto then node and then use the scene to start the animation... but I found I had to manually remove my pushed animations or the node.animations array just grew longer as the door opened and closed!. This is the code I ended up with - am I missing something?

var ComponentAnimator = function (scene, node, delay, duration, rotationOffset) {    var self = this;        this.fps = 30;    this.scene = scene;    this.node = node;    this.endFrame = Math.round((delay + duration) * this.fps);    this.rotationAnim = new BABYLON.Animation("rotationAnim", "rotation", this.fps, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);    this.rotationAnimReverse = new BABYLON.Animation("rotationAnimReverse", "rotation", this.fps, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);    this.currentAnim = undefined;    this.animateable = undefined;        var keys = [{            frame: 0,            value: node.rotation        },        {            frame: Math.round(delay * this.fps),            value: node.rotation        },        {            frame: this.endFrame,            value: new BABYLON.Vector3(node.rotation.x + rotationOffset.x, node.rotation.y + rotationOffset.y, node.rotation.z + rotationOffset.z)        }];    this.rotationAnim.setKeys(keys);        var keysReverse = [{            frame: 0,            value: new BABYLON.Vector3(node.rotation.x + rotationOffset.x, node.rotation.y + rotationOffset.y, node.rotation.z + rotationOffset.z)        },        {            frame: Math.round(duration * this.fps),            value: node.rotation        }];        this.rotationAnimReverse.setKeys(keysReverse);}ComponentAnimator.prototype.stopAnim = function () {    if (this.currentAnim != undefined) {        // Need to manually remove animation from node's arrau of animations!        var index = this.node.animations.indexOf(this.currentAnim);        if (index >= 0) this.node.animations.splice(index, 1);        this.currentAnim = undefined;    }}ComponentAnimator.prototype.startAnim = function (anim) {    this.stopAnim();    this.currentAnim = anim;    this.node.animations.push(anim);    this.animateable = this.scene.beginAnimation(this.node, 0, 100, false, 1.0, undefined);}ComponentAnimator.prototype.startAnimForwards = function () {    this.startAnim(this.rotationAnim);}ComponentAnimator.prototype.startAnimReverse = function () {    this.startAnim(this.rotationAnimReverse);} 

[GameMonetize]

Hello, you have multiple options here:

- have one big animation with open from key 0 to  50 and close from key 50 to 100 (best option) and thus launching the right animation is just about selecting the right key

- do what you do (which works:))

- call this.scene.beginDirectAnimation(this.node, [this.rotationAnimReverse], 0, 100, false);

 

 

 

Hope this helps ​

[Aranda]

Thank you!

 

I'll go with using beginDirectAnimation unless there are obvious drawbacks. Presumably I don't need to worry about pushing the animation onto the node.animations, or removing it, if I go with this approach?

[GameMonetize]

That's correct