Easings

/**
 * Built-in easing functions namespace
 * All easings are EasingFunction: (time: number) => number
 * where time is normalized 0-1 input, returns eased 0-1 output
 */
namespace eases {
  // Linear
  export const linear: EasingFunction;
  export const none: EasingFunction; // Alias for linear

  // Power easings (with optional power parameter)
  export const in: PowerEasing; // in(2) for quad, in(3) for cubic, etc.
  export const out: PowerEasing;
  export const inOut: PowerEasing;
  export const outIn: PowerEasing;

  // Quadratic easings
  export const inQuad: EasingFunction;
  export const outQuad: EasingFunction;
  export const inOutQuad: EasingFunction;
  export const outInQuad: EasingFunction;

  // Cubic easings
  export const inCubic: EasingFunction;
  export const outCubic: EasingFunction;
  export const inOutCubic: EasingFunction;
  export const outInCubic: EasingFunction;

  // Quartic easings
  export const inQuart: EasingFunction;
  export const outQuart: EasingFunction;
  export const inOutQuart: EasingFunction;
  export const outInQuart: EasingFunction;

  // Quintic easings
  export const inQuint: EasingFunction;
  export const outQuint: EasingFunction;
  export const inOutQuint: EasingFunction;
  export const outInQuint: EasingFunction;

  // Sinusoidal easings
  export const inSine: EasingFunction;
  export const outSine: EasingFunction;
  export const inOutSine: EasingFunction;
  export const outInSine: EasingFunction;

  // Circular easings
  export const inCirc: EasingFunction;
  export const outCirc: EasingFunction;
  export const inOutCirc: EasingFunction;
  export const outInCirc: EasingFunction;

  // Exponential easings
  export const inExpo: EasingFunction;
  export const outExpo: EasingFunction;
  export const inOutExpo: EasingFunction;
  export const outInExpo: EasingFunction;

  // Bounce easings
  export const inBounce: EasingFunction;
  export const outBounce: EasingFunction;
  export const inOutBounce: EasingFunction;
  export const outInBounce: EasingFunction;

  // Back easings (with optional overshoot parameter)
  export const inBack: BackEasing; // inBack(1.70158) default
  export const outBack: BackEasing;
  export const inOutBack: BackEasing;
  export const outInBack: BackEasing;

  // Elastic easings (with optional amplitude and period)
  export const inElastic: ElasticEasing; // inElastic(1, 0.3)
  export const outElastic: ElasticEasing;
  export const inOutElastic: ElasticEasing;
  export const outInElastic: ElasticEasing;
}

import { animate, eases } from "animejs";

// Use built-in easing by name (string)
animate(".box", {
  translateX: 250,
  ease: "outQuad",
});

// Use easing function directly
animate(".box", {
  translateX: 250,
  ease: eases.outBounce,
});

// Parameterized power easing
animate(".box", {
  translateX: 250,
  ease: eases.in(3), // Cubic in
});

// Parameterized back easing with custom overshoot
animate(".box", {
  translateX: 250,
  ease: eases.outBack(2.5), // More overshoot
});

// Parameterized elastic easing
animate(".box", {
  translateX: 250,
  ease: eases.outElastic(1, 0.5), // Custom amplitude and period
});

// Simple easing name
animate(".box", { x: 100, ease: "outQuad" });

// Parameterized easings as strings
animate(".box", { x: 100, ease: "in(3)" }); // Power 3
animate(".box", { x: 100, ease: "outBack(2)" }); // Overshoot 2
animate(".box", { x: 100, ease: "outElastic(1, 0.4)" }); // Amplitude 1, period 0.4

/**
 * Parse easing string to easing function
 * @param string - Easing name with optional parameters: "outQuad", "in(3)", "outBack(2)"
 * @returns EasingFunction
 */
function parseEaseString(string: string): EasingFunction;

/**
 * Parse easing parameter to easing function
 * Handles strings, functions, Spring instances, arrays
 * @param ease - Easing parameter of any valid type
 * @returns EasingFunction
 */
function parseEase(ease: EasingParam): EasingFunction;

/**
 * Create cubic bezier easing function
 * @param mX1 - X coordinate of first control point (0-1)
 * @param mY1 - Y coordinate of first control point
 * @param mX2 - X coordinate of second control point (0-1)
 * @param mY2 - Y coordinate of second control point
 * @returns EasingFunction
 */
function cubicBezier(
  mX1: number,
  mY1: number,
  mX2: number,
  mY2: number
): EasingFunction;

import { animate, cubicBezier } from "animejs";

