Anime.js
Anime.js 是一个轻量级的 JavaScript 动画库，具有简单而强大的 API，支持纯 JavaScript 对象动画， 因此可以与 LeaferJS 结合使用。
适用平台
暂时只支持 web 版， 后续会有自带的跨平台动画库。
安装插件
需要安装 Anime.js 才能使用。
sh
npm install animejssh
pnpm add animejssh
yarn add animejssh
bun add animejsTypescript 用户需要安装下对应的 类型库。
sh
npm install -D @types/animejssh
pnpm add -D @types/animejssh
yarn add -D @types/animejssh
bun add -D @types/animejs文档
Anime.js 官方文档
示例
点击矩形，产生线性动画
更多 动画类型演示 。
ts
import { Leafer, PointerEvent, Rect } from 'leafer-ui'
import anime from 'animejs'
const leafer = new Leafer({ view: window })
const rect = new Rect({ y: 100, cornerRadius: 50, fill: '#32cd79' })
leafer.add(rect)
rect.on(PointerEvent.DOWN, () => {
anime({
targets: rect,
x: 500,
cornerRadius: 0,
easing: 'easeInOutQuad' // 动画类型
})
})颜色动画
通过把颜色分解成 R、G、B 可以实现颜色渐变的动画。
ts
import { Leafer, Rect } from 'leafer-ui'
import anime from 'animejs'
const leafer = new Leafer({ view: window })
const rect = new Rect({ y: 100, cornerRadius: 50, fill: '#32cd79' })
leafer.add(rect)
const data = {
x: 0,
cornerRadius: 50,
fillR: 0x32, // = #32cd79
fillG: 0xcd,
fillB: 0x79
}
anime({
targets: data,
x: 500,
cornerRadius: 0,
fillR: 0xff, // = #ffcd00
fillG: 0xcd,
fillB: 0x00,
loop: true, // 循环
direction: 'alternate', // 循环往复
easing: 'easeInOutQuad', // 动画类型
update() {
const { x, cornerRadius, fillR, fillG, fillB } = data
rect.set({ x, cornerRadius, fill: toColor(fillR, fillG, fillB) })
}
})
function toColor(r: number, g: number, b: number) {
const num = (r << 16) | (g << 8) | b | 0
return '#' + num.toString(16).padStart(6, '0')
}关键帧动画
更多 关键帧动画演示 。
ts
import { Leafer, Rect } from 'leafer-ui'
import anime from 'animejs'
const leafer = new Leafer({ view: window })
const rect = new Rect({ y: 100, cornerRadius: 50, fill: '#32cd79', around: 'center' })
leafer.add(rect)
const data = {
x: 50,
scaleX: 1,
rotation: 0,
cornerRadius: 50,
fillR: 0x32, // = #32cd79
fillG: 0xcd,
fillB: 0x79,
}
anime({
targets: data,
keyframes: [
{
x: 150,
scaleX: 2,
fillR: 0xff, // = #ffcd00
fillG: 0xcd,
fillB: 0x00,
duration: 500 // 500毫秒内执行完此关键帧
},
{
x: 50,
scaleX: 1,
fillR: 0xff, // = #ffc000
fillG: 0xc0,
fillB: 0x00,
duration: 200
},
{
x: 500,
cornerRadius: 0,
fillR: 0x32, // = #32cd79
fillG: 0xcd,
fillB: 0x79,
easing: 'easeOutBounce',
delay: 100 // 延时100毫秒再执行此关键帧
},
{
x: 50,
rotation: -720,
cornerRadius: 50,
}
],
duration: 3000,
loop: true, // 循环
easing: 'easeInOutQuad', // 动画类型
update() {
const { x, scaleX, rotation, cornerRadius, fillR, fillG, fillB } = data
rect.set({ x, scaleX, rotation, cornerRadius, fill: toColor(fillR, fillG, fillB) })
}
})
function toColor(r: number, g: number, b: number) {
const num = (r << 16) | (g << 8) | b | 0
return '#' + num.toString(16).padStart(6, '0')
}