@shopify/react-native-skia 0.0.135

package/src/animation/spring/functions/spring.ts

@@ -0,0 +1,86 @@
+import type { SpringConfig } from "../types";
+import type { TimingConfig } from "../../types";
+
+/**
+ * @description Returns a cached jsContext function for a spring with duration
+ * @param mass The mass of the spring
+ * @param stiffness The stiffness of the spring
+ * @param damping Spring damping
+ * @param velocity The initial velocity
+ */
+export const createSpringEasing = (
+  params: Partial<SpringConfig>
+): TimingConfig => {
+  const config = {
+    mass: 1,
+    stiffness: 100,
+    damping: 10,
+    velocity: 0,
+    ...params,
+  };
+  config.velocity /= 100;
+  return getSpringEasing(config);
+};
+
+const getSpringEasing = (config: Required<SpringConfig>) => {
+  const { stiffness, mass, damping, velocity: initialVelocity } = config;
+  // Setup spring state
+  const state = {
+    w0: Math.sqrt(stiffness / mass),
+    zeta: 0,
+    wd: 0,
+    a: 1,
+    b: 0,
+  };
+  state.zeta = damping / (2 * Math.sqrt(stiffness * mass));
+  state.wd =
+    state.zeta < 1 ? state.w0 * Math.sqrt(1 - state.zeta * state.zeta) : 0;
+  state.a = 1;
+  state.b =
+    state.zeta < 1
+      ? (state.zeta * state.w0 + -initialVelocity) / state.wd
+      : -initialVelocity + state.w0;
+
+  const update = (t: number, duration?: number) => {
+    let progress = duration ? (duration * t) / 1000 : t;
+    if (state.zeta < 1) {
+      progress =
+        Math.exp(-progress * state.zeta * state.w0) *
+        (state.a * Math.cos(state.wd * progress) +
+          state.b * Math.sin(state.wd * progress));
+    } else {
+      progress =
+        (state.a + state.b * progress) * Math.exp(-progress * state.w0);
+    }
+    if (t === 0 || t === 1) {
+      return t;
+    }
+    return 1 - progress;
+  };
+
+  const getDurationMs = () => {
+    var frame = 1 / 6;
+    var elapsed = 0;
+    var rest = 0;
+    while (true) {
+      elapsed += frame;
+      if (update(elapsed) === 1) {
+        rest++;
+        if (rest >= 6) {
+          break;
+        }
+      } else {
+        rest = 0;
+      }
+    }
+    var durationMs = elapsed * frame * 1000;
+    return durationMs + 1000;
+  };
+
+  const durationMs = getDurationMs();
+
+  return {
+    easing: (t: number) => update(t, durationMs),
+    duration: durationMs,
+  };
+};

package/src/animation/spring/index.ts

@@ -0,0 +1,3 @@
+export { Spring } from "./Spring";
+export { runSpring } from "./runSpring";
+export { useSpring } from "./useSpring";

package/src/animation/spring/runSpring.ts

@@ -0,0 +1,37 @@
+import type { SkiaMutableValue, SkiaAnimation } from "../../values/types";
+import type {
+  AnimationParams,
+  SpringConfig,
+  AnimationCallback,
+} from "../types";
+import { runTiming } from "../timing/runTiming";
+
+import { Spring } from "./Spring";
+import { createSpringEasing } from "./functions/spring";
+
+/**
+ * Creates a new animation on an existing value that will be driven by
+ * an animation value. The value will be run from / to the value in
+ * params and modified by the provided easing curve for the length of
+ * the duration. When the value has reached its desired "to" value the
+ * animation will be stopped.
+ *
+ * @param value The value to animate
+ * @param toOrParams To value or Animation parameters
+ * @param config Spring configuration
+ * @returns an animation value that can be used to start/stop
+ * the animation.
+ */
+export const runSpring = (
+  value: SkiaMutableValue<number>,
+  toOrParams: number | AnimationParams,
+  config?: SpringConfig,
+  callback?: AnimationCallback
+): SkiaAnimation => {
+  return runTiming(
+    value,
+    toOrParams,
+    createSpringEasing(config ?? Spring.Config.Default),
+    callback
+  );
+};

