feat: trigger hardware accelerated transition if possible (#10)

* wip: linear easing function

* feat: trigger hardware accelerated transition if possible

* test: fix test cases

Author: ktsn

src/core/animate.ts

@@ -7,7 +7,7 @@ import {
   springSettlingDuration,
   Spring,
 } from './spring'
-import { isBrowserSupported, mapValues, zip } from './utils'
+import { isBrowserSupported, mapValues, range, zip } from './utils'
 import {
   ParsedStyleValue,
   completeParsedStyleUnit,
@@ -85,7 +85,16 @@ export function animate<T extends Record<string, [AnimateValue, AnimateValue]>>(
     set,
   })
 
-  if (isBrowserSupported()) {
+  if (canUseLinearTimingFunction(parsedFromTo, options.velocity)) {
+    animateWithLinearTimingFunction({
+      spring,
+      fromTo: parsedFromTo,
+      velocity: options.velocity,
+      duration,
+      settlingDuration,
+      set,
+    })
+  } else if (isBrowserSupported()) {
     animateWithCssTransition({
       spring,
       fromTo: parsedFromTo,
@@ -106,6 +115,122 @@ export function animate<T extends Record<string, [AnimateValue, AnimateValue]>>(
   return ctx
 }
 
+/**
+ * Check if the animation can be done with linear() timing function.
+ * The animation can be done with linear() timing function if:
+ * - All the velocities in the same property are zero or
+ * - Only one value will be animated in the same property.
+ */
+function canUseLinearTimingFunction(
+  fromTo: Record<string, [ParsedStyleValue, ParsedStyleValue]>,
+  velocity: Partial<Record<string, number[]>> | undefined,
+): boolean {
+  if (!velocity) {
+    return true
+  }
+
+  return Object.keys(fromTo).every((key) => {
+    const [from, to] = fromTo[key]!
+    const velocities = velocity[key]
+
+    if (!velocities || velocities.every((v) => v === 0)) {
+      return true
+    }
+
+    const animatedValues = zip(from.values, to.values).filter(([from, to]) => {
+      return from !== to
+    })
+    if (animatedValues.length <= 1) {
+      return true
+    }
+
+    return false
+  })
+}
+
+function animateWithLinearTimingFunction({
+  spring,
+  fromTo,
+  velocity,
+  duration,
+  settlingDuration,
+  set,
+}: {
+  spring: Spring
+  fromTo: Record<string, [ParsedStyleValue, ParsedStyleValue]>
+  velocity: Partial<Record<string, number[]>> | undefined
+  duration: number
+  settlingDuration: number
+  set: (style: Record<string, string>) => void
+}): void {
+  const fromStyle = mapValues(fromTo, ([from, to]) => {
+    // Skip animation if the value is not consistent
+    if (from.values.length !== to.values.length) {
+      return interpolateParsedStyle(to, to.values)
+    }
+
+    return interpolateParsedStyle(from, from.values)
+  })
+
+  set({
+    ...fromStyle,
+    transition: 'none',
+  })
+
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const toStyle = mapValues(fromTo, ([_from, to]) => {
+        return interpolateParsedStyle(to, to.values)
+      })
+
+      // 60fps
+      const steps = settlingDuration / 60
+
+      const easingValues = mapValues(fromTo, ([from, to], key) => {
+        const initialVelocity = zip(from.values, to.values).reduce<
+          number | undefined
+        >((acc, [from, to], i) => {
+          if (acc !== undefined) {
+            return acc
+          }
+
+          if (from === to) {
+            return undefined
+          }
+
+          return (velocity?.[key]?.[i] ?? 0) / (to - from)
+        }, undefined)
+
+        return range(0, steps + 1).map((i) => {
+          const t = (i / steps) * (settlingDuration / duration)
+          const value = springValue(spring, {
+            time: t,
+            from: 0,
+            to: 1,
+            initialVelocity: initialVelocity ?? 0,
+          })
+          return value
+        })
+      })
+
+      const transition = Object.entries(easingValues)
+        .map(([key, value]) => {
+          if (value) {
+            return `${key} ${settlingDuration}ms linear(${value.join(',')})`
+          } else {
+            return `${key} 0s`
+          }
+        })
+        .join(',')
+
+      set({
+        ...toStyle,
+        transition,
+      })
+    })
+  })
+}
+
 function animateWithCssTransition({
   spring,
   fromTo,

src/core/utils.ts

@@ -18,6 +18,14 @@ export function zip<T>(a: readonly T[], b: readonly T[]): [T, T][] {
   return result
 }
 
+export function range(start: number, end: number): number[] {
+  const result = []
+  for (let i = start; i < end; i++) {
+    result.push(i)
+  }
+  return result
+}
+
 export function isBrowserSupported(): boolean {
   return (
     typeof CSS !== 'undefined' &&

test/core/animate.test.ts

@@ -186,18 +186,21 @@ describe('animate', () => {
         value = v
       },
       {
-        duration: 10,
+        duration: 100,
       },
     )
-    expect(value?.x).not.toBe('0')
-    expect(value?.x).not.toBe('10')
-    expect(value?.x).not.toMatch(/\d+px/)
-    expect(value?.y).not.toBe('0px')
-    expect(value?.y).not.toBe('20px')
-    expect(value?.y).toMatch(/\d+px/)
+    expect(value?.x).toBe('0')
+    expect(value?.y).toBe('0px')
+    expect(value?.transition).toBe('none')
+    await raf()
+    await raf()
+    expect(value?.x).toBe('10')
+    expect(value?.y).toBe('20px')
+    expect(value?.transition).not.toBe('none')
     await ctx.settlingPromise
     expect(value?.x).toBe('10')
     expect(value?.y).toBe('20px')
+    expect(value?.transition).toBe('')
   })
 
   test('pass to style value immediately if the value is not animatable (from is not animatable)', async () => {

test/core/controller.test.ts

@@ -10,6 +10,10 @@ vitest.mock('../../src/core/utils', async () => {
   }
 })
 
+function raf(): Promise<void> {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()))
+}
+
 describe('AnimationController', () => {
   test('set initial style', () => {
     let actual: Record<string, string> | undefined
@@ -33,7 +37,7 @@ describe('AnimationController', () => {
     expect(actual).toEqual({ width: '200px', transition: '', [t]: '' })
   })
 
-  test('set style with animation', () => {
+  test('set style with animation', async () => {
     let actual: Record<string, string> | undefined
     const controller = createAnimateController((style) => {
       actual = style
@@ -43,10 +47,12 @@ describe('AnimationController', () => {
     expect(actual?.width).toEqual('100px')
 
     controller.setStyle({ width: `200px` })
-    expect(actual?.width).not.toBe('100px')
-    expect(actual?.width).not.toBe('200px')
-    expect(actual?.transition).not.toBe('')
-    expect(actual?.[t]).not.toBe('')
+    expect(actual?.width).toBe('100px')
+    expect(actual?.transition).toBe('none')
+    await raf()
+    await raf()
+    expect(actual?.width).toBe('200px')
+    expect(actual?.[t]).not.toBe('none')
   })
 
   test('set style without animation if the value is not animatable', () => {
@@ -77,7 +83,7 @@ describe('AnimationController', () => {
     expect(actual?.[t]).toBe('')
   })
 
-  test('trigger animation if any style value is different', () => {
+  test('trigger animation if any style value is different', async () => {
     let actual: Record<string, string> | undefined
     const controller = createAnimateController((style) => {
       actual = style
@@ -88,10 +94,14 @@ describe('AnimationController', () => {
     expect(actual?.height).toBe('200px')
 
     controller.setStyle({ width: `100px`, height: `100px` })
-    expect(actual?.width).not.toBe('100px')
-    expect(actual?.height).not.toBe('200px')
-    expect(actual?.transition).not.toBe('')
-    expect(actual?.[t]).not.toBe('')
+    expect(actual?.width).toBe('100px')
+    expect(actual?.height).toBe('200px')
+    expect(actual?.transition).toBe('none')
+    await raf()
+    await raf()
+    expect(actual?.width).toBe('100px')
+    expect(actual?.height).toBe('100px')
+    expect(actual?.transition).not.toBe('none')
   })
 
   test('complete style unit if the value is 0 without unit', () => {
@@ -212,7 +222,7 @@ describe('AnimationController', () => {
     const controller = createAnimateController((_style) => {
       style = _style
     })
-    controller.setOptions({ duration: 10 })
+    controller.setOptions({ duration: 100 })
     controller.setStyle({ width: '100px' }, { animate: false })
     controller.setStyle({ width: '200px' })
 

test/vue/use-spring.test.ts

@@ -235,7 +235,7 @@ describe('useSpring', () => {
         width: `${value.value}px`,
       }),
       {
-        duration: 20,
+        duration: 100,
       },
     )