lottie 动画在 vue 中的使用

最新推荐文章于 2024-09-02 10:35:52 发布
最新推荐文章于 2024-09-02 10:35:52 发布
阅读量1.3k 收藏 21
点赞数 22
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Perback/article/details/135273766
版权
文章讲述了作者在项目中如何解决GIF动画在Git中显示锯齿的问题，转向使用Lottie库，一个支持跨平台的动画渲染解决方案。作者详细介绍了Lottie的安装、使用方法，以及在Vue中封装的基础组件，展示了其在提升用户体验中的作用。
摘要由CSDN通过智能技术生成

前言

最近我所负责的项目中采用了动画效果，最早使用 gif 来实现。然而，在实践过程中，我发现 gif 格式的动画在 git 中出现了明显的锯齿感，这让我非常困扰。为了追求更完美的表现效果，我最终选择了 lottie 来实现我的动画需求。我深知动画效果的呈现对于用户体验至关重要，因此我非常认真地对待每一个细节，希望通过我的努力，为用户带来更加流畅、自然的视觉体验。

Lottie 简介

Lottie 是一个适用于 Android、iOS、Web 和 Windows 的库，它使用 Bodymovin 解析导出为 JSON 的 Adobe After Effects 动画，并在移动设备和 Web 上原生渲染它们！

这是第一次，设计师可以创建和发布精美的动画，而无需工程师精心手工重新创建它们。他们说一图胜千言，请看示例：

上述动画是在 After Effects 中创建的，可以使用简单的 JSON 文件在所有平台上进行本机渲染。

lottie 的安装

# 由于在 web 端，所以安装的是 lottie-web
pnpm add lottie-web

lottie 的使用

简单介绍 lottie 的使用

