Improve animation easing and duration handling

Updated universalSoftIn and universalSoftOff animations to use cubic easing for smoother transitions and track elapsed time for accurate progress. Increased default animation duration in getEnterExitAnimation for better visual effect.

Author: MakinoharaShoko

packages/webgal/src/Core/Modules/animationFunctions.ts

@@ -76,7 +76,7 @@ export function getEnterExitAnimation(
     }
     return { duration, animation };
   } else {
-    let duration = 750;
+    let duration = 1000;
     if (isBg) {
       duration = 1500;
     }

packages/webgal/src/Core/controller/stage/pixi/animations/universalSoftIn.ts

@@ -2,14 +2,14 @@ import { WebGAL } from '@/Core/WebGAL';
 
 export function generateUniversalSoftInAnimationObj(targetKey: string, duration: number) {
   const target = WebGAL.gameplay.pixiStage!.getStageObjByKey(targetKey);
+  let elapsedTime = 0;
 
   // 先设置一个通用的初态
-
-  // TODO：通用初态设置
   /**
    * 在此书写为动画设置初态的操作
    */
   function setStartState() {
+    elapsedTime = 0; // Reset timer when animation starts
     if (target) {
       target.pixiContainer.alpha = 0;
     }
@@ -33,12 +33,22 @@ export function generateUniversalSoftInAnimationObj(targetKey: string, duration:
     if (target) {
       const sprite = target.pixiContainer;
       const baseDuration = WebGAL.gameplay.pixiStage!.frameDuration;
-      const currentAddOplityDelta = (duration / baseDuration) * delta;
-      const increasement = 1 / currentAddOplityDelta;
-      // const decreasement = 5 / currentAddOplityDelta;
-      if (sprite.alpha < 1) {
-        sprite.alpha += increasement;
-      }
+
+      // Increment the elapsed time by the duration of the last frame
+      elapsedTime += baseDuration;
+
+      // Ensure elapsedTime does not exceed the total duration
+      const realElapsedTime = Math.min(elapsedTime, duration);
+
+      // Calculate the progress of the animation as a value from 0 to 1
+      const progress = realElapsedTime / duration;
+
+      // Apply the Cubic Ease-Out function
+      // The formula is: 1 - (1 - progress)^3
+      const easedProgress = 1 - Math.pow(1 - progress, 3);
+
+      // Set the sprite's alpha to the eased value
+      sprite.alpha = easedProgress;
     }
   }
 

packages/webgal/src/Core/controller/stage/pixi/animations/universalSoftOff.ts

@@ -2,19 +2,29 @@ import { WebGAL } from '@/Core/WebGAL';
 
 export function generateUniversalSoftOffAnimationObj(targetKey: string, duration: number) {
   const target = WebGAL.gameplay.pixiStage!.getStageObjByKey(targetKey);
+  let elapsedTime = 0;
 
   // 先设置一个通用的初态
 
   /**
    * 在此书写为动画设置初态的操作
    */
-  function setStartState() {}
+  function setStartState() {
+    elapsedTime = 0; // Reset timer when animation starts
+    if (target) {
+      // It's good practice to ensure the starting alpha is 1
+      // in case the animation is chained or re-run.
+      target.pixiContainer.alpha = 1;
+    }
+  }
 
   /**
    * 在此书写为动画设置终态的操作
    */
   function setEndState() {
-    if (target) target.pixiContainer.alpha = 0;
+    if (target) {
+      target.pixiContainer.alpha = 0;
+    }
   }
 
   /**
@@ -25,11 +35,24 @@ export function generateUniversalSoftOffAnimationObj(targetKey: string, duration
     if (target) {
       const targetContainer = target.pixiContainer;
       const baseDuration = WebGAL.gameplay.pixiStage!.frameDuration;
-      const currentAddOplityDelta = (duration / baseDuration) * delta;
-      const decreasement = 1 / currentAddOplityDelta;
-      if (targetContainer.alpha > 0) {
-        targetContainer.alpha -= decreasement;
-      }
+
+      // Increment the elapsed time by the duration of the last frame
+      elapsedTime += baseDuration;
+
+      // Ensure elapsedTime does not exceed the total duration
+      const realElapsedTime = Math.min(elapsedTime, duration);
+
+      // Calculate the progress of the animation as a value from 0 to 1
+      const progress = realElapsedTime / duration;
+
+      // Apply the Cubic Ease-In function
+      // The formula is: progress^3
+      const easedProgress = Math.pow(progress, 3);
+
+      // To fade out, we subtract the eased progress from 1
+      // As easedProgress goes from 0 to 1 (slowly then quickly),
+      // alpha will go from 1 to 0 (slowly then quickly).
+      targetContainer.alpha = 1 - easedProgress;
     }
   }