// CSS cubic-bezier equivalent
const easeInOut = cubicBezier(0.42, 0, 0.58, 1);

animate(".box", {
  translateX: 250,
  ease: easeInOut,
});

// Custom bounce curve
const customBounce = cubicBezier(0.68, -0.55, 0.265, 1.55);

animate(".box", {
  scale: [0, 1],
  ease: customBounce,
});

// Common CSS easings
const ease = cubicBezier(0.25, 0.1, 0.25, 1);
const easeIn = cubicBezier(0.42, 0, 1, 1);
const easeOut = cubicBezier(0, 0, 0.58, 1);
const easeInOut = cubicBezier(0.42, 0, 0.58, 1);

/**
 * Create stepped easing function
 * @param steps - Number of steps (default: 10)
 * @param fromStart - Start from first step (default: false, starts from 0)
 * @returns EasingFunction
 */
function steps(steps?: number, fromStart?: boolean): EasingFunction;

import { animate, steps } from "animejs";

// 5-step animation
animate(".box", {
  translateX: 250,
  ease: steps(5),
});

// Start from first step
animate(".sprite", {
  backgroundPositionX: "-500px",
  ease: steps(10, true), // Jump immediately to first step
});

// Frame-by-frame animation
animate(".sprite", {
  backgroundPositionX: [0, -640],
  ease: steps(8), // 8 frames
  duration: 800,
  loop: true,
});

/**
 * Create linear easing with control points
 * Similar to CSS linear() function
 * @param args - Variable number of control points (numbers or percentage strings)
 * @returns EasingFunction
 */
function linear(...args: (number | string)[]): EasingFunction;

import { animate, linear } from "animejs";

// Linear easing with waypoints
const customLinear = linear(0, 0.25, 0.75, 1);

animate(".box", {
  translateX: 250,
  ease: customLinear,
});

// With percentage positions
const complexLinear = linear("0% 0", "25% 0.5", "75% 0.8", "100% 1");

/**
 * Create irregular easing with random variations
 * @param length - Number of control points (default: 10)
 * @param randomness - Amount of randomness 0-1 (default: 1)
 * @returns EasingFunction
 */
function irregular(length?: number, randomness?: number): EasingFunction;

import { animate, irregular } from "animejs";

// Shaky, irregular motion
animate(".box", {
  translateX: 250,
  ease: irregular(20, 0.8), // 20 points, 80% randomness
});

// Subtle irregularity
animate(".box", {
  opacity: [0, 1],
  ease: irregular(15, 0.3), // Slight variation
});

/**
 * Create spring physics easing
 * @param parameters - Spring configuration parameters
 * @returns Spring instance (also an EasingFunction)
 */
function spring(parameters?: SpringParams): Spring;

/** Alias for spring() */
function createSpring(parameters?: SpringParams): Spring;

/**
 * Spring class for physics-based easing
 */
class Spring {
  /**
   * Spring mass (higher = slower, more inertia)
   * @default 1
   */
  mass: number;

  /**
   * Spring stiffness (higher = tighter, faster)
   * @default 100
   */
  stiffness: number;

  /**
   * Spring damping (higher = less oscillation)
   * @default 10
   */
  damping: number;

  /**
   * Initial velocity
   * @default 0
   */
  velocity: number;

  /**
   * Bounce amount (0 = no bounce, 1 = very bouncy)
   * Alternative to manual mass/stiffness/damping tuning
   */
  bounce: number;

  /**
   * Perceived animation duration
   * Automatically calculates mass/stiffness/damping
   */
  duration: number;

  /**
   * Easing function (time: number) => number
   * Use this in animations
   */
  ease: EasingFunction;

  /** Whether spring has settled */
  completed: boolean;

  /** Actual duration for spring to complete */
  solverDuration: number;

  /** Duration for spring to settle */
  settlingDuration: number;

  /** Parent animation that owns this spring */
  parent: JSAnimation;

  /** Callback when spring completes */
  onComplete: Callback<JSAnimation>;

  /**
   * Solve spring physics at specific time
   * @param time - Time in milliseconds
   * @returns Spring value at time
   */
  solve(time: number): number;
}

import { animate, spring } from "animejs";

// Simple spring with duration
animate(".box", {
  translateX: 250,
  ease: spring({ duration: 1000 }),
});

// Bouncy spring
animate(".box", {
  scale: [0, 1],
  ease: spring({
    mass: 1,
    stiffness: 200,
    damping: 10, // Low damping = more bounce
  }),
});

// Spring with bounce parameter (easier than tuning physics)
animate(".box", {
  translateY: [-100, 0],
  ease: spring({
    bounce: 0.6, // 0 = no bounce, 1 = very bouncy
  }),
});

