Animate 类

动画类，丰富的动画功能，支持延时、循环和 seek，可制作过渡动画、摇摆动画、关键帧动画、路径动画、滚动动画。

支持以 animation、transition、animate() 方法、Animate 实例 等方式创建动画。

另外元素的 move()、 set() 等方法支持添加动画过渡参数，文本支持 count 动画、打字机动画。

继承

Animate  >  Eventer

安装插件

需要安装 animate 插件、color 插件 才能使用，点此访问 Github 仓库。

npm

npm install @leafer-in/animate
npm install @leafer-in/color

pnpm

pnpm add @leafer-in/animate
pnpm add @leafer-in/color

yarn

yarn add @leafer-in/animate
yarn add @leafer-in/color

bun

bun add @leafer-in/animate
bun add @leafer-in/color

或通过 script 标签引入，使用全局变量 LeaferIN.animate 访问插件内部功能。

animate.min

<script src="https://unpkg.com/@leafer-in/animate@2.3.3/dist/animate.min.js"></script>
<script src="https://unpkg.com/@leafer-in/color@2.3.3/dist/color.min.js"></script>
<script>
  const { Animate } = LeaferIN.animate
</script>

animate

<script src="https://unpkg.com/@leafer-in/animate@2.3.3/dist/animate.js"></script>
<script src="https://unpkg.com/@leafer-in/color@2.3.3/dist/color.js"></script>
<script>
  const { Animate } = LeaferIN.animate
</script>

关键属性 （只读）

target: UI ｜ Object

动画目标元素，支持普通对象。

动画选项属性

可作为初始化动画选项参数传入，当作为 Animate 实例属性访问时为只读属性。

名称	描述
easing	缓动：动画的缓动方式，默认为 ease
delay	延迟：动画延迟播放的时长
duration	时长：动画的总时长（不包含 delay 和循环时间）
speed	速度：动画的播放倍速，1 个 10 秒的动画，如果 speed 为 5，则 2 秒就能播完
reverse	反向：是否反向动画 to -> from
loop	循环：是否循环播放，可设置次数
loopDelay	循环间隔：进入下一次循环播放的延迟时间
swing	摇摆循环：是否摇摆循环播放，可设置到达 to 的次数，from -> to，to -> from -> to ...
ending	结束样式：动画结束时的样式，from 表示起点样式，to 表示终点样式
join	加入关键帧： 是否加入动画前的元素状态作为 from 关键帧
jump	首帧跳转： 是否先跳到第一帧再延时等待
autoplay	自动播放： 是否自动播放，默认为 true
attrs	过渡属性：参与动画过渡的元素属性列表， 默认为所有
event	事件：监听动画事件对象

更多属性

名称	描述
计时
duration	动画的总时长（不包含 delay 和循环时间）
time	已经播放的时长（相对 duration，不包含 delay 和循环时间）
looped	已经循环播放了多少次（计数）
状态
started	动画是否开始
running	动画是否正在播放
completed	动画是否完成
destroyed	动画是否销毁
样式
style	当前动画状态的样式
fromStyle	from 帧状态的样式
toStyle	to 帧状态的样式
endingStyle	结束状态的样式
frames	实际用于内部动画的计算关键帧列表
keyframes	原始动画关键帧列表

关键方法

名称	描述
play()	播放动画
pause()	暂停动画
stop()	停止动画： 强行完成动画并暂停
seek()	定位动画：定位跳转到指定时间，支持设置具体时间（以秒为单位）或百分比
kill()	kill 动画：强行完成并销毁动画
destroy()	销毁动画：立即销毁动画，不会执行完成动画操作，仅停留在当前动画状态

事件

动画事件，通过 on() 监听。

名称	描述
AnimateEvent	动画事件

示例

摇摆循环动画

// #创建动画实例  [摇摆动画]
import { Leafer, Rect } from 'leafer-ui'
import { Animate } from '@leafer-in/animate' // 导入动画插件

const leafer = new Leafer({ view: window })

const rect = new Rect({ y: 100, cornerRadius: 50, fill: '#32cd79' })

leafer.add(rect)

new Animate(  
    rect,
    { x: 500, cornerRadius: 0 }, // style keyframe
    {
        duration: 1,
        swing: true // 摇摆循环播放
    } // options
)

颜色过渡动画

// #创建动画实例 [颜色过渡]
import { Leafer, Rect } from 'leafer-ui'
import { Animate } from '@leafer-in/animate' // 导入动画插件

const leafer = new Leafer({ view: window })

