vue3 -- lottie-web使用

Lottie简介

官方介绍:Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovie导出为json格式),支持web、ios、android、flutter和react native。在web端,lottie-web库可以解析导出的动画json文件,并将其以svg或者canvas的方式将动画绘制在我们的页面上.

Lottie的优点

  1. 动画由设计使用专业的动画制作工具AE来实现,使动画实现更加方便,且效果更好
  2. 前端可以方便的调用动画,并对动画进行控制,减少前端动画工作量
  3. 设计制作动画,前端展现动画,分工明确
  4. 使用lottie方案,json文件大小比gif文件小很多,性能也会更好

vue3为例使用、当前基本环境 vue3(^3.3.4) + vite(^4.3.9)

  1. 安装 lottie-web 包
npm install lottie-web
  1. 将 ui 设计师给的 lottie 动画的 json 文件放入 src 文件夹中
    vue3 -- lottie-web使用_第1张图片

  2. 为 lottie 动画指定容器,并定义 anim 变量接收l

你可能感兴趣的:(项目实操,前端)