-
Notifications
You must be signed in to change notification settings - Fork 2
[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.
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]
.
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