Labs ICT
Pro Login

Animation

Keyframes, interpolation, and motion

Animation

Computer animation creates the illusion of movement by displaying a sequence of images (frames) in rapid succession. Modern animation combines keyframe interpolation with physics-based simulation.

Keyframe Animation

Keyframes define the state of an object at specific times. The computer automatically generates intermediate frames through interpolation (tweening).

Keyframe definition:

  Time:   0s      1s      2s      3s
  Pos:   (0,0)   (5,3)   (10,0)  (15,3)

  Interpolation between keyframes:
  t = 0.5 (halfway between 0s and 1s)
  pos = lerp((0,0), (5,3), 0.5)
     = (2.5, 1.5)

Keyframe properties can include:
  - Position
  - Rotation
  - Scale
  - Color
  - Opacity
  - Any custom parameter

Interpolation Functions

Linear:
  f(t) = t
  
  Smooth but robotic motion

Ease-in (slow start):
  f(t) = t²

Ease-out (slow end):
  f(t) = 1 - (1-t)²

Ease-in-out:
  f(t) = t < 0.5
       ? 2*t²
       : 1 - (-2*t + 2)² / 2

Cubic Hermite:
  f(t) = 2t³ - 3t² + 1  (smoothstep)

Catmull-Rom:
  Uses 4 keyframes for C1 continuity

Skeletal Animation

Characters are animated by deforming a mesh based on an underlying skeleton (armature). Each bone has a transformation that affects nearby vertices.

Skeletal Animation:

  Skeleton:
    Bone0 (root)
      └── Bone1 (upper arm)
            └── Bone2 (lower arm)
                  └── Bone3 (hand)

  Vertex weighting:
    vertex_pos = Σ (weight_i * bone_i * local_pos)

  Each bone has:
    - Bind pose (rest position)
    - Animation pose (current transform)
    - Weight map (which vertices it affects)

Inverse Kinematics (IK)

Given a target position for an end effector, IK solves for the joint angles that reach that target. Used for foot placement, reaching, and procedural animation.

Two-bone IK (Analytical):

  Given: shoulder, elbow, wrist
  Target: hand_target

  d = distance(shoulder, hand_target)
  L1 = upper_arm_length
  L2 = lower_arm_length

  cos(elbow_angle) = (L1² + L2² - d²) / (2*L1*L2)

  CCD (Cyclic Coordinate Descent):
    Iterate from end effector to root
    Adjust each joint to point toward target

Physics-Based Animation

Spring-Mass System:

  F = -kx - bv + mg

  k = spring constant
  b = damping coefficient
  m = mass
  g = gravity

  Integration (Euler):
  v(t+dt) = v(t) + F(t)/m * dt
  x(t+dt) = x(t) + v(t) * dt

  Verlet integration (more stable):
  x(t+dt) = 2*x(t) - x(t-dt) + a(t)*dt²

🧪 Quick Quiz

In keyframe animation, intermediate frames are generated by: