Animation Functions

/**
 * Creates a timing-based animation with duration and easing
 * @param toValue - Target value to animate to
 * @param config - Animation configuration options
 * @param callback - Optional callback when animation completes
 * @returns Animation object for use with shared values
 */
function withTiming<T extends AnimatableValue>(
  toValue: T,
  config?: WithTimingConfig,
  callback?: AnimationCallback
): T;

interface WithTimingConfig {
  /** Animation duration in milliseconds (default: 300) */
  duration?: number;
  /** Easing function for animation curve (default: Easing.inOut(Easing.quad)) */
  easing?: EasingFunction;
  /** Reduce motion behavior for accessibility */
  reduceMotion?: ReduceMotion;
}

import { useSharedValue, withTiming, Easing } from "react-native-reanimated";

const MyComponent = () => {
  const opacity = useSharedValue(0);
  const position = useSharedValue({ x: 0, y: 0 });

  // Basic timing animation
  const fadeIn = () => {
    opacity.value = withTiming(1, { duration: 500 });
  };

  // Custom easing and callback
  const slideUp = () => {
    position.value = withTiming(
      { x: 0, y: -100 },
      {
        duration: 800,
        easing: Easing.out(Easing.exp),
      },
      (finished) => {
        if (finished) {
          console.log("Animation completed");
        }
      }
    );
  };

  // Accessibility-aware animation
  const respectMotionPreference = () => {
    opacity.value = withTiming(1, {
      duration: 300,
      reduceMotion: ReduceMotion.System, // Respects system settings
    });
  };

  return <Animated.View style={animatedStyle} />;
};

/**
 * Creates a spring-based animation with physics simulation
 * @param toValue - Target value to animate to
 * @param config - Spring configuration options
 * @param callback - Optional callback when animation completes
 * @returns Animation object for use with shared values
 */
function withSpring<T extends AnimatableValue>(
  toValue: T,
  config?: WithSpringConfig,
  callback?: AnimationCallback
): T;

interface WithSpringConfig {
  /** Spring damping factor (default: 10) */
  damping?: number;
  /** Spring mass (default: 1) */
  mass?: number;
  /** Spring stiffness (default: 100) */
  stiffness?: number;
  /** Prevent spring overshoot (default: false) */
  overshootClamping?: boolean;
  /** Rest displacement threshold (default: 0.01) */
  restDisplacementThreshold?: number;
  /** Rest speed threshold (default: 2) */
  restSpeedThreshold?: number;
  /** Initial velocity */
  velocity?: number | { x: number; y: number };
  /** Reduce motion behavior for accessibility */
  reduceMotion?: ReduceMotion;
}

/** Gentle, soft spring animation */
const GentleSpringConfig: WithSpringConfig;
/** Gentle spring with specific duration */
const GentleSpringConfigWithDuration: WithSpringConfig;
/** Quick, snappy spring animation */
const SnappySpringConfig: WithSpringConfig;
/** Snappy spring with specific duration */
const SnappySpringConfigWithDuration: WithSpringConfig;
/** Bouncy, wiggly spring animation */
const WigglySpringConfig: WithSpringConfig;
/** Wiggly spring with specific duration */
const WigglySpringConfigWithDuration: WithSpringConfig;
/** Default Reanimated 3 spring configuration */
const Reanimated3DefaultSpringConfig: WithSpringConfig;
/** Default Reanimated 3 spring with duration */
const Reanimated3DefaultSpringConfigWithDuration: WithSpringConfig;

import { 
  useSharedValue, 
  withSpring, 
  GentleSpringConfig,
  SnappySpringConfig 
} from "react-native-reanimated";

