animate

动画方法，支持延时、循环和 seek，可制作过渡动画、摇摆动画、关键帧动画、路径动画。

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

注意事项

需安装 动画插件 才能使用，或直接安装 leafer-game（已集成动画插件）。

关键方法

animate ( keyframe?: IUIInputData | IKeyframe[] | IAnimation, options?: ITranstion ) : Animate

执行动画方法，并返回 动画实例。

关键帧对象。

// 关键帧对象 type IKeyframe = IUIInputData | IAnimateKeyframe  interface IAnimateKeyframe {  style: IUIInputData // 元素样式   easing?: IAnimateEasing // 单独设置关键帧缓动方式  delay?: number // 单独设置关键帧延迟播放时长。  duration?: number // 单独设置关键帧的固定时长，设置后将忽略 autoDuration   swing?: number // 摇摆次数（到达 to 的次数），from -> to，to -> from -> to ... ，默认 0  loop?: number // 循环次数，默认为 0   // 分配剩余时间：（总时长 - 总关键帧固定时长）/ 总权重 * 当前权重  autoDelay?: number // 自动 delay 的权重， 默认为 0  autoDuration?: number // 自动 duration 的权重， 默认为 1 }

过渡选项。

// 过渡选项， object 表示动画选项对象， number 表示duration， string 表示 easing type ITransition = IAnimateOptions | IAnimateEasingName | number

深入了解 动画选项属性。

// 动画选项 interface IAnimateOptions {  easing?: IAnimateEasing // 缓动方式，默认为 ease   delay?: number // 延迟时间，以秒为单位， 默认为 0  duration?: number // 动画时长，以秒为单位，默认为 0.2  ending?: IAnimateEnding // 动画结束时的状态，可设置from、to，默认auto   reverse?: boolean // 是否反向动画 to -> from，默认为 false  swing?: boolean | number // 是否摇摆循环播放，可设置次数（到达 to 的次数） from -> to，to -> from -> to ... ，默认 false   loop?: boolean | number // 是否循环播放，可设置次数，默认为 false  loopDelay?: number // 进入下一次循环播放的延迟时间，默认为0   speed?: number // 动画播放的倍速，值越大播放越快，默认为 1 倍速   join?: boolean // 是否加入动画前的元素状态作为 from 关键帧  autoplay?: boolean // 是否自动播放   attrs?: string[] // 参与动画过渡效果的元素属性列表， 默认为所有  event?: IAnimateEvents // 监听事件 }

animate(): Animate

获取当前运行的动画实例。

killAnimate()

结束当前动画。

归属

UI 元素

示例

摇摆循环动画

// #动画方法 [摇摆动画] import { Leafer, Rect } from 'leafer-ui' import '@leafer-in/animate' // 导入动画插件 //  const leafer = new Leafer({ view: window })  const rect = new Rect({ y: 100, cornerRadius: 50, fill: '#32cd79' })  leafer.add(rect)  rect.animate(   { x: 500, cornerRadius: 0 }, // style keyframe  {  duration: 1,  swing: true // 摇摆循环播放  } // options )

颜色过渡动画

// #动画方法 [颜色过渡] import { Leafer, Rect } from 'leafer-ui' import '@leafer-in/animate' // 导入动画插件 //  const leafer = new Leafer({ view: window })  const rect = new Rect({ y: 100, cornerRadius: 50, fill: '#32cd79' })  leafer.add(rect)  rect.animate(   { x: 500, cornerRadius: 0, fill: '#ffcd00' }, // style keyframe  {  duration: 1,  swing: true // 摇摆循环播放  } // options )

关键帧动画

// #动画方法 [关键帧动画] import { Leafer, Rect } from 'leafer-ui' import '@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)  rect.animate(   [  { 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 )