跳至主要內容

JS - Web Animations API (WAAPI)

Kamimika...大约 3 分钟JS动画APIJS笔记

Web Animations APIopen in new window

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: 应用动画的目标元素
keyframesoptions: 同上文直接创建动画中描述

基于另一个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();
上次编辑于:
贡献者: wzh
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.4.1