const MyComponent = () => {
  const scale = useSharedValue(1);
  const rotation = useSharedValue(0);

  // Basic spring animation
  const bounce = () => {
    scale.value = withSpring(1.5);
  };

  // Custom spring configuration
  const customSpring = () => {
    rotation.value = withSpring(180, {
      damping: 15,
      stiffness: 150,
      mass: 1.5,
    });
  };

  // Using predefined configurations
  const gentleBounce = () => {
    scale.value = withSpring(1.2, GentleSpringConfig);
  };

  const snappyAnimation = () => {
    scale.value = withSpring(0.8, SnappySpringConfig, (finished) => {
      if (finished) {
        scale.value = withSpring(1, GentleSpringConfig);
      }
    });
  };

  // Spring with initial velocity
  const flingAnimation = () => {
    rotation.value = withSpring(360, {
      velocity: 1000, // High initial velocity
      damping: 20,
    });
  };

  return <Animated.View style={animatedStyle} />;
};

/**
 * Creates a decay animation that slows down over time with friction
 * @param config - Decay configuration with velocity and deceleration
 * @param callback - Optional callback when animation completes
 * @returns Animation object for position values
 */
function withDecay(
  config: WithDecayConfig,
  callback?: AnimationCallback
): number;

interface WithDecayConfig {
  /** Deceleration rate (default: 0.998) */
  deceleration?: number;
  /** Initial velocity for the decay */
  velocity?: number;
  /** Optional bounds to clamp the final value */
  clamp?: readonly [number, number];
  /** Velocity multiplier factor (default: 1) */
  velocityFactor?: number;
  /** Rubber band effect when hitting bounds (default: 0) */
  rubberBandFactor?: number;
}

import { useSharedValue, withDecay } from "react-native-reanimated";

const MyComponent = () => {
  const translateX = useSharedValue(0);
  const scrollY = useSharedValue(0);

  // Basic decay animation
  const flingHorizontal = (velocity: number) => {
    translateX.value = withDecay({
      velocity: velocity,
      deceleration: 0.995,
    });
  };

  // Decay with bounds
  const boundedScroll = (velocity: number) => {
    scrollY.value = withDecay({
      velocity: velocity,
      clamp: [0, 1000], // Limit scroll between 0 and 1000
      deceleration: 0.998,
    });
  };

  // Decay with rubber band effect
  const rubberBandDecay = (velocity: number) => {
    translateX.value = withDecay({
      velocity: velocity,
      clamp: [-200, 200],
      rubberBandFactor: 0.7, // Bounce back effect
    });
  };

  return <Animated.View style={animatedStyle} />;
};

/**
 * Adds a delay before starting an animation
 * @param delayMs - Delay in milliseconds
 * @param delayedAnimation - Animation to execute after delay
 * @returns Modified animation with delay
 */
function withDelay<T>(delayMs: number, delayedAnimation: T): T;

/**
 * Repeats an animation multiple times
 * @param animation - Animation to repeat
 * @param numberOfReps - Number of repetitions (-1 for infinite)
 * @param reverse - Whether to reverse direction on each repeat
 * @param callback - Optional callback when all repetitions complete
 * @returns Repeated animation
 */
function withRepeat<T>(
  animation: T,
  numberOfReps?: number,
  reverse?: boolean,
  callback?: AnimationCallback
): T;

/**
 * Executes animations in sequence
 * @param animations - Animations to execute in order
 * @returns Sequential animation
 */
function withSequence<T>(...animations: T[]): T;

/**
 * Clamps animation values within specified bounds
 * @param animation - Animation to clamp
 * @param min - Minimum allowed value
 * @param max - Maximum allowed value
 * @returns Clamped animation
 */
function withClamp<T>(animation: T, min: number, max: number): T;

import { 
  useSharedValue, 
  withTiming, 
  withSpring,
  withDelay, 
  withRepeat, 
  withSequence,
  withClamp 
} from "react-native-reanimated";

