react-ui-animate 3.0.0-rc.0 → 3.0.0-rc.1

package/example/src/components/Wheel.tsx

@@ -1,39 +0,0 @@
-import { useWheel } from 'react-ui-animate';
-
-export const Wheel = () => {
-  const bind = useWheel(function (event) {
-    console.log('WHEEL', event);
-  });
-
-  return (
-    <>
-      <div
-        {...bind()}
-        style={{
-          width: 500,
-          height: 500,
-          overflowY: 'auto',
-          backgroundColor: '#3399ff',
-        }}
-      >
-        <div style={{ height: 2000 }} />
-      </div>
-
-      <div style={{ height: 2000 }} />
-
-      {Array(5)
-        .fill(null)
-        .map((_, i) => (
-          <div
-            key={i}
-            style={{
-              width: 100,
-              height: 100,
-              backgroundColor: '#3399ff',
-              marginBottom: 10,
-            }}
-          />
-        ))}
-    </>
-  );
-};

package/example/src/components/index.ts

@@ -1,18 +0,0 @@
-export * from './Draggable';
-export * from './Gestures';
-export * from './MountedBlock';
-export * from './ScrollableBlock';
-export * from './svgLine';
-export * from './useAnimatedValue';
-export * from './useMountedValue';
-export * from './MouseMove';
-export * from './Scroll';
-export * from './Wheel';
-export * from './Gestures';
-export * from './Interpolation';
-export * from './MultistageTransition';
-export * from './Loop';
-export * from './SnapTo';
-export * from './TransitionBlock';
-export * from './useAnimatedValue';
-export * from './useMountedValue';

package/example/src/components/svgLine.tsx

@@ -1,48 +0,0 @@
-import {
-  useAnimatedValue,
-  useDrag,
-  AnimationConfigUtils,
-  fluid,
-} from 'react-ui-animate';
-
-export function SVGLine() {
-  const dragX = useAnimatedValue(0, { immediate: true });
-  const followX = useAnimatedValue(0, { ...AnimationConfigUtils.ELASTIC });
-
-  const circleBind = useDrag(({ movementX }) => {
-    dragX.value = movementX;
-    followX.value = movementX;
-  });
-
-  return (
-    <div className='App'>
-      <svg
-        style={{
-          border: '1px solid #3399ff',
-        }}
-        width={200}
-        height={200}
-        xmlns='http://www.w3.org/2000/svg'
-      >
-        <fluid.line
-          x1={followX.value}
-          y1='10'
-          x2={dragX.value}
-          y2='50'
-          stroke='black'
-        />
-        <fluid.circle cx={followX.value} cy='10' r='2' fill='red' />
-        <fluid.circle
-          {...circleBind()}
-          style={{
-            cursor: 'pointer',
-          }}
-          cx={dragX.value}
-          cy='50'
-          r='5'
-          fill='red'
-        />
-      </svg>
-    </div>
-  );
-}

package/example/src/components/useAnimatedValue.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { useAnimatedValue, AnimatedBlock } from 'react-ui-animate';
-
-export const UseAnimatedValue: React.FC = () => {
-  // const width = useAnimatedValue(100);
-  const bg = useAnimatedValue('position');
-
-  return (
-    <>
-      <AnimatedBlock
-        a={bg.value}
-        style={{
-          width: 100,
-          height: 100,
-          backgroundColor: 'red',
-          position: bg.value,
-          left: 0,
-          top: 0,
-        }}
-      />
-      <button onClick={() => (bg.value = 'absolute')}>Animate</button>
-      {/* <button onClick={() => (bg.value = '#00ff00')}>Green</button> */}
-
-      {/* <div style={{ perspective: 200 }}>
-        <AnimatedBlock
-          style={{
-            perspective: 400,
-            width: width.value,
-            height: 100,
-            backgroundColor: interpolate(
-              width.value,
-              [100, 500],
-              ['#3399ff', 'red']
-            ),
-            translateX: interpolate(width.value, [100, 500], [0, 200]),
-            rotateX: interpolate(width.value, [100, 500], [0, 45]),
-          }}
-        />
-      </div>
-
-      <button
-        onClick={() => {
-          width.value = 100;
-        }}
-      >
-        LEFT
-      </button>
-      <button
-        onClick={() => {
-          width.value = 500;
-        }}
-      >
-        RIGHT
-      </button> */}
-    </>
-  );
-};

