wocaca

A light JavaScript Tween library for easy animations.

online demo

安装

您可以选择使用 wacaca.min.js。

<script src="path/to/wacaca.min.js" />

也可以使用 npm：

npm i wacaca

使用

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 引入方式，上述代码修改为：

<div class="demo"></div>
<script src="./wacaca.min.js"></script>
<script>
  const oDemo = document.querySelector('.demo')

  new WACACA.Tween(0)
    .to(400)
    .duration(1500) // 在 1500ms 内数值从 0 变化到 400
    .easing(WACACA.Easing.bounceInOut)
    .onUpdate(val => {
      oDemo.style.left = val + 'px'
    })
    .start()
</script>

点我查看动画效果

插值函数

wacaca 使用了 d3-interpolate 做插值函数，支持多种类型数据。

// 数组
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。

import { Tween, Easing } from 'wacaca'

new Tween(0)
  .to(400)
  .duration(1500)
  .easing(Easing.bounceInOut)
  .onUpdate(val => console.log(val))
  .start()

关于缓动函数曲线点此查看。

LICENSE

MIT