vue-lottie 的使用最全,最真实,最新

本文将详细介绍如何在Vue项目中使用vue-lottie组件来实现动态动画效果。首先,你需要准备好AE(After Effects)导出的bodymovin json文件或从lottieFiles官网下载资源,将其放入项目的asset文件夹。接着,通过局部引入vue-lottie组件并配置json文件路径,即可在自定义的Vue组件中展示动画效果。
摘要由CSDN通过智能技术生成

准备资源

1.AE 自己导出 搭配插件 bodymovin
2.lottieFiles 官网下载,这里下载json 文件,存放进vue 项目 asset 文件夹下
在这里插入图片描述

下载组件支持

npm install --save vue-lottie

引入,两种方式,这里就写局部引用吧(自定义vue 文件)

import lottie from "lottie-web";
或者 import lottie from "vue-lottie";

详情代码,如下,重要的是先出效果

<template>
  <div>
      <div>
        <!-- 先出效果,剩下的参数可以在官网看
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值