package/example/src/components/useMountedValue.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import {
-  useMountedValue,
-  AnimatedBlock,
-  bInterpolate,
-  useAnimatedValue,
-} from 'react-ui-animate';
-
-export const UseMountedValue: React.FC = () => {
-  const x = useAnimatedValue(0);
-  const [open, setOpen] = React.useState(true);
-  const mountedValue = useMountedValue(open, {
-    from: 0,
-    enter: 1,
-    exit: 0,
-    config: {
-      duration: 200,
-    },
-    enterConfig: { duration: 2000 },
-  });
-
-  return (
-    <>
-      <AnimatedBlock
-        radius={x.value}
-        style={{
-          width: 100,
-          height: 100,
-          backgroundColor: '#3399ff',
-          translateX: 100,
-          rotate: x.value,
-        }}
-        onClick={() => (x.value = 45)}
-      />
-      {mountedValue(
-        (animation, mounted) =>
-          mounted && (
-            <AnimatedBlock
-              style={{
-                width: bInterpolate(animation.value, 100, 500),
-                height: 100,
-                backgroundColor: bInterpolate(
-                  animation.value,
-                  'red',
-                  '#3399ff'
-                ),
-                translateX: 45,
-              }}
-            />
-          )
-      )}
-
-      <button
-        onClick={() => {
-          setOpen((prev) => !prev);
-        }}
-      >
-        ANIMATE ME
-      </button>
-    </>
-  );
-};

package/example/src/index.css

@@ -1,8 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-}

package/example/src/index.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-
-import './index.css';
-
-import App from './App';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

package/example/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "lib": [
-      "dom",
-      "es2015"
-    ],
-    "downlevelIteration": true,
-    "jsx": "react-jsx",
-    "target": "es5",
-    "allowJs": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "allowSyntheticDefaultImports": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": [
-    "src"
-  ]
-}

package/rollup.config.mjs

@@ -1,18 +0,0 @@
-import typescript from "rollup-plugin-typescript2";
-
-import pkg from "./package.json" assert { type: "json" };
-
-export default {
-  input: "src/index.ts",
-  output: [
-    {
-      file: pkg.main,
-      format: "cjs",
-      exports: "named",
-      sourcemap: true,
-      strict: false,
-    },
-  ],
-  plugins: [typescript()],
-  external: ["react", "react-dom"],
-};

package/src/animation/core/controllers/Animation.ts

@@ -1,27 +0,0 @@
-import type { ResultType } from '../types/animation';
-
-/**
- * Base Animation class
- */
-export class Animation {
-  _active: boolean;
-  _onEnd: any;
-  /**
-   * it is necessary to add _onRest function as well
-   * because _onEnd is always re-assigned with onUpdate callback
-   * so that _onRest function is not fired, so we have to duplicate it
-   */
-  _onRest?: any;
-
-  _debounceOnEnd(result: ResultType) {
-    const onEnd = this._onEnd;
-    const onRest = this._onRest;
-    this._onEnd = null;
-    this._onRest = null;
-
-    onRest && onRest(result);
-    onEnd && onEnd(result);
-  }
-
-  stop() {}
-}

package/src/animation/core/controllers/FluidValue.ts

