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

v3 docs

if you are looking for v3's docs: https://github.com/voderl/tween-animate/blob/v3.1.4/README.md

develop

install

yarn

start

yarn watch

template

yarn template

then open http://localhost: 3000

test

yarn test

build

yarn build