Skip to content

Anime.js

Anime.js 是一个轻量级的 JavaScript 动画库,具有简单而强大的 API,支持纯 JavaScript 对象动画, 因此可以与 LeaferJS 结合使用。

适用平台

暂时只支持 web 版, 后续会有自带的跨平台动画库。

安装插件

需要安装 Anime.js 才能使用。

sh
npm install animejs
sh
pnpm add animejs
sh
yarn add animejs

Typescript 用户需要安装下对应的 类型库。

sh
npm install -D @types/animejs
sh
pnpm add -D @types/animejs
sh
yarn 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')
}

Released under the MIT License.