package/src/animation/spring/types.ts

@@ -0,0 +1,6 @@
+export interface SpringConfig {
+  mass?: number;
+  stiffness?: number;
+  velocity?: number;
+  damping?: number;
+}

package/src/animation/spring/useSpring.ts

@@ -0,0 +1,28 @@
+import type { SkiaValue } from "../../values/types";
+import type {
+  SpringConfig,
+  AnimationParams,
+  AnimationCallback,
+} from "../types";
+import { useTiming } from "../timing";
+
+import { Spring } from "./Spring";
+import { createSpringEasing } from "./functions/spring";
+
+/**
+ * Creats a spring based animation value that will run whenever
+ * the animation parameters change.
+ * @param toOrParams
+ * @param config
+ * @returns
+ */
+export const useSpring = (
+  toOrParams: number | AnimationParams,
+  config?: SpringConfig,
+  callback?: AnimationCallback
+): SkiaValue<number> =>
+  useTiming(
+    toOrParams,
+    createSpringEasing(config ?? Spring.Config.Default),
+    callback
+  );

package/src/animation/timing/Easing.ts

@@ -0,0 +1,102 @@
+// eslint-disable-next-line max-len
+// Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/Easing.js
+
+import { bezier } from "./functions";
+
+export class Easing {
+  static step0(n: number): number {
+    return n > 0 ? 1 : 0;
+  }
+
+  static step1(n: number): number {
+    return n >= 1 ? 1 : 0;
+  }
+
+  static linear(t: number): number {
+    return t;
+  }
+
+  static ease(t: number): number {
+    return Easing.bezier(0.42, 0, 1, 1)(t);
+  }
+
+  static quad(t: number): number {
+    return t * t;
+  }
+
+  static cubic(t: number): number {
+    return t * t * t;
+  }
+
+  static poly(n: number): (t: number) => number {
+    return (t: number): number => t ** n;
+  }
+
+  static sin(t: number): number {
+    return 1 - Math.cos((t * Math.PI) / 2);
+  }
+
+  static circle(t: number): number {
+    return 1 - Math.sqrt(1 - t * t);
+  }
+
+  static exp(t: number): number {
+    return 2 ** (10 * (t - 1));
+  }
+
+  static elastic(bounciness = 1): (t: number) => number {
+    const p = bounciness * Math.PI;
+    return (t): number =>
+      1 - Math.cos((t * Math.PI) / 2) ** 3 * Math.cos(t * p);
+  }
+
+  static back(s = 1.70158): (t: number) => number {
+    return (t): number => t * t * ((s + 1) * t - s);
+  }
+
+  static bounce(t: number): number {
+    if (t < 1 / 2.75) {
+      return 7.5625 * t * t;
+    }
+
+    if (t < 2 / 2.75) {
+      const t2_ = t - 1.5 / 2.75;
+      return 7.5625 * t2_ * t2_ + 0.75;
+    }
+
+    if (t < 2.5 / 2.75) {
+      const t2_ = t - 2.25 / 2.75;
+      return 7.5625 * t2_ * t2_ + 0.9375;
+    }
+
+    const t2 = t - 2.625 / 2.75;
+    return 7.5625 * t2 * t2 + 0.984375;
+  }
+
+  static bezier(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number
+  ): (t: number) => number {
+    return bezier(x1, y1, x2, y2);
+  }
+
+  static in(easing: (t: number) => number): (t: number) => number {
+    return easing;
+  }
+
+  static out(easing: (t: number) => number): (t: number) => number {
+    return (t): number => 1 - easing(1 - t);
+  }
+
+  static inOut(easing: (t: number) => number): (t: number) => number {
+    return (t): number => {
+      if (t < 0.5) {
+        return easing(t * 2) / 2;
+      }
+
+      return 1 - easing((1 - t) * 2) / 2;
+    };
+  }
+}

