lottie实现动画效果

最新推荐文章于 2025-04-16 17:52:24 发布

№L.ing

最新推荐文章于 2025-04-16 17:52:24 发布

阅读量917

点赞数 1

文章标签： javascript 前端 html 动画

本文链接：https://blog.youkuaiyun.com/weixin_56819751/article/details/125900660

版权

本文介绍了如何在前端项目中通过lottie库来创建和使用动画。首先讲解了lottie的安装步骤，接着详细阐述了如何创建一个子组件封装lottie动画，然后在父组件中引入并使用这个子组件来展示动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.lottie的安装

npm install lottie-web --save

2.创建一个子组件，用来封装lottie动画

<template>
    <!-- 为容器绑定样式 -->
    <div :style="style" ref="lavContainer"></div>
</template>

<script>
//引入lottie
import lottie from 'lottie-web'
//引入json数据
import machinery from '../../../public/dgz/data.json'

export default {
    props: { //接收父元素传入的参数
        options: {
            type: Object,
            required: true
        },
        height: Number,
        width: Number
    },
    data() {
        return {
            style: {  //设置容器的样式
                // width: this.width ? `${this.width}px` : '40%', //如果父元素有传参则使用传参的值，没有则=40%
                // height: this.height ? `${this.height}px` : '100%',//如果父元素有传参则使用传参的值，没有则=100%
                overflow: 'hidden',//超出