Web Animation API - 技术栈

前言

Web Animation API 出来很久了，是时候了解使用它了

其可以在 javascipt 中直接编写我们的动画代码，这样在一些特殊场景，就不用来回折腾 css 文件了，尤其是写 react 的，很多人使用 tailwind css 后，基本上就舍弃 css，直接配合 style 快速完成项目了，做动画还要专门搞一个 css，也会让人略微嫌弃，有了 Web Animation API 就可以解决这些小痛点了，当然这也是众多痛点当中一个

可参考内容：MDN、web-animations-js、web-animations-js(npm)

下面介绍 Web Animation API 以及他的兼容性问题，可以根据情况自行选择

Web Animation API 简介

基础使用

js 复制代码

//数组中的每个对象代表一个动画状态，也就是我们的动画动作
//其中 offset 就是 keyframes 的百分比
const animationActions = [
    {
        transform: "translateX(0)",
        background: "red",
    },
    {
        offset: 0.8,
        transform: "translateX(100px)",
        background: "red", 
    },
    {
        transform: "translateX(100px)",
        background: "blue",
    },
]; 

const dom = document.querySelector("#animation-div");

//创建动画
const animation = dom!.animate(animationActions, {
    duration: 4000,
    fill: "forwards",
});

//执行和暂停动画
animation.play();
// animation.pause()

//动画结束后的回调，有时候会需要
animation.finished.then((animation) => {
    //需要做防抖，更改多个属性会回掉多次
    console.log("动画结束了", animation);
});

animation options 简介

创建动画有些options，使用和css动画的参数很像，写过css 的应该熟悉

js 复制代码

const options = {
    // 动画执行次数
    iterations: Infinity,
    // 动画开始时间点
    iterationStart: 0,
    // 动画开始之前的延迟
    delay: 0,
    // 动画结束之后的延迟
    endDelay: 0,
    // 动画是否在下一周期逆向播放
    direction: "alternate",
    // 动画时长
    duration: 1000,
    // 动画前后保持的状态
    fill: "forwards",
    // 动画缓动类型
    easing: "ease-in-out",
};

对应下一下，是不是很像

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

创建动画的 animation 的一些属性，总有你需要的，可以自己点进去看看属性

animation api 罗列

js 复制代码

interface Animation extends EventTarget {
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/currentTime) */
    currentTime: CSSNumberish | null;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/effect) */
    effect: AnimationEffect | null;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/finished) */
    readonly finished: Promise<Animation>;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/id) */
    id: string;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/cancel_event) */
    oncancel: ((this: Animation, ev: AnimationPlaybackEvent) => any) | null;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/finish_event) */
    onfinish: ((this: Animation, ev: AnimationPlaybackEvent) => any) | null;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/remove_event) */
    onremove: ((this: Animation, ev: AnimationPlaybackEvent) => any) | null;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/pending) */
    readonly pending: boolean;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/playState) */
    readonly playState: AnimationPlayState;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/playbackRate) */
    playbackRate: number;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/ready) */
    readonly ready: Promise<Animation>;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/replaceState) */
    readonly replaceState: AnimationReplaceState;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/startTime) */
    startTime: CSSNumberish | null;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/timeline) */
    timeline: AnimationTimeline | null;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/cancel) */
    cancel(): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/commitStyles) */
    commitStyles(): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/finish) */
    finish(): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/pause) */
    pause(): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/persist) */
    persist(): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/play) */
    play(): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/reverse) */
    reverse(): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/updatePlaybackRate) */
    updatePlaybackRate(playbackRate: number): void;
    addEventListener<K extends keyof AnimationEventMap>(type: K, listener: (this: Animation, ev: AnimationEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof AnimationEventMap>(type: K, listener: (this: Animation, ev: AnimationEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

兼容性

API 原生的兼容还是比较差的，在多个浏览器支持的版本要不是偏高，就是不能完全支持，特别是在移动端（一般来说时间越往后支持性也就越好，现在看自己需要，我在疫情期间就已经看到这个库了，现在可能好很多吧），官方针对这个问题提供了针兼容性 Polyfill 库，可通过npm 直接安装

js 复制代码

//script导入
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>

//import 导入
import 'web-animations-js';

性能

CSS3 和 Web Animation API 在大多数情况下性能差距不是特别明显，但针对个别属性下，两者会各有优势，比如有 transform 或 opacity 属性的时候，Web Animation API 会调用浏览器主线程以外的线程去渲染该动画，在性能上会更有优势

使用体验以及参考

他的性能比一些三方库的平均效率要高的，当然也看自己的动画实现，碰到复杂动画，还是最好借助三方库，毕竟自己实现是需要一定想象力和基础功底的

此外，比起 css 动画，碰到稍微复杂一些的还需要使用到 css 变量，使用 Web Animation API 后，就不需要使用 css 变量了，代码可能看着更舒服了

最后

Web Animation API 就介绍到这里了，想知道更多东西，可以参考 MDN，实际上做一些普通动画能用到的确实不多