位置: IT常识 - 正文

前端使用lottie-web,使用AE导出的JSON动画贴心教程(前端使用vue)

编辑:rootadmin
前端使用lottie-web,使用AE导出的JSON动画贴心教程 Lottie简介

推荐整理分享前端使用lottie-web,使用AE导出的JSON动画贴心教程(前端使用vue),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端使用的框架,前端使用docker,前端使用了什么技术,前端使用了什么技术,前端使用vue,前端使用了什么技术,前端使用什么语言,前端使用什么语言,内容如对您有帮助,希望把文章链接给更多的朋友!

官方介绍:Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovie导出为json格式),支持web、ios、android、flutter和react native。 在web端,lottie-web库可以解析导出的动画json文件,并将其以svg或者canvas的方式将动画绘制在我们的页面上.

Lottie的优点动画由设计使用专业的动画制作工具AE来实现,使动画实现更加方便,且效果更好前端可以方便的调用动画,并对动画进行控制,减少前端动画工作量设计制作动画,前端展现动画,分工明确使用lottie方案,json文件大小比gif文件小很多,性能也会更好lottie-web 在前端的使用安装lottie-webnpm install lottie-web复制代码lottie-web的基本用法import lottie from 'lottie-web'const animation = lottie.loadAnimation({ container: document.getElementById('domId'), // 绑定dom节点 renderer: 'svg', // 渲染方式:svg、canvas loop: true, // 是否循环播放,默认:false autoplay: true, // 是否自动播放, 默认true animationData: // AE动画使用bodymovie导出为json数据})json简单解释{ "v": "5.1.13", // bodymovin 版本 "fr": 30, // 帧率 "ip": 0, // 起始关键帧 "op": 20, // 结束关键帧 "w": 150, // 视图宽 "h": 130, // 视图高 "nm": "鹅头收起动画", // 名称 "ddd": 0, // 3d "assets": [], // 资源集合 "layers": [], // 图层集合 "masker": [] // 蒙层集合}lottie-web 常用方法 前面我们就初始化了一个lottie对象了. 然后我们介绍它的一些常用方法animation.play(); // 播放,从当前帧开始播放animation.stop(); // 停止,并回到第0帧animation.pause(); // 暂停,并保持当前帧animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止isFrame(默认false)指示value表示帧还是时间(毫秒)animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放animation.goToAndStop(30, true); // 跳转到第30帧并停止animation.goToAndPlay(300); // 跳转到第300毫秒并播放animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组,forceFlag表示是否立即强制播放该片段animation.playSegments([10,20], false); // 播放完之前的片段,播放10-20帧animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧animation.setSpeed(speed); // 设置播放速度,speed为1表示正常速度animation.setDirection(direction); // 设置播放方向,1表示正向播放,-1表示反向播放animation.destroy(); // 删除该动画,移除相应的元素标签等。Lottie-web 常用的事件animation.addEventListener('data_ready', () => {}) // 动画数据加载完毕animation.addEventListener('config_ready', () => {}) // 完成初始配置后animation.addEventListener('data_failed', () => {}) // 加载动画数据失败animation.addEventListener('loaded_images', () => {}) // 所有图片加载成功或者失败animation.addEventListener('DOMLoaded', () => {}) // 将元素添加到DOM后* complete: 播放完成(循环播放下不会触发)* loopComplete: 当前循环下播放(循环播放/非循环播放)结束时触发* enterFrame: 每进入一帧就会触发,播放时每一帧都会触发一次,stop方法也会触发* segmentStart: 播放指定片段时触发,playSegments、resetSegments等方法刚开始播放指定片段时会发出,如果playSegments播放多个片段,多个片段最开始都会触发。* data_ready: 动画json文件加载完毕触发* DOMLoaded: 动画相关的dom已经被添加到html后触发* destroy: 将在动画删除时触发Lottie的免费资源

之前我们说过Lottie的动画是通过AE制作好了动画后,再使用bodymovie导出为json格式。其实有一个网站,它提供了一些免费的动画(当然也有付费的)直接有我们需要的动画json数据.

如下面的动图, 我们找到我们想要的动画,然后点击后,弹出窗口,点击下载,格式为JSON。然后就能把这个动画的json数据用到我们自己的项目里边去了.

好了介绍完了它的用法后,我们现在就去vue中去做一个实战

在vue中使用lottie使用vite跑vuenpm init @vitejs/app <project-name>复制代码安装lottie-webnpm install lottie-web复制代码封装一个基础的组件lottie.vue, 主要就是初始化好lottie对象,然后把对象传递出去给其他组件用<template> <div :style="style" ref="lavContainer"></div></template>

<script> import lottie from ‘lottie-web’

export default { name: ‘lottie’, props: { options: { type: Object, required: true, }, height: Number, width: Number, },

computed: { style() { return { width: this.width ? <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.width}</span>px : ‘100%’, height: this.height ? <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.height}</span>px : ‘100%’, } }, },

mounted() { this.anim = lottie.loadAnimation({ container: this.KaTeX parse error: Expected 'EOF', got '}' at position 798: …ta</span>, }̲) <span cla…emit(‘animCreated’, this.anim) },

unmounted () { this.anim && this.anim.destroy() } } </script>

