Animation Types

Since 1.9.0

Types for animation systems and motion graphics.

Overview

Animation Types provides type-level animation utilities. It supports keyframe animations, easing functions, spring physics, skeletal animation, sprite animation, and animation state machines.

This module enables building type-safe animation applications with proper constraints for keyframes, timelines, and animation controllers.

Basic Usage

import type { Animation, Keyframe, EasingType, SpringConfig, Skeleton, AnimationClip } from 'uni-types'

// Define animation
type FadeAnimation = Animation<number>

// Define keyframe sequence
type PositionKeyframes = KeyframeSequence<Vector3>

// Define animation clip
type WalkClip = AnimationClip

Key Types

AnimationDuration

Animation duration (milliseconds).

type AnimationDuration = number

AnimationPlaybackState

Animation playback state.

type AnimationPlaybackState = 'idle' | 'running' | 'paused' | 'finished'

AnimationDirection

Animation direction.

type AnimationDirection =
  | 'normal'
  | 'reverse'
  | 'alternate'
  | 'alternate-reverse'

AnimationFillMode

Animation fill mode.

type AnimationFillMode =
  | 'none'
  | 'forwards'
  | 'backwards'
  | 'both'

Animation

Full animation type.

interface Animation<T = unknown> extends AnimationBase<T> {
  from: number
  to: number
  value?: T
  keyframes?: Keyframe<T>[]
  playState?: AnimationPlaybackState
  currentTime?: number
  startTime?: number
}

Keyframe

Keyframe with timing.

interface Keyframe<T = unknown> extends KeyframeBase<T> {
  time: number // Absolute time in ms
  computed?: boolean
  interpolation?: KeyframeInterpolation
}

EasingType

CSS-like easing type.

type EasingType =
  | 'linear'
  | 'ease'
  | 'ease-in'
  | 'ease-out'
  | 'ease-in-out'
  | 'step-start'
  | 'step-end'
  | `steps(${number}, start)`
  | `steps(${number}, end)`
  | `cubic-bezier(${string})`

EasingPreset

Built-in easing presets.

type EasingPreset =
  | 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut'
  | 'backEaseIn' | 'backEaseOut' | 'backEaseInOut'
  | 'bounceEaseIn' | 'bounceEaseOut' | 'bounceEaseInOut'
  | 'circEaseIn' | 'circEaseOut' | 'circEaseInOut'
  | 'elasticEaseIn' | 'elasticEaseOut' | 'elasticEaseInOut'
  | 'quadEaseIn' | 'quadEaseOut' | 'quadEaseInOut'
  | 'sineEaseIn' | 'sineEaseOut' | 'sineEaseInOut'

SpringConfig

Spring physics parameters.

interface SpringConfig {
  stiffness: number // Tension
  damping: number // Friction
  mass?: number
  velocity?: number
  precision?: number
}

SpriteSheet

Sprite sheet configuration.

interface SpriteSheet {
  image: string
  frameWidth: number
  frameHeight: number
  frames: SpriteFrame[]
  animations: Record<string, SpriteAnimationDef>
  scale?: number
}

Skeleton

Skeleton structure for skeletal animation.

interface Skeleton {
  bones: Bone[]
  root: Bone
  name: string
}

Bone

Bone in skeleton.

interface Bone {
  id: string
  name: string
  parent: Bone | null
  children: Bone[]
  bindTransform: BoneTransform
  localTransform?: BoneTransform
  worldTransform?: BoneTransform
}

IKChain

Inverse Kinematics chain.

interface IKChain {
  bones: Bone[]
  target: IKTarget
  pole?: { x: number, y: number, z: number }
  iterations?: number
  tolerance?: number
}

AnimationClip

Animation clip (collection of tracks).

interface AnimationClip {
  name: string
  tracks: AnimationTrack[]
  duration: number
  startTime?: number
  endTime?: number
  speed?: number
  wrapMode?: ExtrapolationMode
  events?: AnimationEvent[]
}

AnimationController

Animation controller with parameters.

interface AnimationController {
  name: string
  paramaters: AnimationParameters
  layers: AnimationLayer[]
  entries: AnimationTransition[]
  anyStateTransitions?: AnimationTransition[]
}

Related

• Game Development - Game types
• Graphics - Graphics rendering types
• Audio Processing - Audio types