package/src/animation/timing/createTiming.ts

@@ -0,0 +1,62 @@
+import type {
+  TimingConfig,
+  RequiredAnimationParams,
+  AnimationCallback,
+} from "../types";
+import type { AnimationState, SkiaMutableValue } from "../../values/types";
+import { ValueApi } from "../../values/api";
+
+import { timing } from "./functions";
+
+/**
+ * Creates an animation that is driven by a clock value.
+ * The value will be run from / to the value in params and modified
+ * by the provided easing curve for the length of the duration. When
+ * the value has reached its desired "to" value the animation
+ * will be stopped. If loop is set to true, the animation will continue
+ * to run until stopped.
+ *
+ * @param params Animation parameters
+ * @param config Spring or timing configuration
+ * @param value Optional value that the animation will update
+ * @params an animation value that can be used to start/stop
+ * the animation.
+ */
+export const createTiming = (
+  params: RequiredAnimationParams & Required<TimingConfig>,
+  value?: SkiaMutableValue<number>,
+  callback?: AnimationCallback
+) => {
+  // Update from to be either the declared from value,
+  // the current value of the value or zero
+  const resolvedParams = {
+    ...params,
+    from: params.from ?? value?.current ?? 0,
+  };
+
+  // Update function for the animation value
+  const animationFunction = (t: number, state: AnimationState | undefined) => {
+    // Update the input value using the provided update function
+    const nextState = timing(
+      t,
+      params.duration,
+      params.easing,
+      params.loop ?? false,
+      params.yoyo ?? false,
+      state ?? { current: params.from!, finished: false }
+    );
+    const current =
+      nextState.current * (resolvedParams.to - resolvedParams.from!) +
+      resolvedParams.from!;
+    if (callback && nextState.finished === true) {
+      callback(current);
+    }
+    return {
+      ...nextState,
+      current,
+    };
+  };
+
+  // Create animation value
+  return ValueApi.createAnimation(animationFunction);
+};

package/src/animation/timing/functions/bezier.ts

