这 7 个免费 Lottie 动画网站，帮你省下一个设计师的工资

掘金前端

程序员大华

2026年2月7日 11:03

大家好，我是大华！

有时候写前端，会觉得：同样是写页面，为什么有些产品一看就很舒服，而自己写的界面，怎么看都觉得很笨重。

是他们用了什么高深的技术吗？

其实那些看起来很好看，很丝滑的动画，大多数项目只是用了 Lottie。

比如下面这种动画效果：

什么是Lottie动画？

Lottie 并不是某种前端框架，而是一种动画文件格式和播放方案。设计师在 After Effects 里把动画做好，导出成 JSON 文件，前端或客户端只需要通过 Lottie 播放器加载，就能把动画渲染出来。

和 GIF 或视频相比，Lottie 的体积更小、更轻量。它是矢量动画，体积小、放大不会失真，还可以通过代码控制播放、暂停、循环，甚至动态改颜色和速度。

怎么使用？

一、在 HTML / 原生页面中使用 Lottie

这是最简单、也是最通用的一种方式，适合官网、活动页、Demo 页面。

现在官方更推荐用 lottie-web + <lottie-player> 这种方式，基本零学习成本。

1️⃣ 引入 Lottie 播放器

直接在 HTML 里引入官方 CDN：

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

2️⃣ 在页面中使用

<lottie-player
  src="https://assets.lottiefiles.com/packages/lf20_x62chJ.json"
  background="transparent"
  speed="1"
  style="width: 300px; height: 300px;"
  loop
  autoplay>
</lottie-player>

这样，一个简单的动画就已经跑起来了，效果如下：

你可以简单理解为： Lottie = 一个自定义的 HTML 标签，src 指向 JSON 文件即可。

常用属性也很好记：

loop：是否循环
autoplay：是否自动播放
speed：播放速度
style：控制大小

如果你只是想加个加载动画、空状态动画，这种方式已经完全够用了。

二、在 Vue 项目中使用 Lottie

在 Vue 里，一般会直接使用 lottie-web，控制力更强，适合业务场景。

1️⃣ 安装依赖

npm install lottie-web

2️⃣ 在组件中使用

<template>
  <div ref="lottieContainer" style="width: 300px; height: 300px;"></div>
</template>

<script>
import lottie from 'lottie-web'

export default {
  mounted() {
    lottie.loadAnimation({
      container: this.$refs.lottieContainer,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: '/lottie/loading.json' // 本地或远程 JSON
    })
  }
}
</script>

这样动画会在组件挂载完成后自动播放。

这里有几个关键点，理解了基本就不怕用了：

container：动画挂载的 DOM
renderer：一般用 svg
path：Lottie JSON 文件路径
loop / autoplay：控制播放行为

三、在 Vue 里怎么控制动画？

这也是 Lottie 相比 GIF 最大的优势之一。

你可以拿到动画实例，然后随意控制：

const animation = lottie.loadAnimation({
  container: this.$refs.lottieContainer,
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: '/lottie/success.json'
})

// 手动播放
animation.play()

// 暂停
animation.pause()

// 停止
animation.stop()