@@ -1,97 +0,0 @@
-import type {
-  Length,
-  ResultType,
-  SubscribeFn,
-  FluidValueConfig,
-  OnUpdateFn,
-  AssignValue,
-} from '../types/animation';
-import type { Fn } from '../types/common';
-
-/**
- * Represents a fluid value that can animate between states.
- */
-export class FluidValue {
-  public _subscribe: SubscribeFn;
-  public _value: Length;
-  public _config?: FluidValueConfig;
-  public _currentValue: { current: Length };
-  public _subscriptions: Map<{ uuid: number; property: string }, OnUpdateFn>;
-
-  public get: () => Length;
-
-  /**
-   * Creates a new FluidValue instance.
-   * @param initialValue - The initial value of the fluid value.
-   * @param config - Optional configuration for the fluid value.
-   */
-  constructor(initialValue: Length, config?: FluidValueConfig) {
-    this._subscriptions = new Map();
-    this._subscribe = (
-      onUpdate: OnUpdateFn,
-      property: string,
-      uuid: number
-    ) => {
-      for (const key of this._subscriptions.keys()) {
-        if (key.property === property) {
-          this._subscriptions.set(key, onUpdate);
-          return () => this._subscriptions.delete(key);
-        }
-      }
-
-      this._subscriptions.set({ uuid, property }, onUpdate);
-      return () => this._subscriptions.delete({ uuid, property });
-    };
-    this._value = initialValue;
-    this._currentValue = { current: initialValue };
-    this._config = config;
-    this.get = () => this._currentValue.current;
-  }
-
-  /**
-   * Animates from the current value to the updated value.
-   * Determines whether to perform a multi-stage or single-stage transition.
-   * @param updatedValue - The value to animate to, or a function that defines a multi-stage transition.
-   * @param config - Optional configuration for the animation.
-   * @param callback - Optional callback to be called after the animation ends.
-   */
-  setValue(
-    updatedValue: AssignValue,
-    config?: FluidValueConfig,
-    callback?: Fn<ResultType, void>
-  ) {
-    /** Multistage transition */
-    if (typeof updatedValue === 'function') {
-      updatedValue((nextValue, nextConfig) => {
-        const multiStagePromise = new Promise((resolve) => {
-          for (const subscriptionKey of this._subscriptions.keys()) {
-            const updater = this._subscriptions.get(subscriptionKey);
-
-            if (updater) {
-              updater(nextValue, nextConfig ?? config, function (result) {
-                if (result.finished) {
-                  resolve(nextValue);
-                }
-
-                if (callback) {
-                  callback(result);
-                }
-              });
-            }
-          }
-        });
-
-        return multiStagePromise;
-      });
-
-      return;
-    }
-
-    /** Singlestage transition */
-    for (const subscriptionKey of this._subscriptions.keys()) {
-      const updater = this._subscriptions.get(subscriptionKey);
-
-      updater && updater(updatedValue, config, callback);
-    }
-  }
-}

package/src/animation/core/controllers/RequestAnimationFrame.ts

@@ -1,13 +0,0 @@
-export const RequestAnimationFrame = {
-  current: (cb: any) => window.requestAnimationFrame(cb),
-  inject(injected: any) {
-    RequestAnimationFrame.current = injected;
-  },
-};
-
-export const CancelAnimationFrame = {
-  current: (id: any) => window.cancelAnimationFrame(id),
-  inject(injected: any) {
-    CancelAnimationFrame.current = injected;
-  },
-};

package/src/animation/core/controllers/SpringAnimation.ts

