Animation

• Terminology
  • Frame: each image (or state) of an animation sequence
  • Frame rate: number of frames to display per second
  • Tweening: interpolation of key frames into frames
  • Easing: a function that controls how tweening is calculated
  • Key Frame: defines the beginning and ending of a tween
• Frame rate is measured in frames-per-second(fps), can be expressed as Hertz(Hz)
• Tweening calculation

t = (time – startTime) / duration
value = startValue + (endValue – startValue) * t

const lerp = (start: number, end: number, t: number) =>
        start + (end - start) * t;

• Easing function, changes how value is interpolated over time \(t\)

value = lerp(startValue, endValue, easing(t))

• AnimationManager singleton with list of active Animator objects, update each animation every frame and remove animations that have finished
• A tween is essentially two key frames, but we can generalize it multiple key frames. We just need to find keyframes i and i+1 for the current time, and tween them as before.

(time >= keyframe[i].time) && (time <= keyframe[i+1].time)