Question

我试图在短时间内平滑地发生3种不同的机翼扑动序列的过渡。现在他们只是从一个州跳到另一个州。翅膀拍打有3种状态，1）在地面上。 2）飞起来。 3）飞下来。这是令人困惑的，因为循环中的任何东西都会被循环，但每次状态改变时，这将是一个平滑的一次转换。任何想法如何实现这一目标？

Here's a plunker

以下是相关的JS：

Pig.prototype.updateWingsFly = function() {
    this.wingAngle += this.wingSpeed/globalSpeedRate;
    this.wingL.rotation.z = -Math.PI / 4 + Math.cos(this.wingAngle) * this.wingAmplitude;
    this.wingR.rotation.z = Math.PI / 4 - Math.cos(this.wingAngle) * this.wingAmplitude;
}

Pig.prototype.updateWingsDescend = function() {
    this.wingAngle += this.wingSpeed/globalSpeedRate;
    this.wingL.rotation.z = -Math.PI / 2 + Math.cos(this.wingAngle) * this.wingAmplitude / 4;
    this.wingR.rotation.z = Math.PI / 2 - Math.cos(this.wingAngle) * this.wingAmplitude / 4 ;
}

Pig.prototype.updateWingsRest = function() {
    this.wingAngle += this.wingSpeed/globalSpeedRate;
    this.wingL.rotation.z = -Math.PI / 4 + Math.cos(this.wingAngle) * this.wingAmplitude / 8;
    this.wingR.rotation.z = Math.PI / 4 - Math.cos(this.wingAngle) * this.wingAmplitude / 8;

}

function loop(){
    render();
    var xTarget = (mousePos.x-windowHalfX);
    var yTarget= (mousePos.y-windowHalfY);
    pig.look(xTarget, yTarget);
    getFlyPosition();


    if (objectHeight === 0){
          pig.updateWingsRest();
          } else if (isFlyingUp){
          pig.updateWingsFly();
          } else {
          pig.updateWingsDescend();
    }
    requestAnimationFrame(loop);
}

Answer 1

Tween.js是您的解决方案。它用于以平滑的方式更改变量值，它非常适合平滑3DObjects动画。

http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

three.js：如何在动画循环中的3个动画序列状态之间平滑过渡

1 个答案: