@shopify/react-native-skia 0.1.115

package/src/values/animation/decay/runDecay.ts

@@ -0,0 +1,37 @@
+import { ValueApi } from "../../api";
+import type { SkiaValue } from "../../types";
+
+import { decay } from "./decay";
+import type { DecayConfig, DefaultDecayConfig, DecayState } from "./types";
+
+/**
+ * Runs a decay animation from the current value to zero with the given decay
+ * configuration.
+ * @param value value to animate
+ * @param config Configuration or default configuration
+ * @returns Animation
+ */
+export const runDecay = (value: SkiaValue<number>, config?: DecayConfig) => {
+  const resolvedConfig: DefaultDecayConfig = {
+    deceleration: 0.998,
+    velocityFactor: 1,
+    velocity: 0,
+    from: value.current,
+    ...config,
+  };
+  const updateFunction = (t: number, state: DecayState | undefined) => {
+    if (!state) {
+      return {
+        current: resolvedConfig.from,
+        finished: false,
+        lastTimestamp: t,
+        startTimestamp: t,
+        initialVelocity: resolvedConfig.velocity,
+        velocity: resolvedConfig.velocity,
+      };
+    }
+    return decay(t, state, resolvedConfig);
+  };
+  value.animation = ValueApi.createAnimation(updateFunction);
+  return value.animation;
+};

package/src/values/animation/decay/types.ts

@@ -0,0 +1,24 @@
+import type { AnimationState } from "../../types";
+
+export interface DecayConfig {
+  from?: number;
+  deceleration?: number;
+  velocityFactor?: number;
+  clamp?: number[];
+  velocity?: number;
+}
+
+export interface DefaultDecayConfig {
+  from: number;
+  deceleration: number;
+  velocityFactor: number;
+  clamp?: number[];
+  velocity: number;
+}
+
+export interface DecayState extends AnimationState {
+  lastTimestamp: number;
+  startTimestamp: number;
+  initialVelocity: number;
+  velocity: number;
+}

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

@@ -0,0 +1,2 @@
+export { interpolate } from "./interpolate";
+export { interpolateColors, mixColors } from "./interpolateColors";

package/src/values/animation/functions/interpolate.ts

@@ -0,0 +1,169 @@
+// eslint-disable-next-line max-len
+// Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/nodes/AnimatedInterpolation.js
+
+type ExtrapolateType = "extend" | "identity" | "clamp";
+
+function interpolateFunction(
+  input: number,
+  inputRange: [number, number],
+  outputRange: [number, number],
+  options: {
+    easing: (input: number) => number;
+    extrapolateLeft: ExtrapolateType;
+    extrapolateRight: ExtrapolateType;
+  }
+): number {
+  const { extrapolateLeft, extrapolateRight, easing } = options;
+
+  let result = input;
+  const [inputMin, inputMax] = inputRange;
+  const [outputMin, outputMax] = outputRange;
+
+  if (result < inputMin) {
+    if (extrapolateLeft === "identity") {
+      return result;
+    }
+
+    if (extrapolateLeft === "clamp") {
+      result = inputMin;
+    } else if (extrapolateLeft === "extend") {
+      // noop
+    }
+  }
+
+  if (result > inputMax) {
+    if (extrapolateRight === "identity") {
+      return result;
+    }
+
+    if (extrapolateRight === "clamp") {
+      result = inputMax;
+    } else if (extrapolateRight === "extend") {
+      // noop
+    }
+  }
+
+  if (outputMin === outputMax) {
+    return outputMin;
+  }
+
+  // Input Range
+  result = (result - inputMin) / (inputMax - inputMin);
+
+  // Easing
+  result = easing(result);
+
+  // Output Range
+  result = result * (outputMax - outputMin) + outputMin;
+
+  return result;
+}
+
+function findRange(input: number, inputRange: readonly number[]) {
+  let i;
+  for (i = 1; i < inputRange.length - 1; ++i) {
+    if (inputRange[i] >= input) {
+      break;
+    }
+  }
+
+  return i - 1;
+}
+
+function checkValidInputRange(arr: readonly number[]) {
+  for (let i = 1; i < arr.length; ++i) {
+    if (!(arr[i] > arr[i - 1])) {
+      throw new Error(
+        `inputRange must be strictly monotonically non-decreasing but got [${arr.join(
+          ","
+        )}]`
+      );
+    }
+  }
+}
+
+function checkInfiniteRange(name: string, arr: readonly number[]) {
+  if (arr.length < 2) {
+    throw new Error(name + " must have at least 2 elements");
+  }
+
+  for (const index in arr) {
+    if (typeof arr[index] !== "number") {
+      throw new Error(`${name} must contain only numbers`);
+    }
+
+    if (arr[index] === -Infinity || arr[index] === Infinity) {
+      throw new Error(
+        `${name} must contain only finite numbers, but got [${arr.join(",")}]`
+      );
+    }
+  }
+}
+
+export function interpolate(
+  input: number,
+  inputRange: readonly number[],
+  outputRange: readonly number[],
+  options?: {
+    easing?: (input: number) => number;
+    extrapolateLeft?: ExtrapolateType;
+    extrapolateRight?: ExtrapolateType;
+  }
+): number {
+  if (typeof input === "undefined") {
+    throw new Error("input can not be undefined");
+  }
+
+  if (typeof inputRange === "undefined") {
+    throw new Error("inputRange can not be undefined");
+  }
+
+  if (typeof outputRange === "undefined") {
+    throw new Error("outputRange can not be undefined");
+  }
+
+  if (inputRange.length !== outputRange.length) {
+    throw new Error(
+      "inputRange (" +
+        inputRange.length +
+        ") and outputRange (" +
+        outputRange.length +
+        ") must have the same length"
+    );
+  }
+
+  checkInfiniteRange("inputRange", inputRange);
+  checkInfiniteRange("outputRange", outputRange);
+
+  checkValidInputRange(inputRange);
+
+  const easing = options?.easing ?? ((num: number): number => num);
+
+  let extrapolateLeft: ExtrapolateType = "extend";
+  if (options?.extrapolateLeft !== undefined) {
+    // eslint-disable-next-line prefer-destructuring
+    extrapolateLeft = options.extrapolateLeft;
+  }
+
+  let extrapolateRight: ExtrapolateType = "extend";
+  if (options?.extrapolateRight !== undefined) {
+    // eslint-disable-next-line prefer-destructuring
+    extrapolateRight = options.extrapolateRight;
+  }
+
+  if (typeof input !== "number") {
+    throw new TypeError("Cannot interpolate an input which is not a number");
+  }
+
+  const range = findRange(input, inputRange);
+  return interpolateFunction(
+    input,
+    [inputRange[range], inputRange[range + 1]],
+    [outputRange[range], outputRange[range + 1]],
+    {
+      easing,
+      extrapolateLeft,
+      extrapolateRight,
+    }
+  );
+}