复制代码

基于上面的组件,我们封装一个更具象一点的组件clickIcon,这个组件也是通用组件,增加了点击后,动画交互需要怎么走向等逻辑.<template> <div class="clickIcon"> <div class="iconBox" :style="{ width: width + 'px', height: height + 'px' }" > <slot name="svg" v-bind:data="{ toggle, flag, iconWidth, iconHeight }"></slot> <lottie @click="toggle" :class="{ show: flag === true || !defaultSlot }" class="like" style="display: none;" :options="options" :height="height" :width="width" v-on:animCreated="handleAnimation" /> </div> </div></template>前端使用lottie-web,使用AE导出的JSON动画贴心教程(前端使用vue)

<script> import { computed, ref, defineComponent } from “vue”; import Lottie from “./lottie.vue”; let anim = null /**

点击icon然后播放一段动画的组件适合收藏、点赞等小功能 */

export default defineComponent({ name: “clickIcon”, props: { // 宽度 width: { type: Number, default: 100, }, // 高度 height: { type: Number, default: 100, }, // 初始化Lottie需要的参数 options: { type: Object, default: () => {}, }, // 是否需要一个插槽,显示一个默认的图标 defaultSlot: { type: Boolean, default: true }, // 从外面传递的一个点击后需要的交互效果 toggleFun: { type: Function, default: null } }, components: { lottie: Lottie, }, emits: [‘init’], setup(props, { emit }) { // 动画速度 const animationSpeed = 2 // 点击交互标识 let flag = ref(false); // 图标高度 const iconWidth = computed(() => { return props.width; }); // 图标宽度 const iconHeight = computed(() => { return props.height; }); // 点击图标交互 const toggle = function() { if (!props.defaultSlot) { props.toggleFun && props.toggleFun(anim) } else { flag.value = !flag.value; if (flag.value) { anim.play(); } else { anim.stop(); } } }; // 获取anim对象 const handleAnimation = function(animated) { anim = animated; onSpeedChange() emit(‘init’, animated) } // 停止动画 const stop = function() { anim.stop(); } // 播放动画 const play = function() { anim.play(); } // 暂停动画 const pause = function() { anim.pause(); } // 控制播放速度 const onSpeedChange = function() { anim.setSpeed(animationSpeed); } return { iconWidth, iconHeight, handleAnimation, flag, toggle, stop, play, pause }; }, }); </script>

<style scoped> .iconBox { position: relative; } .show { display: inline-block !important; } .hidden { display: none !important; } .like { cursor: pointer; } .icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> 复制代码

接下来我们就写一个喜欢组件like.vue,如之前我们看到的效果 先把下载的动画json文件,放到资源文件目录,然后我们再用代码调用它使用.

<template> <lottie class="like" :options="defaultOptions" :height="height" :defaultSlot="false" :width="width" @init="init" :toggleFun="toggle" ref="lottie" > </lottie></template>

<script> import Lottie from “…/common/clickIcon.vue”; import animationData from “/public/like.json”;

export default { name: “app”, components: { lottie: Lottie, }, props: { width: { type: Number, default: 60, }, height: { type: Number, default: 60, }, }, methods: { init (animation) { animation && animation.goToAndStop(0, true) }, toggle (animation) { if (this.toggleFlag) { animation.playSegments([50, 90], true); // 从50帧播放到最后 } else { animation && animation.playSegments([0, 50], true); // 从第0帧播放到50帧 } this.toggleFlag = !this.toggleFlag } }, data() { return { toggleFlag: false, defaultOptions: { name: “like”, animationData: animationData, autoplay: false, loop: false, } }; } }; </script>

<style scoped> .hidden { display: none; } </style>

复制代码

上边的效果之所以这样做,是因为我们下载的‘喜欢’动画的json文件,它是由两个状态组成的, 0-50帧是由未选中到选中状态的动画,50->90帧是选中状态->未选中状态的动画. 具体多少帧到多少帧可以从网站下载json文件那个窗口下面的进度去看到的.

使用喜欢组件<template> <div id="app"> <like></like> </div></template>

<script> import { defineComponent } from “vue”; import like from “./components/like/index.vue”;

export default defineComponent({ components: { like, }, }); 复制代码

具体效果如下

结语

以上就是利用Lottie在vue中实现一个喜欢组件了。 其实目前只是写了这么一个demo而已,大家有兴趣的话,可以把它再实现完一下,现在组件还没有去记录一下组件的默认状态, 它可能默认就是被选中的状态. 另外我们这一次拿到的动画组件刚好是有选中和未选中两种状态的,在之前给大家介绍的免费下载动画json文件的网站里边还有一些动画是只给到一个选中的动画效果,并没有未选中的状态,这时候我们可以自己去找一个类似的svg图标,然后作为默认的图标,点击后,触发选中的动画效果. 这种场景碰到的极少,如果是公司项目的话,可以要求美工去做两个状态的动画效果,如果是自己的个人项目,然后碰到了很喜欢的免费动画,然而它只提供了一个状态的话,这时候才有用。 我在组件其实也把这种情况考虑进去了,就是defaultSlot把这个属性设置成true, 然后在写组件的时候,添加一个插槽作为一个默认组件.

写在最后

大家可以给个点赞鼓励一下萌新嘛? 哈哈哈, 先谢过了~

本文链接地址:https://www.jiuchutong.com/zhishi/297517.html 转载请保留说明!

上一篇:小满nestjs(第二十七章 nestjs typeOrm关系)(小满内容)

下一篇:yolox改进--添加Coordinate Attention模块(CVPR2021)(yolo改进方法)

  • iphone13Safari浏览器怎么长截屏(iphonesafari浏览器)

    iphone13Safari浏览器怎么长截屏(iphonesafari浏览器)

  • 沃租乐l稻壳怎么解除(沃租乐l稻壳怎么解除它订单)

    沃租乐l稻壳怎么解除(沃租乐l稻壳怎么解除它订单)

  • 支付宝数字藏品如何交易(支付宝数字藏品在哪看)

    支付宝数字藏品如何交易(支付宝数字藏品在哪看)

  • 手机屏幕掉了还能修吗(手机屏幕掉了还能继续用吗)

    手机屏幕掉了还能修吗(手机屏幕掉了还能继续用吗)

  • 华为手机没有4g网络了怎么回事(华为手机没有4G开关)

    华为手机没有4g网络了怎么回事(华为手机没有4G开关)

  • 华为手机怎么开反色(华为手机怎么开空调遥控器)

    华为手机怎么开反色(华为手机怎么开空调遥控器)

  • qq闪图选项没了(手机qq闪图功能怎么没有了)

    qq闪图选项没了(手机qq闪图功能怎么没有了)

  • 微信钱包地区怎么切换台湾(微信钱包如何改地区)

    微信钱包地区怎么切换台湾(微信钱包如何改地区)

  • 华为笔记本电脑充电常识(华为笔记本电脑哪个系列最好)

    华为笔记本电脑充电常识(华为笔记本电脑哪个系列最好)

  • 华为手机铃声在哪下载(华为手机铃声在哪里设置来电铃声在哪里设置)

    华为手机铃声在哪下载(华为手机铃声在哪里设置来电铃声在哪里设置)

  • 苹果11是什么系统版本(苹果13有几款)

    苹果11是什么系统版本(苹果13有几款)

  • 当前登录环境存在异常是什么意思(当前登录环境存在安全风险)

    当前登录环境存在异常是什么意思(当前登录环境存在安全风险)

  • 华为手机屏幕左上角hd(华为手机屏幕左上角图标怎么消除)

    华为手机屏幕左上角hd(华为手机屏幕左上角图标怎么消除)

  • 手机号虚拟卡什么意思(虚拟卡手机卡号段)

    手机号虚拟卡什么意思(虚拟卡手机卡号段)

  • mate30如何不用电源键锁屏(华为mate30怎么减少耗电)

    mate30如何不用电源键锁屏(华为mate30怎么减少耗电)

  • 应用不允许截图怎么解决(手机显示该应用不允许截图)

    应用不允许截图怎么解决(手机显示该应用不允许截图)

  • 地铁出站未扫码怎么办(地铁出站未扫码会一直扣钱吗)

    地铁出站未扫码怎么办(地铁出站未扫码会一直扣钱吗)

  • 如何在电脑上找到扫描(如何在电脑上找到u盘)

    如何在电脑上找到扫描(如何在电脑上找到u盘)

  • 压缩袋的使用方法(压缩袋的使用方法手抽)

    压缩袋的使用方法(压缩袋的使用方法手抽)

  • 小米电视4x怎么下载爱奇艺(小米电视4x怎么恢复出厂设置)

    小米电视4x怎么下载爱奇艺(小米电视4x怎么恢复出厂设置)

  • iphonexs是几核(苹果xs是什么处理器几核的)

    iphonexs是几核(苹果xs是什么处理器几核的)

  • 如何破解压缩包解压码(如何破解压缩包加密)

    如何破解压缩包解压码(如何破解压缩包加密)

  • 索尼xperia1怎么设置开机动画

    索尼xperia1怎么设置开机动画

  • 抖音如何设置禁止转载(抖音如何设置禁止下载视频)

    抖音如何设置禁止转载(抖音如何设置禁止下载视频)

  • 微信号没有绑定手机号怎么解封(微信号没有绑定手机号有什么影响)

    微信号没有绑定手机号怎么解封(微信号没有绑定手机号有什么影响)

  • 苹果手机怎么下载谷歌商店(苹果手机怎么下一行打字)

    苹果手机怎么下载谷歌商店(苹果手机怎么下一行打字)

  • 怎么充值公交卡(支付宝怎么充值公交卡)

    怎么充值公交卡(支付宝怎么充值公交卡)

  • 手机怎么无线充电(手机怎么无线充电器)

    手机怎么无线充电(手机怎么无线充电器)

  • Win11 Dev预览版出现奇怪 Bug:电量能充到 100% 以上(windows 11预览版)

    Win11 Dev预览版出现奇怪 Bug:电量能充到 100% 以上(windows 11预览版)

  • uniapp前端实现热更新(uniapp前端 django后端)

    uniapp前端实现热更新(uniapp前端 django后端)

  • 一般纳税人公司转让一般卖多少钱
  • 备用金无发票怎么做账
  • 委托代销受托方怎么做账
  • 税务退进项税会计处理
  • 广告宣传费用的计算方法
  • 出纳可以做记账表格吗
  • 新注册公司第一次怎么报税
  • 汇兑损益怎么入账
  • 广播影视服务需要交文化事业建设费吗
  • 高新技术企业资格复核
  • 报销误餐费会计怎么做账
  • 以前年度多计提的附加税怎么调账
  • 公司之间借款怎么操作
  • 税控盘减免税款结转会计分录
  • 评估报告怎么算合法
  • 苹果六微信
  • 上海中秋活动2021
  • phpcookie
  • 咨询公司流程完整
  • 招待客户住宿的句子
  • PHP:pg_get_notify()的用法_PostgreSQL函数
  • 无形资产的界定及特点
  • 担保余值包括
  • 个人买车缴纳车船税吗
  • 社保包括哪些保险及比例
  • 马拉喀什的历史背景
  • 捐钱扶贫
  • 阐述php的特点
  • html和css介绍
  • smart模板教程
  • Android AsyncTack 异步任务实例详解
  • laravel运行
  • 所得税申报表上的营业成本怎么填
  • 其他收益所得税汇算清缴时需要调增吗
  • 基本户往一般户转钱有限制吗
  • 工会经费为0是不用申报的?
  • 固定资产折旧费计入成本吗
  • 偷税行为如何处理
  • 什么情况下增值税进项税额转出
  • 单位房屋出租收入应交哪些税
  • 国债利息属于免税吗
  • 发出商品 会计科目
  • 完税证明和纳税证明一样吗
  • 将自产产品用于管理部门 增值税
  • 工程设备租赁有哪些
  • 内含增长率的推导
  • 产权转移书据印花税
  • 保险收入如何做账
  • 公司账户可以转个人支付宝吗
  • 技术研发费用是什么意思
  • 一般纳税人购货取得普通发票
  • 出差包干费包括什么
  • 减值准备包括哪几个方面
  • 离职员工代缴社保协议
  • mysql更改密码命令
  • MySQL5.7中 performance和sys schema中的监控参数解释(推荐)
  • 服务主机windows错误报告
  • 电脑开机显示xp后无反应
  • centos安装详细
  • openwrt 路由配置梯子
  • centos7配置ssh免密码登录
  • linux系统
  • centos dvd安装
  • win10系统虚拟内存
  • linux halting
  • Linux系统开源VPN Openvpn进程异常退出解决方法
  • cocos2d-x教程
  • js填写input
  • number fields to_char
  • android item属性
  • js的isnan
  • android反编译smali
  • 实用的批处理命令
  • js中写for循环
  • 资源加载中是什么原因
  • Python 安装模块
  • js入门基础教程
  • jquery选择器大全
  • jquery数据类型
  • 山东省国家税务局威海培训中心
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设