animate()

介绍

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

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

语法

animate(keyframes, options);

参数

keyframes

有两种不同的格式：

一个由多个关键帧的属性和值组成的对象所构成的数组。

element.animate(
  [
    {
      // from
      opacity: 0,
      color: '#fff',
    },
    {
      // to
      opacity: 1,
      color: '#000',
    },
  ],
  2000,
);

一个 key 是 offset，value 是关键帧组成的对象。

element.animate({
  '0%': {
    // from
    opacity: 0,
    color: '#fff',
  },
  '50%': {
    // 50%
    opacity: 0.5,
    color: '#aaa',
  },
  '100%': {
    // to
    opacity: 1,
    color: '#000',
  },
});

你也可以给关键帧指定一个 timing-function。

element.animate([
  {
    // from
    opacity: 0,
    color: '#fff',
    'animation-timing-function': 'linear',
  },
  {
    // to
    opacity: 1,
    color: '#000',
    'animation-timing-function': 'ease-in',
  },
]);

options

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

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

备注

若没有指定 name，每次生成一个自增的 unique id 作为 name。
相同 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

#animate()

#介绍

#语法

#参数

#keyframes

#options

#返回值

#示例

#通过 getElementById() 调用

#通过 createSelectorQuery() 调用 3.4

#多动画 Multiple animate 3.4

#动画事件

#其他信息

#参见

#兼容性