Lottie动画

梅山老幺

已于 2024-08-26 08:43:59 修改

阅读量919

点赞数 14

CC 4.0 BY-SA版权

分类专栏：前端开发插件文章标签：前端

于 2024-08-26 00:43:13 首次发布

本文链接：https://blog.csdn.net/weixin_63443072/article/details/141537550

做开发，总会遇到一些很难实现的动画，前端做不了怎么办。那就让AE办。前端只需要使用包，就可以加载动画，好过自己去写，减少开发时间成本。

Lottie这个包，就是懒人神器，并且可以用在网页和安卓项目中，直接爽死好吧。这边直接说使用步骤。

安装

yarn add lottie-web

使用

基本使用

安装好后，就可以直接使用这个包，以vue3为例：

<template>
  <div id="animation" style="width: 800px;height: 800px;"></div>
</template>

<script setup>
import Lottie from 'lottie-web'
import { onMounted } from 'vue'

onMounted(() => {
  Lottie.loadAnimation({
    container: document.getElementById('animation'),// 放置在哪个元素上播放
    renderer: 'svg',//  'svg' / 'canvas' / 'html' 来设置渲染器
    loop: true,// 循环：true / false / number
    autoplay: true,//  true / false 准备好后立即开始播放
    path: '/public/Untitled.json',// 动画对象的相对路径
  })
})
</script>

<style></style>