Introduction

A javascript lib to create frame-by-frame animation.

Install

You can install frame-animate by npm.

$ npm install frame-animate-js

or use script label

<script src="../dist/index.js"></script>

Config

| config | instruction | example | -------- | ----- | ----- | dom | animate container | document.querySelector("#test") | frameNumber | total number of frames | 16 | delay | interval between two frames | 70 | imgPath | source image path | './app-download.png' | imgWidth | source image width | 1280

Api

1. playForward(start, end)

Start animate and play forward from one frame to another.

2. playBack(start, end)

Start animate and play back from one frame to another.

3. reset()

Reset animate, stop animate and move to first frame.

4. pause()

Pause animate.

5. addFrameCallBack(frameNumber, func)

Call the function when the animation is playing to the specified frame.

6. removeFrameCallBack(callback)

Remove a callback.

7. getCurrentFrame()

Return current frame number.

Example

All the following examples use this picture as material.(from bilibili.com)

Basic

import FrameAnimate from 'frame-animate-js';

const config = {
    dom: document.querySelector("#test"),
    frameNumber: 16,
    delay: 70,
    imgPath: './app-download.png',
    imgWidth: 1280
};
const frame = new FrameAnimate(config);
frame.playForward();

Loop playback

import FrameAnimate from 'frame-animate-js';

const config = {
    dom: document.querySelector("#test"),
    frameNumber: 16,
    delay: 70,
    imgPath: './app-download.png',
    imgWidth: 1280
};
const frame = new FrameAnimate(config);
frame.playForward();

frame.addFrameCallBack(0, function () {
    frame.pause();
    frame.playForward();
});

frame.addFrameCallBack(15, function () {
    frame.pause();
    frame.playBack();
});

Complex

import FrameAnimate from 'frame-animate-js';

const config = {
    dom: document.querySelector("#test"),
    frameNumber: 16,
    delay: 70,
    imgPath: './app-download.png',
    imgWidth: 1280
};
const frame = new FrameAnimate(config);

let callback15, callback9;

document.querySelector("#test").addEventListener("mouseenter", function () {

    callback9 = frame.addFrameCallBack(9, function () {
        frame.pause();
        frame.playForward(9, 15);
    });

    callback15 = frame.addFrameCallBack(15, function () {
        frame.pause();
        frame.playBack(15, 0);
    });

    frame.pause();
    frame.playForward(frame.getCurrentFrame());
});

document.querySelector("#test").addEventListener("mouseleave", function () {
    frame.removeFrameCallBack(callback9);
    frame.removeFrameCallBack(callback15);
    frame.pause();
    frame.playBack(frame.getCurrentFrame(), 0);
});

Use in vue

<template>
  <div ref="imgContainer">
  </div>
</template>

import FrameAnimate from 'frame-animate-js';
import Img from './app-download.png';

export default {
  mounted() {
    const config = {
      dom: this.$refs.imgContainer,
      frameNumber: 16,
      delay: 70,d
      imgPath: Img,
      imgWidth: 1280
    };
    const frame = new FrameAnimate(config);
    frame.playForward()
  }
}