Popmotion / popmotion

Simple animation libraries for delightful user interfaces
https://popmotion.io
20k stars 663 forks source link

{Feature request] Animating a vector #906

Open matthiasferch opened 3 years ago

matthiasferch commented 3 years ago

I would like to be able to animate a 2D vector, like so:

interface vector {
  x: number,
  y: number;
}

const from = { x: 0.0, y: 0.0 };
const to = { x: 4.0, y: 2.0 };

animate<vector>({ from, to, onUpdate: (vector) => console.log(vector) });

I would like to try adding support for this myself but I'm not sure where to start. Could you point me in the right direction?

stokesman commented 3 years ago

Perhaps you've already figured this out. In case it could help anyone, the included interpolate function can be used for that.

const fromTo = interpolate(
  [0, 1],
  [
    { x: 0.0, y: 0.0 },
    { x: 4.0, y: 2.0 }
  ]
)
animate({ onUpdate: v => console.log(fromTo(v)) });

I guess you could create an animate wrapper that automates it too.