2.4.7 • Published 5 months ago
lesca-object-tweener v2.4.7
Why use it?
tween object value.
Live Demo
Installation
npm install lesca-object-tweener --save
Usage
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
Development
Methods
Methods | options | description | default |
---|---|---|---|
new Tweener( params:object ) | params | new Tweener class | |
.add(params:object) | params | tween object | |
.stop() | stop tween |
Properties
Properties | type | description | default |
---|---|---|---|
params.from | object | object value = number | |
params.to | object | object value = number | |
params.duration | number | tween duration | 1000 |
params.delay | number | tween delay | 0 |
params.easing | array | cubic-bezier 4 values | easeOutQuart |
params.onUpdate | function | call by frame | void |
params.onComplete | function | call when end | void |
params.onStart | function | call when start | void |
Features
- maintain if necessary
references
2.4.7
5 months ago
2.4.6
7 months ago
2.4.5
1 year ago
2.4.0
2 years ago
2.4.3
2 years ago
2.3.4
2 years ago
2.4.2
2 years ago
2.4.4
2 years ago
2.3.2
2 years ago
2.3.3
2 years ago
2.3.0
2 years ago
2.2.1
2 years ago
2.2.0
2 years ago
2.2.3
2 years ago
2.3.1
2 years ago
2.2.2
2 years ago
2.2.4
2 years ago
2.1.0
3 years ago
2.0.5
3 years ago
2.0.7
3 years ago
2.0.6
3 years ago
2.0.8
3 years ago
2.0.3
3 years ago
2.0.2
3 years ago
2.0.4
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.0.16
3 years ago
1.0.15
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.11
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago