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

animate()

介绍

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

  1. 使用 getElementById API, 根据 id 查找需要做动画的 Element 对象。
  2. 调用 Element 对象上的 animate API 实现动画。

语法

animate(keyframes, options);

参数

keyframes

有两种不同的格式：

  1. 一个由多个关键帧的属性和值组成的对象所构成的数组。
element.animate(
  [
    {
      // from
      opacity: 0,
      color: '#fff',
    },
    {
      // to
      opacity: 1,
      color: '#000',
    },
  ],
  2000,
);
  1. 一个 key 是 offset，value 是关键帧组成的对象。
element.animate({
  '0%': {
    // from
    opacity: 0,
    color: '#fff',
  },
  '50%': {
    // 50%
    opacity: 0.5,
    color: '#aaa',
  },
  '100%': {
    // to
    opacity: 1,
    color: '#000',
  },
});
  1. 你也可以给关键帧指定一个 timing-function。
element.animate([
  {
    // from
    opacity: 0,
    color: '#fff',
    'animation-timing-function': 'linear',
  },
  {
    // to
    opacity: 1,
    color: '#000',
    'animation-timing-function': 'ease-in',
  },
]);

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
备注
  1. 若没有指定 name，每次生成一个自增的 unique id 作为 name。
  2. 相同 name 的动画无法连续多次触发。

返回值

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

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

示例

通过 getElementById() 调用

let ani = lynx.getElementById('test').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',
  },
);

// 当参数为Object时，严格要求百分比写法为带有百分号的百分数 诸如'.50','50'等值都会被除以100
let ani = lynx.getElementById('test').animate(
  {
    '0%': {
      transform: 'rotate(0deg)',
      left: '0px',
    },
    '50%': {
      // 中间帧的属性可以缺省
      left: '30px',
    },
    '100%': {
      transform: 'rotate(225deg)',
      left: '100px',
    },
  },
  {
    duration: 3000,
    delay: 1000,
    iterations: Infinity,
    direction: 'alternate',
    easing: 'ease-in-out',
    fill: 'both',
  },
);

ani.pause();
ani.play();
ani.cancel();
NOTE
  • 每次调用 lynx.getElementById("test").animate 都会生成一个新的 Animation 对象，同时后面创建的动画会覆盖前面创建的动画。
  • 如果想重启一个同样的动画，需要重新调用 lynx.getElementById("test").animate 来创建一个新的 Animation 对象。。

通过 createSelectorQuery() 调用
3.4

在 Lynx 3.4 版本后，animate() 可以通过 createSelectorQuery() 来调用。

该方式属于实验性功能。

const ani1 = lynx.createAnimation(
  'ani1',
  [
    {
      transform: 'translateY(0px)',
    },
    {
      transform: 'translateY(-150px)',
    },
  ],
  {
    name: 'js-animation-1',
    duration: 3000,
    iterations: 'infinite',
    easing: 'cubic-bezier(.64, .57, .67, 1.53)',
    fill: 'forwards',
  },
);

// start
this.createSelectorQuery().select('#test').animate([ani1]).exec();
// pause
this.createSelectorQuery()
  .select('#test')
  .pauseAnimation(['js-animation-1'])
  .exec();

多动画 Multiple animate
3.4

在 Lynx 3.4 版本后，可以通过 createSelectorQuery() 来在一个节点上同时启动多个动画。

该方式属于实验性功能。

const ani1 = lynx.createAnimation(
  'ani1',
  [
    {
      transform: 'translateY(0px)',
    },
    {
      transform: 'translateY(-150px)',
    },
  ],
  {
    name: 'js-animation-1',
    duration: 3000,
    iterations: 'infinite',
    easing: 'cubic-bezier(.64, .57, .67, 1.53)',
    fill: 'forwards',
  },
);

const ani2 = lynx.createAnimation(
  'ani2',
  [
    {
      'background-color': 'red',
    },
    {
      'background-color': 'blue',
    },
  ],
  {
    name: 'js-animation-2',
    duration: 3000,
    easing: 'linear',
    fill: 'forwards',
    iterations: 'infinite',
  },
);

// start
this.createSelectorQuery().select('#test').animate([ani1, ani2]).exec();
// pause
this.createSelectorQuery()
  .select('#test')
  .pauseAnimation(['js-animation-1', 'js-animation-2'])
  .exec();

动画事件

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

其他信息

TIP

  • Animate API 与 CSS Animation 会互相覆盖，后生效的那一方会覆盖前者。

  • Animate API 不生效，可能是 getElementById 未能选中节点：

    • 可能是 ID 选择器不正确
    • 可能是 ID 选择器的值依赖复杂 JS 表达式，导致 ID 选择器的值无法在首屏得到，此时若 getElementById 的时机过早 (如在 ComponentDidMount)，则可能找不到节点

参见

兼容性

LCD tables only load in the browser

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