vue3前端加载动画 lottie-web 的简单使用案例

什么是 Lottie
Lottie 是 Airbnb 发布的一款开源动画库，它适用于 Android、iOS、Web 和 Windows 的库。 它提供了一套从设计师使用 AE（Adobe After Effects）到各端开发者实现动画的工具流。

UED 提供动画 json 文件即可， 开发者就可以直接运用在 iOS、Android、Web 和 React Native之上，无需其他额外操作。

 

Lottie-Web 是 Lottie 在 web 端的技术方案。

Lottie-Web 提供了 SVG、Canvas 和 HTML 三种渲染模式，一般使用 Svg 或 Canvas 即可。

1、SVG 渲染器支持的特性最多，也是使用最多的渲染方式。并且 SVG 是可伸缩的，任何分辨率下不会失真;
2、Canvas 渲染器就是根据动画的数据将每一帧的对象不断重绘出来;
3、HTML 渲染器受限于其功能，支持的特性最少，只能做一些很简单的图形或者文字，也不支持滤镜效果。

 安装依赖

npm install lottie-web --save

 从官网下载了一个json文件示例

LottieFiles: Download Free lightweight animations for website & apps.

也可以下载gif格式

 基本使用

  
    
    
  
  
    
    
  





#lottieId {
  width: 300px;
  height: 300px;
}

#lottieId2 {
  width: 300px;
  height: 300px;
}

文章参考自

http://t.csdnimg.cn/fh4Ww

lottie-web，lottie动画使用详解_动画_jasmine 莉-华为开发者联盟HarmonyOS专区