tiny-animator

Make a interpolation between states' object with duration

Live example

• Install
• Importing
• sample

Install

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

Importing

import Animator from "tiny-animator";

Sample

usage animator plugin

script.js file

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);

Implement

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' 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 |

attribut effect

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

| number | description | | :----- | :----------------- | | 0 | initial state | | ... | intermediate state | | 1 | final state |

Exemples

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); // update to 0% of interpolation

cumulateTime = 5;
animate.update(cumulateTime); // update to 50% of interpolation

With duration = 50

let cumulateTime = 0;
animate.update(cumulateTime); // update to 0% of interpolation

cumulateTime = 5;
animate.update(cumulateTime); // update to 10% of interpolation

With duration = 5 ( call update without argument )

animate.update(); // update to 0% of interpolation
animate.update(); // update to 25% of interpolation
animate.update(); // update to 50% of interpolation
animate.update(); // update to 75% of interpolation
animate.update(); // update to 100% of interpolation