@@ -0,0 +1,165 @@
+// eslint-disable-next-line max-len
+// Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/bezier.js
+
+const NEWTON_ITERATIONS = 4;
+const NEWTON_MIN_SLOPE = 0.001;
+const SUBDIVISION_PRECISION = 0.0000001;
+const SUBDIVISION_MAX_ITERATIONS = 10;
+
+const kSplineTableSize = 11;
+const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+const float32ArraySupported = typeof Float32Array === "function";
+
+function a(aA1: number, aA2: number): number {
+  return 1.0 - 3.0 * aA2 + 3.0 * aA1;
+}
+
+function b(aA1: number, aA2: number): number {
+  return 3.0 * aA2 - 6.0 * aA1;
+}
+
+function c(aA1: number): number {
+  return 3.0 * aA1;
+}
+
+// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+function calcBezier(aT: number, aA1: number, aA2: number): number {
+  return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
+}
+
+// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+function getSlope(aT: number, aA1: number, aA2: number): number {
+  return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1);
+}
+
+function binarySubdivide({
+  aX,
+  _aA,
+  _aB,
+  mX1,
+  mX2,
+}: {
+  aX: number;
+  _aA: number;
+  _aB: number;
+  mX1: number;
+  mX2: number;
+}): number {
+  let currentX;
+  let currentT;
+  let i = 0;
+  let aA = _aA;
+  let aB = _aB;
+  do {
+    currentT = aA + (aB - aA) / 2.0;
+    currentX = calcBezier(currentT, mX1, mX2) - aX;
+    if (currentX > 0.0) {
+      aB = currentT;
+    } else {
+      aA = currentT;
+    }
+  } while (
+    Math.abs(currentX) > SUBDIVISION_PRECISION &&
+    ++i < SUBDIVISION_MAX_ITERATIONS
+  );
+
+  return currentT;
+}
+
+function newtonRaphsonIterate(
+  aX: number,
+  _aGuessT: number,
+  mX1: number,
+  mX2: number
+): number {
+  let aGuessT = _aGuessT;
+  for (let i = 0; i < NEWTON_ITERATIONS; ++i) {
+    const currentSlope = getSlope(aGuessT, mX1, mX2);
+    if (currentSlope === 0.0) {
+      return aGuessT;
+    }
+
+    const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+    aGuessT -= currentX / currentSlope;
+  }
+
+  return aGuessT;
+}
+
+export function bezier(
+  mX1: number,
+  mY1: number,
+  mX2: number,
+  mY2: number
+): (x: number) => number {
+  if (!(mX1 >= 0 && mX1 <= 1 && mX2 >= 0 && mX2 <= 1)) {
+    throw new Error("bezier x values must be in [0, 1] range");
+  }
+
+  // Precompute samples table
+  const sampleValues = float32ArraySupported
+    ? new Float32Array(kSplineTableSize)
+    : new Array(kSplineTableSize);
+  if (mX1 !== mY1 || mX2 !== mY2) {
+    for (let i = 0; i < kSplineTableSize; ++i) {
+      sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+    }
+  }
+
+  function getTForX(aX: number): number {
+    let intervalStart = 0.0;
+    let currentSample = 1;
+    const lastSample = kSplineTableSize - 1;
+
+    for (
+      ;
+      currentSample !== lastSample && sampleValues[currentSample] <= aX;
+      ++currentSample
+    ) {
+      intervalStart += kSampleStepSize;
+    }
+
+    --currentSample;
+
+    // Interpolate to provide an initial guess for t
+    const dist =
+      (aX - sampleValues[currentSample]) /
+      (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+    const guessForT = intervalStart + dist * kSampleStepSize;
+
+    const initialSlope = getSlope(guessForT, mX1, mX2);
+    if (initialSlope >= NEWTON_MIN_SLOPE) {
+      return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+    }
+
+    if (initialSlope === 0.0) {
+      return guessForT;
+    }
+
+    return binarySubdivide({
+      aX,
+      _aA: intervalStart,
+      _aB: intervalStart + kSampleStepSize,
+      mX1,
+      mX2,
+    });
+  }
+
+  return function (x: number): number {
+    if (mX1 === mY1 && mX2 === mY2) {
+      return x; // linear
+    }
+
+    // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+    if (x === 0) {
+      return 0;
+    }
+
+    if (x === 1) {
+      return 1;
+    }
+
+    return calcBezier(getTForX(x), mY1, mY2);
+  };
+}

package/src/animation/timing/functions/getResolvedParams.ts

@@ -0,0 +1,50 @@
+import type {
+  RequiredAnimationParams,
+  AnimationParams,
+  TimingConfig,
+} from "../../types";
+
+const DefaultParameters = {
+  to: 1,
+  loop: false,
+  yoyo: false,
+  immediate: true,
+};
+
+const DefaultTimingConfig = {
+  duration: 1000,
+  easing: (t: number) => t,
+};
+
+/**
+ * Resolves parameters from optional values to a single object
+ * @param toOrParams Params or to value
+ * @param config timing/spring configuration
+ */
+export const getResolvedParams = (
+  toOrParams: number | AnimationParams,
+  config?: TimingConfig
+): RequiredAnimationParams & Required<TimingConfig> => {
+  let resolvedParameters: RequiredAnimationParams = {
+    ...DefaultParameters,
+  };
+
+  if (typeof toOrParams === "number") {
+    resolvedParameters.to = toOrParams;
+  } else {
+    resolvedParameters = {
+      from: toOrParams.from ?? resolvedParameters.from,
+      to: toOrParams.to ?? resolvedParameters.to,
+      loop: toOrParams.loop ?? resolvedParameters.loop,
+      yoyo: toOrParams.yoyo ?? resolvedParameters.yoyo,
+    };
+  }
+
+  const resolvedConfig: Required<TimingConfig> = { ...DefaultTimingConfig };
+  if (config) {
+    resolvedConfig.duration = config.duration ?? DefaultTimingConfig.duration;
+    resolvedConfig.easing = config.easing ?? DefaultTimingConfig.easing;
+  }
+
+  return { ...resolvedParameters, ...resolvedConfig };
+};

