Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

animate()

介绍

使用 Element 的 animate() 方法来给 UI 元件设置 CSS Animation 动画。

语法

animate(keyframes, options);

参数

keyframes

  1. 一个由多个关键帧的属性和值组成的对象所构成的数组。
function controlAnimation(ele: MainThread.Element) {
  'main thread'
  ele.animate(
    [
      {
        // from
        opacity: 0,
        color: '#fff',
      },
      {
        // to
        opacity: 1,
        color: '#000',
      },
    ],
    2000,
  );
}
  1. 给每个关键帧指定一个 timing-function 来控制动画的速度。
function controlAnimation(ele: MainThread.Element) {
  'main thread'
  ele.animate(
    [
      {
        // from
        opacity: 0,
        color: '#fff',
        'animation-timing-function': 'linear',
      },
      {
        // to
        opacity: 1,
        color: '#000',
        'animation-timing-function': 'ease-in',
      },
    ],
    2000,
  );
}

options

包含一个或多个属性的对象：

KeyValue类型是否可选说明默认值
durationNumberoptional动画持续时间0
delayNumberoptional动画开始生效前的延迟时间0
iterationsNumberoptional动画的重复次数。可以将其设为Infinity令动画无限循环。1
directionStringoptional动画的播放方向：向前（normal）、向后（reverse）、每次迭代切换方向（alternate），或向后并在每次迭代后切换方向（alternate-reverse）。默认值为 "normal"。"normal"
easingStringoptional动画的时间函数，表示动画在时间上的变化速率。接受一个timing-function，例如"linear", "ease-in", "step-end", or "cubic-bezier(0.42, 0, 0.58, 1)"。"linear"
fillStringoptional表示动画在执行之前和之后如何将样式应用于其目标，接受一个animation-fill-mode，例如"backwards"，"forwards"，"both"。"none"
nameStringoptional动画的名字，可作为动画的唯一标识。该名字会出现在动画事件参数中，通常用于判断某个动画事件是否是你想要的。内部的unique ID
play-stateStringoptional动画的运动状态，定义一个动画是否运行或者暂停，接受一个animation-play-staterunning
备注

若没有指定 name，每次生成一个自增的 unique id 作为 name。

返回值

返回 Animation 对象。 Animation 对象上的方法：

方法名说明
Animation.cancel()取消动画的执行，会触发animation cancel事件。
Animation.pause()暂停动画的执行。
Animation.play()恢复动画的执行。

示例

function controlAnimation(ele: MainThread.Element) {
  'main thread'
  let ani = ele.animate(
    [
      {
        'background-color': 'blue',
        transform: 'translateX(100px) translateY(300px) rotate(360deg)',
      },
      {
        'background-color': 'red',
        transform: 'translateX(0px) translateY(600px) rotate(0deg)',
      },
    ],
    {
      duration: 3000,
      delay: 1000,
      iterations: Infinity,
      direction: 'alternate',
      easing: 'ease-in-out',
      fill: 'both',
    },
  );

  ani.pause();
  ani.play();
  ani.cancel();
}

动画事件

Animate API 的事件和 CSS Animation 动画事件相同。

参见

兼容性

LCD tables only load in the browser

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。