// Spring with initial velocity
animate(".box", {
  translateX: 250,
  ease: spring({
    velocity: 5, // Initial velocity
    stiffness: 150,
    damping: 15,
  }),
});

// Reusable spring configuration
const bounceSpring = spring({
  mass: 2,
  stiffness: 100,
  damping: 8,
});

animate(".box1", { scale: 1.2, ease: bounceSpring });
animate(".box2", { scale: 1.2, ease: bounceSpring });

// Access spring properties
const mySpring = spring({ duration: 2000 });
console.log(mySpring.solverDuration); // Actual physics duration
console.log(mySpring.settlingDuration); // Time to settle
console.log(mySpring.completed); // Has settled?

// Mass: Controls inertia (higher = slower, heavier feel)
spring({ mass: 1 }); // Light
spring({ mass: 5 }); // Heavy

// Stiffness: Controls tightness (higher = snappier)
spring({ stiffness: 50 }); // Loose
spring({ stiffness: 300 }); // Tight

// Damping: Controls oscillation (higher = less bounce)
spring({ damping: 5 }); // Very bouncy
spring({ damping: 20 }); // Minimal bounce

// Bounce: Simple 0-1 parameter (alternative to manual tuning)
spring({ bounce: 0 }); // No bounce (critically damped)
spring({ bounce: 0.5 }); // Moderate bounce
spring({ bounce: 1 }); // Maximum bounce

// Duration: Auto-calculates mass/stiffness/damping
spring({ duration: 1000 }); // ~1 second animation

// Smooth, no bounce
const smooth = spring({
  mass: 1,
  stiffness: 100,
  damping: 20,
});

// Bouncy
const bouncy = spring({
  mass: 1,
  stiffness: 300,
  damping: 10,
});

// Wobbly
const wobbly = spring({
  mass: 1,
  stiffness: 180,
  damping: 12,
});

// Slow motion
const slow = spring({
  mass: 3,
  stiffness: 50,
  damping: 15,
});

// Or use bounce parameter
const easyBouncy = spring({ bounce: 0.4 });
const mediumBouncy = spring({ bounce: 0.6 });
const veryBouncy = spring({ bounce: 0.8 });

import {
  animate,
  eases,
  cubicBezier,
  steps,
  spring,
  irregular,
} from "animejs";

// Smooth acceleration/deceleration
animate(".smooth", { x: 100, ease: "outQuad" });

// Bounce at end
animate(".bounce", { x: 100, ease: eases.outBounce });

// Spring physics
animate(".spring", { x: 100, ease: spring({ bounce: 0.5 }) });

// Custom bezier curve
animate(".custom", { x: 100, ease: cubicBezier(0.68, -0.55, 0.265, 1.55) });

// Frame-by-frame
animate(".frames", { x: 100, ease: steps(8) });

// Irregular/shaky
animate(".shaky", { x: 100, ease: irregular(15, 0.6) });

// Different easings for different properties
animate(".box", {
  translateX: {
    value: 250,
    ease: "outQuad",
  },
  rotate: {
    value: 360,
    ease: spring({ bounce: 0.4 }),
  },
  scale: {
    value: 1.5,
    ease: eases.outElastic(1, 0.3),
  },
});

/**
 * Easing function type
 * Takes normalized time (0-1) and returns eased value
 */
type EasingFunction = (time: number) => number;

/**
 * Easing parameter - accepts multiple formats
 */
type EasingParam =
  | string // Name: "outQuad", "in(3)", "outBack(2)"
  | EasingFunction // Direct function
  | Spring // Spring instance
  | number[] // Array of values for linear interpolation
  | [number, number, number, number]; // Cubic bezier control points

/**
 * Power easing with optional power parameter
 */
interface PowerEasing {
  (power?: number): EasingFunction;
}

/**
 * Back easing with optional overshoot parameter
 */
interface BackEasing {
  (overshoot?: number): EasingFunction;
}

/**
 * Elastic easing with optional amplitude and period
 */
interface ElasticEasing {
  (amplitude?: number, period?: number): EasingFunction;
}

/**
 * Spring physics parameters
 */
interface SpringParams {
  /** Spring mass (default: 1) */
  mass?: number;

  /** Spring stiffness (default: 100) */
  stiffness?: number;

  /** Spring damping (default: 10) */
  damping?: number;

  /** Initial velocity (default: 0) */
  velocity?: number;

  /** Bounce amount 0-1, alternative to manual tuning */
  bounce?: number;

  /** Perceived duration, auto-calculates physics parameters */
  duration?: number;
}