Nutty Professor Movie

    kinet

    2.2.1 • Public • Published

    Kinet

    Animate stuff with kinetic force. Kinet let's you animate values and use them wherever you need to.

    Installation

    Include Kinet with scripts tag

    <script src="./dist/kinet.min.js"></script>

    or with npm and import

    npm install kinet --save
    // import needed modules from npm
    import Kinet from 'kinet';

    Options

    Kinet accepts several options defined as follows.

    var options = { option: "value" }
    var kinet = new Kinet(options);

    friction

    Recommended value 0-1. Default value is 0.3.

    acceleration

    Recommended value 0-1. Default value is 0.04.

    initialValue

    Sets the initial value of current and target variables in animated instances.

    names

    Array of names (strings). Kinet creates animated instance for each name. Defaults to single x value in array.

    test

    Function testing whether the animation has finished. Function gets and animated instance as an argument. When test function returns false for all animated instances, Kinet stops the animation and sets values to target values.

    // default value
    test: function (instance) {
        return Math.abs(instance.current - instance.target) > 0.1;
    }

    Methods

    var kinet = new Kinet({name: ["x", "y"]});

    set

    Sets value of current and target of animated instance to required value without animating.

    var kinet = new Kinet();
    kinet.set("x", 10); // sets to number 10

    animate

    Animates value of current variable of animated instance to target value without animating.

    var kinet = new Kinet();
    kinet.animate("x", 10); // animates to number 10

    on

    Sets handler for event. Available events are start (called at start of animation), end (called at the end of animation) and tick (called for every tick of animation). Tick is called with requestAnimationFrame as the current value progresses to target value.

    // init
    var kinet = new Kinet();
     
    // set handler
    kinet.on('tick', function () {
        // do something on every animation tick
    });

    off

    Removes handler.

    kinet.off('tick', handler); // removes single handler
    kinet.off('tick'); // removes all handlers for 'tick' event
    kinet.off(); // removes all handlers

    Install

    npm i kinet

    DownloadsWeekly Downloads

    514

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    28.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • gmrchk