package/src/values/animation/functions/interpolateColors.ts

@@ -0,0 +1,62 @@
+import { mix } from "../../../renderer";
+import type { Color } from "../../../skia";
+import { alphaf, blue, green, red, rgbaColor, Skia } from "../../../skia";
+
+import { interpolate } from "./interpolate";
+
+const CLAMP = {
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+} as const;
+
+const interpolateColorsRGB = (
+  value: number,
+  inputRange: number[],
+  outputRange: number[]
+) => {
+  const r = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => red(c)),
+    CLAMP
+  );
+  const g = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => green(c)),
+    CLAMP
+  );
+  const b = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => blue(c)),
+    CLAMP
+  );
+  const a = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => alphaf(c)),
+    CLAMP
+  );
+  return rgbaColor(r, g, b, a);
+};
+
+export const interpolateColors = (
+  value: number,
+  inputRange: number[],
+  _outputRange: Color[]
+) => {
+  const outputRange = _outputRange.map((cl) => Skia.Color(cl));
+  return interpolateColorsRGB(value, inputRange, outputRange);
+};
+
+// This is fast. To be reconcilled with interpolateColors
+// it looks like interpolateColors may not be working as expected
+// these functions need to be tested more thoroughly on both platform
+export const mixColors = (value: number, x: number, y: number) => {
+  const r = mix(value, red(x), red(y));
+  const g = mix(value, green(x), green(y));
+  const b = mix(value, blue(x), blue(y));
+  const a = mix(value, alphaf(x), alphaf(y));
+  return rgbaColor(r, g, b, a);
+};

package/src/values/animation/index.ts

@@ -0,0 +1,4 @@
+export * from "./timing";
+export * from "./spring";
+export * from "./decay";
+export * from "./functions";

package/src/values/animation/spring/Spring.ts

@@ -0,0 +1,61 @@
+import type { SpringConfig } from "./types";
+
+/*
+  Spring animation configurations
+*/
+const Config = {
+  Gentle: {
+    mass: 1,
+    stiffness: 170,
+    damping: 19,
+    velocity: 0,
+  },
+  Wobbly: {
+    mass: 1,
+    stiffness: 180,
+    damping: 12,
+    velocity: 0,
+  },
+  WobblySlow: {
+    mass: 4,
+    stiffness: 180,
+    damping: 25,
+    velocity: 0,
+  },
+  Stiff: {
+    mass: 1,
+    stiffness: 200,
+    damping: 20,
+    velocity: 0,
+  },
+  Default: {
+    mass: 1,
+    stiffness: 100,
+    damping: 10,
+    velocity: 0,
+  },
+};
+
+export const Spring = {
+  Config,
+  Gentle: (config: SpringConfig = {}) => ({
+    ...Config.Gentle,
+    ...config,
+  }),
+  Wobbly: (config: SpringConfig = {}) => ({
+    ...Config.Wobbly,
+    ...config,
+  }),
+  WobblySlow: (config: SpringConfig = {}) => ({
+    ...Config.WobblySlow,
+    ...config,
+  }),
+  Stiff: (config: SpringConfig = {}) => ({
+    ...Config.Stiff,
+    ...config,
+  }),
+  Default: (config: SpringConfig = {}) => ({
+    ...Config.Default,
+    ...config,
+  }),
+};

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

@@ -0,0 +1 @@
+export { createSpringEasing } from "./spring";

package/src/values/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/values/animation/spring/index.ts

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

package/src/values/animation/spring/runSpring.ts

@@ -0,0 +1,37 @@
+import type { SkiaValue, SkiaAnimation } from "../../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: SkiaValue<number>,
+  toOrParams: number | AnimationParams,
+  config?: SpringConfig,
+  callback?: AnimationCallback
+): SkiaAnimation => {
+  return runTiming(
+    value,
+    toOrParams,
+    createSpringEasing(config ?? Spring.Config.Default),
+    callback
+  );
+};

package/src/values/animation/spring/types.ts

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

package/src/values/animation/spring/useSpring.ts

@@ -0,0 +1,28 @@
+import type { SkiaReadonlyValue } from "../../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
+): SkiaReadonlyValue<number> =>
+  useTiming(
+    toOrParams,
+    createSpringEasing(config ?? Spring.Config.Default),
+    callback
+  );

package/src/values/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/values/animation/timing/createTiming.ts

@@ -0,0 +1,62 @@
+import type {
+  TimingConfig,
+  RequiredAnimationParams,
+  AnimationCallback,
+} from "../types";
+import type { AnimationState, SkiaValue } from "../../types";
+import { ValueApi } from "../../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?: SkiaValue<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);
+};