import lottie from 'lottie-web'
import animationData from '
最低0.47元/天 解锁文章
不爱敲代码的小胡
关注
Vue 3中使用 Lottie 动画
xiangzhihong8的专栏
07-14 924
Lottie是由Airbnb开源的面向Android、iOS、Web和Windows的动画库，开发者可以使用它在Web、iOS、Android等平台上实现高性能的体验丰富的矢量动画。在早期的前端开发中，Flash是网页动画之王，不过它的规范约束随意，造成很多时设计出来的产品都无法符合用户体验要求。随着Flash动画的消失，HTML网页开发的主流技术，成为前端开发的技术标准，不过在HTML网页上进行动画开发其成本也是相当高的。
Vue中使用lottie动画加载json文件
qq_41154522的博客
09-01 952
Vue中使用lottie动画加载json文件。
vue lottie使用
Stevetagelian的博客
04-03 190
3.使用时注意模板的渲染有没有报错，有时会影响动画的展示。
vue3中lottie-web封装组件和api的使用
前端程序媛_Ying博客
04-18 1253
vue3中lottie-web封装组件和api的使用
引入动画新纪元 —— Vue-Lottie 动画组件
gitblog_00650的博客
08-09 756
引入动画新纪元 —— Vue-Lottie 动画组件 vue-lottieRender After Effects animations on Vue based on Bodymovin项目地址:https://gitcode.com/gh_mirrors/vu/vue-lottie 一、项目介绍 Vue-Lottie 是一款基于 Vue 的 Lottie 动画组件库。它为开发人员提供了一个简...
在vue项目中使用Lottie动画(随看随用)
like896369216的博客
05-10 4718
LottieFiles官网注册登录、vue-lottie介绍、 无法加载reCaptcha
【vue】vue如何使用lottie
搬砖小鱼，请多指教呦
01-19 1983
一般比较大的动画 gif 图就有很多弊端，首先是太大，其次就是有毛边，观感不太好，所以如果使用的话更推荐使用lottie 1-安装 npm install lottie-web 2- 在需要使用的页面引入 import lottie from 'lottie-web' 3-书写Lottie函数 // lottie动画渲染 intLottie(domId, path, loop = false) { // 渲染主图按钮动画 let lott
vue中使用Lottie动画
Rainy_X的博客
04-25 2952
一. 安装vue-lottie包 npm install --save vue-lottie 二. 在main.js文件中引入vue-lottie插件 全局引入 // main.js import lottie from 'vue-lottie' Vue.component('lottie',lottie) 局部引入 import lottie from 'vue-lottie' export default{ components: { lottie }, } 三. 文件中引入lottie资
vue中如何使用lottie动画
wxiao_xiao_miao的博客
03-02 4366
lottie是一个跨平台的动画库，通过AE（After Effects）制作动画，再通过 AE 插件 Bodymovin 导出 json 文件，最终各个终端解析这个Json文件，还原动画。 下面以vue3为例进行说明： 1. 安装 lottie-web 包 npm i lottie-web -S 2. 将 ui 设计师给的 lottie 动画的 json 文件放入 src 文件夹中 3. 若为本地动画则在需要使用的 vue 文件中引入 json 文件（网络动画则不需要引入） imp..
【笔记】在vue项目中使用Lottie动画
丘山小月半的博客
07-03 649
1，下载vue-lottie包 npm install --save vue-lottie or yarn add vue-lottie 2，在main.js中引入并注册为全局组件 //引入 import lottie from 'vue-lottie'; //注册为全局组件 Vue.component('lottie', lottie) 3，页面使用 //----3.1 引入json文件（就是lottie动画资源）---- import * as lottieJson from "../assets
lottie 动画插件使用
huafeng1999的博客
08-07 716
首先我们需要动画师输出给我们一个 JSON 动画文件 然后我们的主角 lottie.js 要出场了 我们通过 npm i lottie-web -s 下载 lottie.js 下载完成后 我们就开始使用吧 html 代码块 <!-- 包含动画的dom元素 --> <div id="animation"></div> <button class="stop"...
如何在vue里添加好看的lottie动画
10-18
在Vue.js应用中添加美观的Lottie动画是一个增强用户体验的好方法。Lottie是一个强大的库，它能够将Adobe After Effects创建的动画导出为JSON文件，然后在Web上轻松播放。以下是一个详细的步骤指南，帮助你在Vue项目...
Vue中使用lottie实现动画所需资源
08-14
Vue中使用lottie实现动画所需资源
【Vue】lottie的使用
学无止境
06-15 382
【Vue】lottie的使用
vue使用lottie-web实现web动画
@必意玲
10-23 2335
Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovie导出为json格式）,支持web、ios、android、flutter和react native。在web端，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制在我们的页面上.找到我们想要的动画，然后点击后，弹出窗口，点击下载，格式为JSON。然后就能把这个动画的json数据用到我们自己的项目里边去了。
Vue-Lottie 使用教程
gitblog_00275的博客
08-09 946
Vue-Lottie 使用教程 vue-lottieRender After Effects animations on Vue based on Bodymovin项目地址:https://gitcode.com/gh_mirrors/vu/vue-lottie 项目介绍 Vue-Lottie 是一个基于 Vue.js 的库，用于渲染 After Effects 动画。它依赖于 Bodymov...
【vue Lottie】lottie在vue项目中的使用心得
最新发布
weixin_57208584的博客
09-02 602
使用的时候，不要一股脑的复制粘贴过来，而是应该进行如下步骤的清洗。assets属性下，引用的图片资源对象中的p属性下，表示路径。，并根据其click等事件的触发，调用上述这些实例方法，来。，让图片资源经过webpack/vite的打包处理。：在lottie.json存放的动画数据中，我们可以。一些很大的背景图片（不影响主体内容展示的）可以放在。可以控制Lottie的大小、速度、展示方向等等。能用原生实现的动效，就不要切Lottie，同样的图片依赖素材，减小依赖图片的大小。等方法控制Lottie动画的显示。
lottie-web 在vue3中使用
08-26
在Vue 3中使用Lottie-web相对简单。首先，你需要确保已经安装了Lottie-web库，你可以通过npm或yarn来安装它。一旦安装完成，你就可以在Vue 3项目中使用它了。 在你的Vue 3项目中，首先需要在你的组件中导入Lottie-web库。你可以在组件的头部添加以下代码来导入Lottie-web： import lottie from 'lottie-web'; 接下来，你可以在组件的methods或mounted函数中使用Lottie-web来加载和播放动画。例如，你可以在mounted函数中添加以下代码： mounted() { this.loadAnimation(); }, methods: { loadAnimation() { const element = document.getElementById('lottie-animation'); if (element) { const animation = lottie.loadAnimation({ container: element, renderer: 'svg', loop: true, autoplay: true, path: 'path/to/your/animation.json' // 你的动画文件的路径 }); } } } 在上面的代码中，我们首先通过getElementById获取到一个DOM元素，它将用作动画的容器。然后，我们使用Lottie-web的loadAnimation函数来加载动画，传递了一些选项参数，比如renderer，loop和autoplay。最后，我们指定了动画文件的路径。 这只是一个简单的例子，你可以根据你的需求来调整代码。请确保在你的组件模板中有一个对应的DOM元素，它将被用作动画的容器，例如： <template> <div id="lottie-animation"></div> </template> 这样你就可以在Vue 3中使用Lottie-web了。记得根据你的具体需求来进行相应的配置和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值