package/src/animation/timing/functions/index.ts

@@ -0,0 +1,4 @@
+export { bezier } from "./bezier";
+export { timing } from "./timing";
+export * from "./types";
+export * from "./getResolvedParams";

package/src/animation/timing/functions/timing.ts

@@ -0,0 +1,44 @@
+import type { AnimationState } from "../../../values/types";
+
+/**
+ * Calculates and returns a timing value based on the
+ * input parameters. The timing value is a number between
+ * 0 and 1.
+ * @param t
+ * @param duration
+ * @param easing
+ * @param loop
+ * @param yoyo
+ * @param onStop
+ * @returns
+ */
+export const timing = (
+  t: number,
+  duration: number,
+  easing: (t: number) => number,
+  loop: boolean,
+  yoyo: boolean,
+  state: AnimationState
+) => {
+  let current = t / duration;
+  let { finished } = state;
+  // Side effect to stop animation when duration is reached (if loop is false)
+  if (current >= 1.0 && !loop) {
+    finished = true;
+    current = 1.0;
+  }
+  // calculate return value
+  let n = current % 1;
+  if (yoyo) {
+    n = current % 2.0 >= 1.0 ? 1 - (current % 1) : current % 1;
+  } else if (!loop) {
+    if (current >= 1.0) {
+      n = 1.0;
+    }
+  }
+  current = easing(Math.max(0, Math.min(1, n)));
+  return {
+    current,
+    finished,
+  };
+};

package/src/animation/timing/functions/types.ts

@@ -0,0 +1,8 @@
+export type EasingFunction = (value: number) => number;
+
+export interface TimingConfig {
+  from?: number;
+  to?: number;
+  duration?: number;
+  easing?: EasingFunction;
+}

package/src/animation/timing/index.ts

@@ -0,0 +1,4 @@
+export { Easing } from "./Easing";
+export { useTiming } from "./useTiming";
+export { useLoop } from "./useLoop";
+export { runTiming } from "./runTiming";

package/src/animation/timing/runTiming.ts

@@ -0,0 +1,33 @@
+import type { SkiaMutableValue, SkiaAnimation } from "../../values/types";
+import type {
+  AnimationParams,
+  TimingConfig,
+  AnimationCallback,
+} from "../types";
+
+import { getResolvedParams } from "./functions";
+import { createTiming } from "./createTiming";
+/**
+ * Creates a new animation on an existing value that will be driven by
+ * an animation value. The value will be run from / to the value in
+ * params and modified by the provided easing curve for the length of
+ * the duration. When the value has reached its desired "to" value the
+ * animation will be stopped.
+ *
+ * @param value The value to animate
+ * @param toOrParams To value or Animation parameters
+ * @param config Spring or timing configuration
+ * @returns an animation value that can be used to start/stop
+ * the animation.
+ */
+export const runTiming = (
+  value: SkiaMutableValue<number>,
+  toOrParams: number | AnimationParams,
+  config?: TimingConfig,
+  callback?: AnimationCallback
+): SkiaAnimation => {
+  const resolvedParameters = getResolvedParams(toOrParams, config);
+  const animation = createTiming(resolvedParameters, value, callback);
+  value.animation = animation;
+  return animation;
+};

package/src/animation/timing/useLoop.ts

@@ -0,0 +1,18 @@
+import type { TimingConfig } from "../types";
+
+import { useTiming } from "./useTiming";
+
+/**
+ * Configures a looped timing value. The value will go back and forth
+ * between 0 and 1 and back.
+ * @param config Timing configuration for easing and duration
+ * @returns A value that can be used for further animations
+ */
+export const useLoop = (config?: TimingConfig) =>
+  useTiming(
+    {
+      yoyo: true,
+      loop: true,
+    },
+    config
+  );