js:如何在动画循环中的3个动画序列状态之间顺利过渡

我试图在短时间内顺利完成3种不同的扑翼序列的过渡。现在它们只是从一个状态跳到另一个状态。拍动翅膀有三种状态:1)在地面上。2)飞起来。3)向下飞。这很令人困惑，因为循环中的任何东西都会被循环，但是每次状态改变时，这将是一个平滑的一次转换。有什么好主意吗?

这是一个活塞

这是相关的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);
}