slik

    1.2.4 • Public • Published

    Slik CircleCI

    Animation / tweening library, ideal for use with HTML5 canvas and or React - Demo

    About

    Slik uses requestAnimationFrame to tween values over time. You can give it a single value, an array, or an object. Internally Slik converts these values to ImmutableJS ones, and returns the tweened values as ImmutableJS objects (unless only a single value is supplied).

    Slik uses ImmutableJS so that when used with React you can keep your components pure (preventing updates if values have not changed) as ImmutableJS returns a new reference when updated, allowing quick checks for changes using PureRenderMixin for example.

    Installation

    Use npm to install slik.

    npm install slik --save --save-exact

    I'd recommend pinning to a specific version and using --save-exact and --save to add this to your package.json automatically.

    Getting started

    1. Require slik in the file where you'll be animating.

      import Slik from 'slik';
    2. Setup the values you want to animate. These values can be contained in objects, arrays, or simply be single values. If you're animating a lot of values I'd highly recommend using objects as it makes it easier to refer to your values later.

      Note: these can be nested values.

      const initialValues = {
        headRotation: 0,
        leftArm: {
          upper: 0,
          lower: 0
        }
      };
    3. Create an Animation.

    4. Initial options: You can pass most of your config in here if you like, or add them using the methods with matching names.

      const animation = new Slik.Animation({
        from: initialValues,
        to: nextValues
        // Defaults below
       
        // duration: 500 (milliseconds)
        // delay: 0 (milliseconds)
        // fps: 120 (frames per second) I would not recommend changing the frame rate
        // ease: Slik.Easing.Linear
        // loop: false
      });
    5. Using methods: Note: fluent API returns the same object for each method (except the playing method which returns a boolean). More info below.

      const animation = new Slik.Animation()
        .from(initialValues)
        .to(nextValues)
        .duration(1000)
        .delay(2000)
        .ease(Slik.Easing.EaseInOutSine)
        .loop(true);
    6. Handle changes in values. Bind a callback to the update event & update your component or redraw your canvas.

    7. Canvas example

      animation.bind('update', function (values) {
        canvas.render(values);
      });
    8. React example

      componentWillMount () {
        animation.bind('update', function (values) {
          this.setState({
            values: values
          });
        });
      }

    Animation methods

    1. Set the values to tween from. Default: Immutable.Map().

      animation.from({hello: 0});
    2. Set the values to tween to. Default: Immutable.Map().

      animation.to({hello: 1});
    3. Set the duration of the animation in milliseconds. Default: 500.

      animation.duration(500);
    4. Set a delay in milliseconds before the animation begins. Default: 0.

      animation.delay(1000);
    5. Set the frame rate of the animation (fps). Default: 120. I would not recommend changing this unless you intentionally want a less smooth animation.

      animation.fps(120);
    6. Set the easing function to use for the animation. Default: Slik.Easing.Linear. Note: you can easily create your own easing functions. More info on this below.

      animation.ease(Slik.Easing.Linear);
    7. Set whether the animation should automatically loop. Default: false.

      animation.loop(false);
    8. Invert the values that you are tweening to. E.g. {value: 1} would become {value: -1}

      animation.invert();
    9. Swap the from & to values to play in reverse.

      animation.reverse();
    10. Start the animation. Alias: play

      animation.start();
    11. Stop the animation, allowing you to restart from the beginning. Alias: reset

      animation.stop();
    12. Pause the animation, allowing you to resume from this point.

      animation.pause();
    13. Return whether the animation is currently playing.

      animation.playing();
    14. Return whether the animation is going to loop.

      animation.looping();
    15. Run a callback once before the animation is initially started (start event). Receives the animation's current values. Automatically unbound after triggered or animation stopped.

      animation.first(function () {});
    16. Run a callback once after the animation has completed (end event). Receives the animation's current values. Automatically unbound after triggered or animation stopped.

      animation.then(function () {});
    17. Bind a callback to a specific animation event (or all events). Alias: on More info on events below.

      animation.bind('type', function () {});
    18. Unbind a callback from a specific animation event (or events). Alias: off More info on events below.

      animation.unbind('type', function () {});
    19. Subscribe to an event (like bind), and return an unsubscribe function (unbind).

      var unsubscribe = animation.subscribe('type', function () {});
       
      unsubscribe();
    20. Get the current value / values. Alias: value

      animation.values();

    Easing functions

    There are a few easing functions available on Slik.Easing.

    • Linear
    • EaseInOutSine
    • EaseInSine
    • EaseOutSine
    • Dip
    • Spring

    Events

    All events are called with the current values. These may be the initial values or next values if the animation has only just begun, or has ended.

    • all - called any time another event is triggered
    • start - called when an animation is started
    • stop - called when an animation is stopped
    • pause - called when an animation is paused
    • end - called when an animation completes (excluding loops)
    • update - called every frame an animation updates
    • loop - called every time an animation loops (if looping)

    Custom easing functions

    You can provide a custom easing function to ease your values. This function is provided with the following values:

    • progress - a value from 0 to 1 as to how complete the animation is
    • startTime - the time in milliseconds that the animation began (from performance.now)
    • now - the current time in milliseconds (from performance.now)
    • duration - the duration of the animation in milliseconds
    • fromValue - the value to tween from (single values, not objects)
    • toValue - the value to tween to (single values, not objects)

    This function simply returns a value from 0 to 1 (or a number outside of this range if you are so inclined), that is used as a multiplier for the values in your animation.

    For example a linear easing function simply returns the progress of the animation.

    function Linear (progress, startTime, now, duration, fromValue, toValue) {
      return progress;
    }

    Most easing functions can be accomplished simply by returning a variation of the progress value. E.g.

    function EaseOutSine (progress) {
      return Math.sin(progress * Math.PI / 2);
    }

    Install

    npm i slik

    DownloadsWeekly Downloads

    156

    Version

    1.2.4

    License

    MIT

    Unpacked Size

    42 kB

    Total Files

    12

    Last publish

    Collaborators

    • jakesidsmith