Skip to content

[Brainstorm] Animation API

Dave Pagurek edited this page Jun 1, 2018 · 1 revision
const animation = Animation.create({
  node: someNode,
  to: (node) => node.pointAt(somePoint),
  curve: 'linear',
  start: Animation.now(), // defaults to now
  duration: Animation.duration(5, 'seconds'),
  times: Animation.infinite(), // infinite repeat is actually just 0, default is 1
  repeatDelay: Animation.duration(2, 'seconds')
});

A subset of the properties can be provided if some features aren't being used (e.g. default to linear curve, default to no repeat.)

On every render call, we can do something like Animation.update(), which will go through its internal list of queued animations to apply transformations.

Curves

We can maybe use a cubic bezier for interpolation and provide defaults in the same way that CSS does. So, each curve is just an array of length four, and linear is [0, 0, 1, 1].

Interpolation

Have to think about the best way to do this. Likely, each matrix for rotation and scale needs to be decomposed, interpolated separately, and recomposed.

Literature resource: https://docs.google.com/viewer?url=http://www.cs.wisc.edu/graphics/Courses/838-s2002/Papers/polar-decomp.pdf

Clone this wiki locally