当前位置:   article > 正文

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

vue3 lottie

什么是 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格式

 基本使用

  1. <script setup>
  2. import { ref, onMounted } from 'vue'
  3. import lottie from 'lottie-web'
  4. const lottieInstance = ref(null)
  5. const lottieInstance2 = ref(null)
  6. let imgName = 'Animation - 1712559820721.json'
  7. const getImg = () => {
  8. return new URL(`/src/assets/${imgName}`, import.meta.url).href;
  9. }
  10. const init = () => {
  11. // 读取动画容器
  12. const lottieContainer = document.getElementById('lottieId')
  13. if (!lottieContainer) return;
  14. // 实例化
  15. lottieInstance.value = lottie.loadAnimation({
  16. // UED 提供的 动画的 json 文件
  17. path: 'https://static-cdn.canyuegongzi.xyz/lf20/lf20_jv0xz0qi.json',
  18. // 渲染方式
  19. renderer: "svg",
  20. // 是否循环
  21. loop: true,
  22. autoplay: true, // 自动播放
  23. container: lottieContainer, // 用于渲染的容器
  24. });
  25. // 初始化第二个动画
  26. const lottieContainer2 = document.getElementById('lottieId2')
  27. if (!lottieContainer2) return;
  28. lottieInstance2.value = lottie.loadAnimation({
  29. path: getImg(),
  30. // path: './src/assets/Animation - 1712559820721.json',
  31. renderer: "svg",
  32. loop: true,
  33. autoplay: true,
  34. container: lottieContainer2
  35. });
  36. }
  37. const onStart = () => {
  38. lottieInstance.value?.play();
  39. lottieInstance2.value?.play();
  40. }
  41. onMounted(() => {
  42. init()
  43. onStart()
  44. })
  45. </script>
  46. <template>
  47. <div class="card">
  48. <img src="../assets/Animation - 1712559725257.gif" />
  49. <img src="../assets/Animation - 1712559820721.gif" />
  50. </div>
  51. <div style="display: flex;">
  52. <div id="lottieId"></div>
  53. <div id="lottieId2"></div>
  54. </div>
  55. </template>
  56. <style scoped>
  57. #lottieId {
  58. width: 300px;
  59. height: 300px;
  60. }
  61. #lottieId2 {
  62. width: 300px;
  63. height: 300px;
  64. }
  65. </style>

文章参考自

http://t.csdnimg.cn/fh4Ww

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/729859
推荐阅读
相关标签
  

闽ICP备14008679号