# wocaca
> A light JavaScript Tween library for easy animations.
[online demo](https://www.justemit.com/wacaca/)
## 安装
您可以选择使用 [`wacaca.min.js`](https://github.com/justemit/wacaca/blob/master/lib/wacaca.min.js)。
```javascript
```
也可以使用 `npm`：
```
npm i wacaca
```
## 使用
```javascript
import { Tween } from 'wacaca'
const oDemo = document.querySelector('.demo')
new Tween(0)
.to(400)
.duration(1500) // 在 1500ms 内数值从 0 变化到 400
.onUpdate(val => {
oDemo.style.left = val + 'px'
})
.start()
```
如果使用 script 引入方式，上述代码修改为：
```javascript
```
[点我查看动画效果](https://www.justemit.com/wacaca/)
## 插值函数
`wacaca` 使用了 `d3-interpolate` 做插值函数，支持多种类型数据。
```javascript
// 数组
new WACACA.Tween([0, 1, 2, 3])
.to([0, 10, 20, 30])
.duration(1500)
.onUpdate(val => console.log(val)) // 输出类似：[0, 8.9262, 17.8524, 26.778599999999997]
.start()
// 对象
new WACACA.Tween({ x: 0, y: 0 })
.to({ x: 100, y: 200 })
.duration(1500)
.onUpdate(val => console.log(val)) // 输出类似：{x: 87.56845, y: 175.1369}
.start()
// 颜色
new WACACA.Tween('#ff0000')
.to('#00ffff')
.duration(1500)
.onUpdate(val => console.log(val)) // 输出类似：rgb(31, 224, 224)
.start()
```
关于动画怎么做，就要看怎么用 update 返回的数据。
## Easing
`wacaca` 内置了来自 `tween.js` 的 `easing-functions`。
```javascript
import { Tween, Easing } from 'wacaca'
new Tween(0)
.to(400)
.duration(1500)
.easing(Easing.bounceInOut)
.onUpdate(val => console.log(val))
.start()
```
关于缓动函数曲线[点此查看](http://sole.github.io/tween.js/examples/03_graphs.html)。
## LICENSE
MIT