随着网页效果越来越绚丽，页面的动效也越来越复杂，各种动画方案层出不穷。

目前常规的几种动画方案比如「Gif动图、CSS3动画、SVG动画、Canvas动画各有利弊」。

比如说Gif动图，包含大量颜色或长时间动画的Gif图片是相当「大」的，在系统中加载速度非常慢。并且GIF只支持256色，可能导致图像「失真」或者不清晰。

Lottie动画

Lottie 是一种基于 「JSON」 的轻量级动画格式，它由 Airbnb 开发并开源，专门用于在网页和移动应用中高效地渲染高质量的矢量动画。

简单总结一下Lottie动画的优点大概是：

1. 轻量级：Lottie 动画是基于 JSON 文件描述的矢量动画，体积通常远小于Gif。并且由于是矢量格式，Lottie 动画可以无损缩放，适合响应式设计。
2. 高性能：Lottie 使用 SVG 或 Canvas 渲染，浏览器负担小，动画流畅，尤其适合移动端。并且不会占用大量内存或 CPU 资源。
3. 开发效率高：动画可以直接由AE导出(Bodymovin 插件)，开发者无需过多调整。
4. 交互好：可以通过 JavaScript 控制动画播放、暂停、进度控制等，甚至支持与用户行为联动（如滚动触发、点击播放）。支持动态更改颜色、文本等属性（需插件或定制）。
5. 兼容性好：Lottie 提供了 Web、iOS、Android、React Native、Flutter 等多个平台的官方 SDK 和社区支持。并且在各个平台上的表现非常一致！

对比

实战

简单写一个Lottie动画在Vue中的实现(需要使用 lottie-web 或者 vue-lottie)，具体代码如下：

npm install vue-lottie --save

<template>
    <div class="wrap">
        <lottie v-if="isStart" :options="defaultOptions" :height="400" :width="400" />
    </div>
</template>

<script>
import Lottie from 'vue-lottie';
export default {
    components: {
        Lottie
    },
    data() {
        return {
            isStart: false,
            animationData: null,
        };
    },
    computed: {
        defaultOptions() {
            return {
                animationData: this.animationData,
                loop: true,
                autoplay: true
            };
        }
    },
    mounted() {
        fetch('/all.json')
            .then(response => response.json())
            .then(data => {
                this.animationData = data;
                this.isStart = true;
            });
    }
};
</script>

优化

在项目中使用 「Lottie 动画」 时，虽然 Lottie 本身具有体积小、渲染高效等优点，但如果动画文件较多或较大，仍可能对页面加载速度和性能产生影响。

❝

「省流」:“按需加载 + 压缩 + 缓存” 是最核心的 Lottie 优化组合。

❞

优化基本上有以下几种方案：

「按需加载」

实现方式：

• 使用 IntersectionObserver 监听元素是否进入视口。
• 或者结合 Vue 的 v-if 控制组件的渲染时机。

mounted() {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      this.loadAnimation(); // 加载 JSON 文件并触发动画
      observer.disconnect();
    }
  }, { threshold: 0.1 });

  observer.observe(this.$el);
}

「预加载关键动画」

对于首页或用户首次访问必须展示的关键动画，提前进行异步加载，但延迟播放。

实现方式：

• 在 App 初始化阶段就通过 fetch() 或 import() 加载这些动画数据。
• 存储在 Vuex 或全局状态中，避免重复请求。

async mounted() {
  const response = await fetch('/animations/home-hero.json');
  this.$store.commit('setHeroAnimation', await response.json());
}

「压缩JSON文件」

Lottie JSON 文件通常包含大量冗余信息（如注释、未使用的图层属性），可以通过工具压缩减小体积。

可以考虑使用LottieFiles Optimizer、lottie-minify进行压缩。

实现方式：

npx lottie-minify animation.json > optimized.json

「CDN托管」

将 JSON 文件上传到 CDN，利用其CDN加速资源分发。

「降低动画播放质量」

在低端设备或慢速网络下，降低动画帧率或简化动画效果，以提升性能。

实现方式：

• 根据设备性能设置不同动画版本（低配版 / 高配版）
• 或者动态调整 animationSpeed

this.anim.setSpeed(0.5); // 降低播放速度，节省性能

阅读原文：原文链接