tiny-animator

Make a interpolation between states' object with duration

Live example

• Install
• Importing
• Usage
• Definition
• Methods
  • .restart()
  • .stop()
  • .update(num)

Install

npm i tiny-animator --save
or
yarn add tiny-animator

---

Importing

import Animator from "tiny-animator";

---

Usage

How to use Animator

let coords = { x: 0, y: 0 };

let animate = Animator(
    coords,
    { x: 300, y: 300 },
    {
        duration: 1000,
        onComplete: () => {
            console.log("Animate completed !");
        }
    }
);

let start = null;

function play(timestamp) {
    if (start === null) start = timestamp;
    progress = timestamp - start;
    animate.update(progress);
    requestAnimationFrame(play);
}

requestAnimationFrame(play);

---

Definition

let animate = Animator(obj, target, duration);

argument	type	Description
obj	object	Initial state ( ⚠️ don't use const. Module use reference )
target	object	Final state
duration	number or object	number to number of steps and object to more option

Attributes of the last argument object

const params = {
    duration: 1000,
    effect: (step) => step,
    onComplete: () => {
        console.log("Finiched");
    }
};

let animate = Animator(obj, target, params);

argument	type	Description
duration	number	number of steps to arrive on the last state
effect	function	call every update to treat time ( easeIn, easeOut, reverse, ... )
onComplete	function	call when duration

effect

Receive numbers range 0-1 and need send number range 0-1;

number	description
0	initial state
...	intermediate state
1	final state

Sample

const reverse = (num) => 1 - num;

const easeInOut = (num) => (Math.cos((num - 1) * Math.PI) + 1) / 2;

const easeIn = (num) => Math.abs(Math.log(num) / 2);

const easeOut = (num) => Math.log(num) / 2 + 1;

Methods

.restart()

Init animate and enable function update

animate.restart();

.stop()

Stop animate without launch onComplete and disable function update

animate.stop();

.update(num)

Update state on the right time with current step

argument	type	default	Description
num	number	null	update state on progress interpolation

The first call define step to 0, the next step will step up to the last one defined by duration

animate.update();

Samples

With duration = 10

let cumulateTime = 0;
animate.update(cumulateTime);
console.log(animate.progress); //  .0

cumulateTime = 5;
animate.update(cumulateTime);
console.log(animate.progress); //  .5

With duration = 50

let cumulateTime = 0;
animate.update(cumulateTime);
console.log(animate.progress); //  .0

cumulateTime = 5;
animate.update(cumulateTime);
console.log(animate.progress); //  .1

With duration = 5 ( call update without argument )

animate.update();
console.log(animate.progress); //  .0

animate.update();
console.log(animate.progress); //  .25

animate.update();
console.log(animate.progress); //  .50

animate.update();
console.log(animate.progress); //  .75

animate.update();
console.log(animate.progress); //  1