tiny-animator v1.2.0

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

attributes' last argument object

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

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

attribut effect

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

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

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