Tween-animate NPM

tween-animate

usage

import Animate from 'tween-animate';

const { Easing } = Animate;

// internal global requestAnimationFrame start
Animate.play();

Animate(0, 10, 1000)
  .transform('yoyo')
  .transform('step', 20)
  .on('update', v => console.log(v));

// console.log
// 0 1 2 3 4 5 6 7 8 9 10 9 8 7 6 5 4 3 2 1 0

Explore more with Codepen

get start

// Recommand the link below contains the current version
<script src="https://unpkg.com/tween-animate/dist/tween-animate.umd.js"></script>

yarn add tween-animate

npm install tween-animate

Animate

Animate(from, to, time, easing);
Animate(from).to(to, time, easing);

examples:

Animate(0, 100, 1000, Easing.Linear.None);

Animate({
  x: 0,
  y: 0
}).to({
    x: 100
  }, 1000)
  .to({
    y: 100
  }, 1000)
  .on('update', v => console.log(v));

events

start
update
complete

Animate(0, 100, 1000)
  .on('start', () => console.log('start'))
  .on('update', v => console.log('update', v))
  .on('complete', () => console.log('complete'))

transforms

transforms list. And all the transforms can be nested.

loop - transform('loop', count: number)
speed - transform('speed', speed: number)
reverse
yoyo
wait - transform('wait', waitTime: number)

Animate(0, 1, 1000).transform('wait', 1000).to(2, 1000);

step - transform('step', steps: number, type?: 'floor' | 'ceil')

Animate(0, 1, 1000); // last 1000ms
Animate(0, 1, 1000).transform('loop', 3); // last 3000ms
Animate(0, 1, 1000).transform('loop', 3).transform('loop', 2); // last 6000ms

// the following two behave different
Animate(0, 100, 1000).transform('loop', 2).transform('yoyo');
Animate(0, 100, 1000).transform('yoyo').transform('loop', 2);

Animate property

play - function

// internal requestAnimationFrame start
Animate.play();

stop - function

// internal requestAnimationFrame stop
Animate.stop();

update - function

function ticker() {
  requestAnimationFrame(animate)
  Animate.update();
}
requestAnimationFrame(ticker);

updateElpased - function

Animate.updateElpased(1000); // update 1000 ms;

Easing - Easing funciton list
```
const { Easing } = Animate;
```

faster tween animate

parseFromTo(
  { x: [1, 2, 3], y: 1 }, // from
  { x: [1, 2, 6], y: 3 }, // to
);
/** update function is generated by "from" and "to"
 * @param a - from 
 * @param b - status - range 0 - 1
 */
function anonymous(a,b) {
  var a0=a["x"];a0["2"]=3+b*3;a["y"]=1+b*2;return a;
}

when "from" and "to" value have different structure, console will show friendly error message