Animation Api

CSS实现动画时，在一些交互动画上并不灵活，可以使用js的一套Animation Api来完成动画的制作

1.animate()

1.1 语法：

element.animate(keyframs, options)

返回一个animation动画实例

1.2 参数keyframs

作用：用来定义动画的关键帧

keyframes有两种形式，一种是数组形式，一种是对象形式。

关键帧的偏移可以通过提供一个offset来指定

• 值必须是在 [0.0, 1.0] 这个区间内，且须升序排列
• 简单理解就是进度的百分比的小数值。

数组形式

element.animate([ 
    { opacity: 1 },
    { opacity: 0.1, offset: 0.7 },
    { opacity: 0 } 
],2000);

对象形式

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

以上写法与以下css写法一个意思

@keyframes bling {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 0.1;
    }
    100% {
        opacity: 0;
    }
}

1.3 参数options

作用：对象类型，用来定义动画过程中可以有哪些操作，相当于css中的animation属性

其属性值与css各属性值相同css动画常见属性

参数名	含义
delay	延迟动画开始的毫秒数。默认为0。
direction	动画运动方向
duration	动画每次迭代完成所需的毫秒数。默认为0
easing	动画曲线函数，可以自定义
endDelay	动画结束后要延迟的毫秒数。这主要用于基于另一个动画的结束时间对动画进行排序。默认为0。
fill	动画结束后属性值的状态
iterationStart	描述动画应该在迭代的什么时候开始。0.5表示在第一次迭代中途开始，使用这个值集，一个有两次迭代的动画将在第三次迭代中途结束。默认为0.0
iterations	动画应该重复的次数。默认值为1，也可以取一个值 Infinity，使其在元素存在期间重复。
composite	动画和其他单独的动画之间组合。 这是个高级特性，默认是replace，就是替换提起的动画。
iterationComposite	动画的属性值变化如何在每次动画迭代时累积或相互覆盖

参照css属性

Web Animation API	CSS
delay	animation-delay
duration	animation-duration
iterations	animation-iteration-count
direction	animation-direction
easing	animation-timing-function
fill	animation-fill-mode

注意参数设置值上的区别

1. duration 参数只支持毫秒
2. 迭代次数无限使用的是 JS的Infinity，不是字符串 "infinite"
3. 默认动画的贝塞尔是linear，而不是css的ease

1.4 getAnimations()

我们通过Element.animate或者创建Animation给Element添加很多动画，通过这个方法可以获得所有Animation的实例。以数组形式存放

语法：

element.getAnimations()

通常用来当取消前面已经播放过的动画实例

element.getAnimations().forEach((item) => {
    item.cancel();
});

2.动画实例方法

实例方法	描述
cancel()	取消动画
finish()	完成动画
pause()	暂停动画
paly()	播放动画
reverse()	动画逆转播放

语法：

const animate=ball.animate(keyframs,options)

animate.play()
// ...

3.事件监听

Animation事件监听有两种方式，dom监听和promise监听

3.1 dom监听

animation.onfinish = function() {
  element.remove();
}

animation.addEventListener("finish", function() {
  element.remove();
}

3.2 promise监听

animation.finished.then(() =>
  element.remove()
)

所有动画完成后

const animates =element.getAnimations()

Promise.all(animates.map(ani => ani.finished))
    .then(function() {           
    	// do something cool 
	})

3.3 常用事件回调

监听事件	描述
oncancel	监听动画取消
onfinish	监听动画完成
onremove	监听动画删除

4.KeyframeEffect和Animation

KeyframeEffect和Animation是web Animations API 两个核心的对象

1. KeyframeEffect 描述动画属性
2. Animation 控制播放

4.1 KeyframeEffect

作用：用来定义动画的关键帧

语法：

const keyframs = new KeyframeEffect(target, keyframes, options)

参数：

• target：需要指定动画的dom元素
• keyframes、options与上方3.1.2、3.1.3一致

4.2 Animation

作用：KeyframeEffect返回一个animation动画实例，由Animation对象实例来控制动画

语法：

const keyframs = new KeyframeEffect(target, keyframes, options)

const ani = new Animation(keyframs);

ani.play()
ani.pause()
// ...

Animation 实例对象的方法与上方3.2一致

gsap：用空学https://gsap.framer.wiki/