Frame-animation

基于 raf 和 canvas 的帧动画工具支持任意行列的原图

npm：www.npmjs.com/package/@ju…

Install

npm i @justichentai/frame-animation

Usage

Simple Example

frame-animation 会自动检测你挂载的 el 的尺寸确保 el 的尺寸刚好是一帧的尺寸

import FrameAnime from '@justichentai/frame-animation'

const anime = new FrameAnime({  
  frame: 24,  
  url: 'url',  
  duration: 2000,  
  el: dom,  
})  

await anime.init()

anime.play()

Options

export interface Options {  
  el: HTMLDivElement // 要挂载的 dom  
  url: string // 帧动画图片 url  
  frame: number // 帧数  
  duration?: number // 持续时间 按 ms 计时  
  column ?: number // 帧动画图片 每行的列数 0 表示一行  
  imageLoadComplete?: (url: HTMLImageElement) => any // 图片加载完毕回调
  frameComplete?: (frame: number) => any // 每帧回调
  completeOne?: (times: number) => any // 每播完一次回调 times 是当前次数
  complete?: () => any // 播放次数用完 结束回调
}

如果你的帧动画原图是这样一行过去

column 设置为 0 或者不设置如果是多行请把column设置成每行有多少列

Load Image

await anime.init()

Start Animation

anime.play()

Pause Animation

anime.pause()

Play Times

这个方法可以限定播放次数如果动画播放时调用它会在当前动画播放完之后开始计时

anime.playTimes(n: number)

Reverse

anime.reverse()

如果你想倒放特定次数

anime.reverse().playTimes(2)

Update

当挂载的 el 尺寸变动调用这个 api 更新尺寸

anime.update()

基于 raf 和 canvas 的轻量级帧动画库