tween object value.
import Tweener, { Bezier } from 'lesca-object-tweener';
// use single tween
const tweener = new Tweener({
from: { top: 0, left: 0 },
to: { top: 500, left: 500 },
duration: 1000,
delay: 1000,
easing: Bezier.linear,
onUpdate: (e) => console.log(e), // {top:0~500, left:0~500}
onComplete: (e) => console.log(e), // { top: 500, left: 500 }
}).play();
tweener
.add({
to: { top: 1000 },
duration: 1000,
delay: 1000,
easing: Bezier.easeInOutQuint,
onStart: () => alert('start'),
onUpdate: (e) => console.log(e), // {top:0~1000, left:500}
onComplete: (e) => console.log(e), // {top:1000, left:500}
})
.play();
// use multiple tween
const tweener = new Tweener();
[
{ top: 0, left: 0 },
{ top: 100, left: 100 },
].forEach((data) => {
tweener.add({
from: { top: 0 }, // first loop will add "from". Second time tweener will ignore "from"
to: { top: 100 },
duration: 0,
easing: Bezier.easeInOutQuint,
onUpdate: (e) => console.log(e), // { top:0~100 }
onComplete: (e) => console.log(e), // { top:100 }
});
});
tweener.play(); // Need to run play when new constructor without any params