const rect = new Rect({ y: 100, cornerRadius: 50, fill: '#32cd79' })

leafer.add(rect)

new Animate(  
    rect,
    { x: 500, cornerRadius: 0, fill: '#ffcd00' }, // style keyframe
    {
        duration: 1,
        swing: true // 摇摆循环播放
    } // options
)

关键帧动画

// #创建动画实例 [关键帧动画]
import { Leafer, Rect } from 'leafer-ui'
import { Animate } from '@leafer-in/animate' // 导入动画插件

const leafer = new Leafer({ view: window })

const rect = new Rect({ x: 50, y: 100, cornerRadius: 50, fill: '#32cd79', around: 'center' })

leafer.add(rect)

new Animate(  
    rect,
    [
        { style: { x: 150, scaleX: 2, fill: '#ffcd00' }, duration: 0.5 },  // animate keyframe
        { style: { x: 50, scaleX: 1, fill: '#ffcd00' }, duration: 0.2 },
        { style: { x: 550, cornerRadius: 0, fill: '#ffcd00' }, delay: 0.1, easing: 'bounce-out' },
        { x: 50, rotation: -720, cornerRadius: 50 } // style keyframe
    ],
    {
        duration: 3, // 自动分配剩余的时长给未设置 duration 的关键帧： (3 - 0.5 - 0.2 - 0.1) / 2 
        loop: true,
        join: true //  加入动画前的元素状态作为 from 关键帧
    } // options
)

暂停动画

// #动画 - 通过 pause() 方法暂停动画
import { Leafer, Rect } from 'leafer-ui'
import { Animate } from '@leafer-in/animate' // 导入动画插件

const leafer = new Leafer({ view: window })

const rect = Rect.one({ fill: '#32cd79' }, 0, 100, 50, 50)

leafer.add(rect)

const animate = new Animate(
    rect,
    { x: 500 }, // style keyframe
    {
        duration: 2
    } // options
)

// 通过 pause() 方法暂停动画
setTimeout(() => {

    animate.pause()

}, 500)

定位跳转动画

// #动画 - 通过 seek() 方法定位跳转动画 [数值（秒数）]
import { Leafer, Rect } from 'leafer-ui'
import { Animate } from '@leafer-in/animate' // 导入动画插件

const leafer = new Leafer({ view: window })

const rect = Rect.one({ fill: '#32cd79' }, 0, 100, 50, 50)

leafer.add(rect)

const animate = new Animate(
    rect,
    { x: 500 }, // style keyframe
    {
        duration: 2,
        autoplay: false // 不自动播放
    } // options
)

// 通过 seek() 方法定位跳转动画
setTimeout(() => {

    animate.seek(0.5)

}, 1000)

通过 on() 监听动画事件

支持像元素一样 监听、移除事件，同时也支持初始化时传入 监听事件对象。

animate

// #动画 - 通过 on() 监听动画事件 [event（animate）]
import { Leafer, Rect } from 'leafer-ui'
import { Animate, AnimateEvent } from '@leafer-in/animate' // 导入动画插件

const leafer = new Leafer({ view: window })

const rect = Rect.one({ fill: '#32cd79' }, 0, 100, 50, 50)

leafer.add(rect)

const animate = rect.animate(
    { x: 500 }, // style keyframe
    { duration: 2 } // options
)

// 监听动画事件
animate.on(AnimateEvent.PLAY, () => { // 动画创建
    console.log('play')
})

animate.on(AnimateEvent.UPDATE, (animate: Animate) => { // 更新中...
    console.log(animate.style.x)
})

animate.on(AnimateEvent.COMPLETED, () => { // 动画已完成
    console.log('completed')
})

Animate

// #动画 - 通过 on() 监听动画事件 [event（Animate）]
import { Leafer, Rect } from 'leafer-ui'
import { Animate, AnimateEvent } from '@leafer-in/animate' // 导入动画插件

const leafer = new Leafer({ view: window })

const rect = Rect.one({ fill: '#32cd79' }, 0, 100, 50, 50)

leafer.add(rect)

const animate = new Animate(
    rect,
    { x: 500 }, // style keyframe
    { duration: 2 } // options
)

// 监听动画事件
animate.on(AnimateEvent.PLAY, () => { // 动画创建
    console.log('play')
})

animate.on(AnimateEvent.UPDATE, (animate: Animate) => { // 更新中...
    console.log(animate.style.x)
})

animate.on(AnimateEvent.COMPLETED, () => { // 动画已完成
    console.log('completed')
})