const MyComponent = () => {
  const opacity = useSharedValue(1);
  const scale = useSharedValue(1);
  const rotation = useSharedValue(0);

  // Delayed animation
  const fadeInWithDelay = () => {
    opacity.value = withDelay(500, withTiming(1, { duration: 300 }));
  };

  // Repeating animation
  const pulse = () => {
    scale.value = withRepeat(
      withTiming(1.2, { duration: 500 }),
      -1, // Infinite repetitions
      true // Reverse direction
    );
  };

  // Sequential animations
  const complexSequence = () => {
    opacity.value = withSequence(
      withTiming(0, { duration: 200 }),
      withDelay(300, withTiming(0.5, { duration: 200 })),
      withTiming(1, { duration: 200 })
    );
  };

  // Clamped animation
  const boundedRotation = () => {
    rotation.value = withClamp(
      withSpring(360),
      0,   // Min rotation
      180  // Max rotation
    );
  };

  // Complex combination
  const showWithFlourish = () => {
    // Fade in with delay
    opacity.value = withDelay(200, withTiming(1));
    
    // Scale up, then settle
    scale.value = withSequence(
      withSpring(1.3, SnappySpringConfig),
      withSpring(1, GentleSpringConfig)
    );
    
    // Rotate with repeating wiggle
    rotation.value = withRepeat(
      withSequence(
        withTiming(5, { duration: 100 }),
        withTiming(-5, { duration: 100 }),
        withTiming(0, { duration: 100 })
      ),
      3, // 3 times
      false
    );
  };

  return <Animated.View style={animatedStyle} />;
};

/**
 * Cancels any running animation on a shared value
 * @param sharedValue - SharedValue to cancel animations on
 */
function cancelAnimation(sharedValue: SharedValue<any>): void;

/**
 * Defines a custom animation with factory function
 * @param starting - Starting configuration or value
 * @param factory - Function that creates the animation
 * @returns Custom animation object
 */
function defineAnimation<T>(starting: any, factory: () => T): T;

import { useSharedValue, withTiming, cancelAnimation } from "react-native-reanimated";

const MyComponent = () => {
  const progress = useSharedValue(0);

  const startLongAnimation = () => {
    progress.value = withTiming(1, { duration: 5000 });
  };

  const stopAnimation = () => {
    cancelAnimation(progress);
  };

  // Custom animation example
  const customBounce = defineAnimation(0, () => {
    'worklet';
    return (targetValue: number) => {
      'worklet';
      return {
        animation: (timestamp: number, current: number) => {
          // Custom animation logic
          const progress = Math.min((timestamp - startTime) / 1000, 1);
          const bounceValue = Math.sin(progress * Math.PI * 3) * (1 - progress);
          return current + (targetValue - current) * progress + bounceValue * 50;
        },
        finished: false,
      };
    };
  });

  return (
    <View>
      <Button title="Start Animation" onPress={startLongAnimation} />
      <Button title="Stop Animation" onPress={stopAnimation} />
    </View>
  );
};

type AnimatableValue = number | string | number[];

interface AnimationCallback {
  (finished?: boolean, current?: AnimatableValue): void;
}

interface AnimationObject {
  __reanimatedWorklet?: boolean;
  callback?: AnimationCallback;
  current?: AnimatableValue;
  finished?: boolean;
  cancelled?: boolean;
  reduceMotion?: ReduceMotion;
}

enum ReduceMotion {
  System = "system",
  Always = "always", 
  Never = "never"
}

type EasingFunction = (value: number) => number;

interface EasingFunctionFactory {
  factory: () => EasingFunction;
}

type TimingAnimation = AnimationObject & {
  type: "timing";
  toValue: AnimatableValue;
  startTime: number;
  config: WithTimingConfig;
};

type SpringAnimation = AnimationObject & {
  type: "spring";
  toValue: AnimatableValue;
  startTime: number;
  config: WithSpringConfig;
};

type DecayAnimation = AnimationObject & {
  type: "decay";
  config: WithDecayConfig;
  velocity: number;
};

type DelayAnimation = AnimationObject & {
  type: "delay";
  delayMs: number;
  animation: AnimationObject;
};

type RepeatAnimation = AnimationObject & {
  type: "repeat";
  animation: AnimationObject;
  numberOfReps: number;
  reverse: boolean;
};

type SequenceAnimation = AnimationObject & {
  type: "sequence";
  animations: AnimationObject[];
};