I want to achieve smooth transitions for the three different wing flapping sequences within a short period of time. Currently, the transitions appear abrupt as they jump from one state to another. The wings have 3 distinct states: 1) On the ground, 2) Flying up, and 3) Flying down. I am looking for a way to smoothly transition between these states whenever there is a change. Any suggestions on how to accomplish this?
Below is the relevant JavaScript code:
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);
}