@@ -1,218 +0,0 @@
-import { Animation } from './Animation';
-import {
-  RequestAnimationFrame,
-  CancelAnimationFrame,
-} from './RequestAnimationFrame';
-
-import type { FluidValueConfig, ResultType } from '../types/animation';
-
-/**
- * Class implementing spring based animation
- */
-export class SpringAnimation extends Animation {
-  _overshootClamping: boolean;
-  _restDisplacementThreshold: number;
-  _restSpeedThreshold: number;
-  _initialVelocity?: number;
-  _lastVelocity: number;
-  _startPosition: number;
-  _lastPosition: number;
-  _position: number;
-  _fromValue: number;
-  _toValue: any;
-  _mass: number;
-  _tension: number;
-  _friction: number;
-  _lastTime: number;
-  _onFrame: (value: number) => void;
-  _animationFrame: any;
-  _timeout: any;
-
-  // Modifiers
-  _delay: number;
-  _onRest?: (value: ResultType) => void;
-  _onChange?: (value: number) => void;
-
-  constructor({
-    initialPosition,
-    config,
-  }: {
-    initialPosition: number;
-    config?: Omit<FluidValueConfig, 'duration' | 'easing'>;
-  }) {
-    super();
-
-    this._overshootClamping = false;
-    this._initialVelocity = 0;
-    this._lastVelocity = 0;
-    this._startPosition = initialPosition;
-    this._position = this._startPosition;
-
-    this._restDisplacementThreshold = config?.restDistance ?? 0.001;
-    this._restSpeedThreshold = config?.restDistance ?? 0.001;
-    this._mass = config?.mass ?? 1;
-    this._tension = config?.tension ?? 170;
-    this._friction = config?.friction ?? 26;
-    this._delay = config?.delay ?? 0;
-
-    this._onRest = config?.onRest;
-    this._onChange = config?.onChange;
-  }
-
-  onChange(value: number) {
-    this._onFrame(value);
-
-    if (this._lastPosition !== value) {
-      if (this._onChange) {
-        this._onChange(value);
-      }
-    }
-
-    this._lastPosition = value;
-  }
-
-  onUpdate() {
-    var now = Date.now();
-
-    const deltaTime = Math.min(now - this._lastTime, 64);
-    this._lastTime = now;
-
-    const c = this._friction;
-    const m = this._mass;
-    const k = this._tension;
-
-    const v0 = -this._lastVelocity;
-    const x0 = this._toValue - this._position;
-
-    const zeta = c / (2 * Math.sqrt(k * m)); // damping ratio
-    const omega0 = Math.sqrt(k / m); // undamped angular frequency of the oscillator (rad/ms)
-    const omega1 = omega0 * Math.sqrt(1 - zeta ** 2); // exponential decay
-
-    const t = deltaTime / 1000;
-
-    const sin1 = Math.sin(omega1 * t);
-    const cos1 = Math.cos(omega1 * t);
-
-    // under damped
-    const underDampedEnvelope = Math.exp(-zeta * omega0 * t);
-    const underDampedFrag1 =
-      underDampedEnvelope *
-      (sin1 * ((v0 + zeta * omega0 * x0) / omega1) + x0 * cos1);
-
-    const underDampedPosition = this._toValue - underDampedFrag1;
-    // This looks crazy -- it's actually just the derivative of the oscillation function
-    const underDampedVelocity =
-      zeta * omega0 * underDampedFrag1 -
-      underDampedEnvelope *
-        (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
-
-    // critically damped
-    const criticallyDampedEnvelope = Math.exp(-omega0 * t);
-    const criticallyDampedPosition =
-      this._toValue - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
-
-    const criticallyDampedVelocity =
-      criticallyDampedEnvelope *
-      (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
-
-    this.onChange(this._position);
-
-    const isOvershooting = () => {
-      if (this._overshootClamping && this._tension !== 0) {
-        return this._position < this._toValue
-          ? this._position > this._toValue
-          : this._position < this._toValue;
-      } else {
-        return false;
-      }
-    };
-
-    const isVelocity = Math.abs(this._lastVelocity) < this._restSpeedThreshold;
-    const isDisplacement =
-      this._tension === 0 ||
-      Math.abs(this._toValue - this._position) <
-        this._restDisplacementThreshold;
-
-    if (zeta < 1) {
-      this._position = underDampedPosition;
-      this._lastVelocity = underDampedVelocity;
-    } else {
-      this._position = criticallyDampedPosition;
-      this._lastVelocity = criticallyDampedVelocity;
-    }
-
-    if (isOvershooting() || (isVelocity && isDisplacement)) {
-      if (this._tension !== 0) {
-        this._lastVelocity = 0;
-        this._position = this._toValue;
-
-        this.onChange(this._position);
-      }
-      // clear lastTimestamp to avoid using stale value by the next spring animation that starts after this one
-      this._lastTime = 0;
-
-      this._debounceOnEnd({ finished: true, value: this._toValue });
-
-      return;
-    }
-
-    this._animationFrame = RequestAnimationFrame.current(
-      this.onUpdate.bind(this)
-    );
-  }
-
-  stop() {
-    this._active = false;
-    clearTimeout(this._timeout);
-    CancelAnimationFrame.current(this._animationFrame);
-    this._debounceOnEnd({ finished: false, value: this._position });
-  }
-
-  // Set value
-  set(toValue: number) {
-    this.stop();
-    this._position = toValue;
-    this._lastTime = 0;
-    this._lastVelocity = 0;
-    this.onChange(toValue);
-  }
-
-  start({
-    toValue,
-    onFrame,
-    previousAnimation,
-    onEnd,
-  }: {
-    toValue: number;
-    onFrame: (value: number) => void;
-    previousAnimation?: SpringAnimation;
-    onEnd?: (result: ResultType) => void;
-  }) {
-    const onStart: any = () => {
-      this._onFrame = onFrame;
-      this._active = true;
-      this._toValue = toValue;
-      this._onEnd = onEnd;
-
-      const now = Date.now();
-
-      if (previousAnimation instanceof SpringAnimation) {
-        this._lastVelocity =
-          previousAnimation._lastVelocity || this._lastVelocity || 0;
-        this._lastTime = previousAnimation._lastTime || now;
-      } else {
-        this._lastTime = now;
-      }
-
-      this._animationFrame = RequestAnimationFrame.current(
-        this.onUpdate.bind(this)
-      );
-    };
-
-    if (this._delay !== 0) {
-      this._timeout = setTimeout(() => onStart(), this._delay);
-    } else {
-      onStart();
-    }
-  }
-}