JS - Web Animations API (WAAPI)
...大约 3 分钟
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();
Powered by Waline v3.4.1