fix: scaled local time should not be interpolated with easing function (

#1656)

* fix: scaled local time should not be interpolated with easing function #1623

* chore: commit changeset

.changeset/loud-seahorses-raise.md

@@ -0,0 +1,6 @@
+---
+'@antv/g-plugin-svg-renderer': patch
+'@antv/g-web-animations-api': patch
+---
+
+Scaled local time should not be interpolated with easing function.

__tests__/unit/dom/animation.timeline.spec.ts

@@ -118,4 +118,41 @@ describe('Animation Timeline', () => {
 
     expect(circle.style.opacity).toBe(0.5);
   });
+
+  it('should use cubic-bezier correctly', async () => {
+    const circle = new Circle({
+      id: 'circle',
+      style: {
+        r: 100,
+      },
+    });
+
+    await canvas.ready;
+    canvas.appendChild(circle);
+
+    const animation = circle.animate([{ r: 0 }, { r: 100 }], {
+      duration: 500,
+      easing: 'cubic-bezier(0.05, 0.21, 0.26, 1.31)',
+      fill: 'forwards',
+    })!;
+
+    animation.pause();
+    animation.currentTime = 0;
+    expect(circle.style.r).toBe(0);
+
+    animation.currentTime = 250;
+    expect(circle.style.r).toBeCloseTo(98.24289047791895);
+
+    animation.currentTime = 275;
+    expect(circle.style.r).toBeCloseTo(100.96325609464722);
+
+    animation.currentTime = 400;
+    expect(circle.style.r).toBeCloseTo(105.24435426047445);
+
+    animation.currentTime = 450;
+    expect(circle.style.r).toBeCloseTo(103.43753135054527);
+
+    animation.currentTime = 500;
+    expect(circle.style.r).toBe(100);
+  });
 });

__tests__/unit/web-animations-api/custom-easing.spec.ts

@@ -1,6 +1,7 @@
 import {
   convertToDash,
   EasingFunctions,
+  parseEasingFunction,
 } from '../../../packages/g-web-animations-api/src/utils';
 
 describe('Custom easing utils', () => {
@@ -18,4 +19,17 @@ describe('Custom easing utils', () => {
       }
     });
   });
+
+  it('should calc cubic-bezier correctly.', () => {
+    let f = parseEasingFunction('cubic-bezier(0, 0, 1, 0.5)');
+    expect(f(0)).toBe(0);
+    expect(f(0.5)).toBe(0.3125);
+    expect(f(1)).toBe(1);
+
+    f = parseEasingFunction('cubic-bezier(0.05, 0.21, 0.26, 1.31)');
+    expect(f(0)).toBe(0);
+    expect(f(0.5)).toBeCloseTo(0.9824289047791895);
+    expect(f(0.75)).toBeCloseTo(1.0546732024179284);
+    expect(f(1)).toBe(1);
+  });
 });

packages/g-plugin-svg-renderer/src/SVGRendererPlugin.ts

@@ -442,12 +442,14 @@ export class SVGRendererPlugin implements RenderingPlugin {
       rts[5],
     )},${numberToLongString(rts[12])},${numberToLongString(rts[13])})`;
 
-    $el.removeAttribute('transform');
-    if (matrix !== DEFAULT_VALUE_MAP.transform) {
+    if (matrix !== $el.getAttribute('transform')) {
       // use proper precision avoiding too long string in `transform`
       // @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
       $el.setAttribute('transform', matrix);
     }
+    if (matrix === DEFAULT_VALUE_MAP.transform) {
+      $el.removeAttribute('transform');
+    }
   }
 
   private applyAttributes(object: DisplayObject) {

packages/g-web-animations-api/src/utils/interpolation.ts

@@ -37,9 +37,7 @@ export function convertEffectInput(
           const localDuration =
             interpolation.endOffset - interpolation.startOffset;
           const scaledLocalTime =
-            localDuration === 0
-              ? 0
-              : interpolation.easingFunction(offsetFraction / localDuration);
+            localDuration === 0 ? 0 : offsetFraction / localDuration;
           // apply updated attribute
           target.setAttribute(
             interpolation.property,