Jump to content

Animating the same object property in different animations


Recommended Posts

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);} 
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...