JS - Web Animations API (WAAPI)

Web Animations API

1.直接创建动画

格式：<Animate> Element.animate(keyframes, options)

对象形式

element.animate({
  opacity: [ 0, 0.9, 1 ],
  offset: [ 0, 0.8 ], // [ 0, 0.8, 1 ] 的简写
  easing: [ 'ease-in', 'ease-out' ],
}, 2000);

数组形式

element.animate([
  { opacity: 0, easing: 'ease-in' },
  { opacity: 0.9, offset: 0.8, easing: 'ease-out' },
  { opacity: 1 }
], 2000);

注意

offset必须升序排列，且范围位于[0, 1]

注意

• float，必须写成cssFloat，因为"float" 是 JavaScript 的保留关键字
• offset，必须写成cssOffset，因为"offset" 表示关键帧

options 参数属性

表示持续时间duration的整数(ms)

或

一个对象：

属性	描述	默认值
duration	持续时间	0
delay	播放前延时时间	0
easing	速度曲线	linear
iterations	播放次数（Infinity无限播放）	1
direction	播放方向(reverse反向)	normal
fill	播放之前或之后效果是否可见	linear
endDelay	播放后延时时间	0
iterationStart	动画开始时间点	0

注：单位ms
iterations=1, iterationStart=0.5时，动画播放 0.5~1, 0~0.5（总长为1）

小技巧

<Animation[]> Element.getAnimations可获取元素的所有动画，可用于批量操作

Animate 属性

> <Promise> Animate.finished 动画完成时的Promise对象

animation.finished.then(()=>conosle.log("finished"));

> Animation.currentTime 动画的当前时间值

注：单位：ms
包括delay时长

> Animation.playbackRate 动画播放速率

二倍速播放

animation.playbackRate = 2

> Animation.playState 动画播放状态

状态值	描述
running	正在播放
paused	暂停
finished	播放完毕或终止
idle	动画当前的时间是无法解析的，并且队列里没有处于等待执行的任务
pending	动画将一直等到某些等待中的任务完成方会执行

> Animation.pause() 暂停播放

> Animation.play() 恢复播放

> Animation.finish() 终止播放

> Animation.cancel() 终止播放并清除此动画的所有keyframeEffects

> Animation.reverse() 反转播放

• 播放中：从当前位置反向播放至开头
• 未播放/播放完：从结尾反向播放至开头

2.基于KeyframeEffect创建动画（可复用）

创建KeyframeEffect

直接创建

new KeyframeEffect(target, keyframes[, options])

target: 应用动画的目标元素
keyframes与options: 同上文直接创建动画中描述

基于另一个KeyframeEffect克隆

new KeyframeEffect(sourceKeyFrames)

用KeyframesEffect创建动画Animation

animation = new Animation(keyframesEffect)

复用实例：

//创建模板KeyframesEffect并不指定对象
const kyEffect = new KeyframesEffect(null, keyframes, 3000);

//分别克隆出ky1, ky2并指定对象
const ky1 = new KeyframesEffect(kyEffect);
ky1.target = elem1;
const ky2 = new KeyframesEffect(kyEffect);
ky2.target = elem2;

//分别创建并播放动画
const animation1 = new Animation(ky1).play();
const animaiotn2 = new Animation(ky2).play();