# js-frame-animation

> A frame animation library

Latest version **1.0.0** (published 2018-08-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install js-frame-animation
pnpm add js-frame-animation
yarn add js-frame-animation
bun add js-frame-animation
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-08-07 |
| First published | 2018-08-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 559.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 薛纪洪 |
| Maintainers | xuejihong |
| Keywords | JavaScript, animation |

## Links

- npm: https://www.npmjs.com/package/js-frame-animation
- Repository: https://github.com/XueMary/animation
- Homepage: https://github.com/XueMary/animation#readme
- Issues: https://github.com/XueMary/animation/issues
- npm.io page: https://npm.io/package/js-frame-animation

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-08-07

## README

animation

通常我们会遇到一些需求，用js实现一组动画（这里指的是由一帧帧图片组合而成的动画，非jq的animate）。

其实原理很简单，如果是多张图，就定时去改变image的src，如果是一张图，就定时改变backgroud-position；同时，我们还要支持图片预加载，动画执行次数（一次，n次，无限次），动画暂停，动画执行完成的回调等等。

有了上述需求，我觉得写一个通用的animation库还是很有必要的，这样用户就每必要为每一组动画写逻辑了，从繁琐的劳动中解放，不正是每个coder所期望的么：）



示例：

    var positions = [
     '120 0', '240 0', '360 0'
    ]

    var imglist = ['./horse.jpg']
    var rabbitEle = document.querySelector('#rabbit')

    var rabbit = animation(imglist)
    .changePosition(rabbitEle, positions, './horse.jpg')
    .repeat(4)
    rabbit.start(time * 10)
    setTimeout(() => {
      rabbit.pause()
    }, 2000);
    setTimeout(() => {
      rabbit.restart()
    }, 3000);


changePosition(ele, positions, imageUrl)  // 改变元素的 background-position 实现帧动画
    
changeUrl(ele, imgList) // 通过改变图片元素的URL 实现帧动画

repeat(times) // 动画执行的次数 times为空时无限循环

wait(time) // 动画的等待时间

then(callback) // 自定义执行任务

start(interval) // 动画开始执行，interval 表示动画执行的间隔 默认为16.7ms

pause() // 动画暂停

restart() // 动画从上一次暂停处重新执行

---
_Source: https://npm.io/package/js-frame-animation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._