web端动效 lottie-web 使用

Lottie 是 Airbnb 开发的，一个适用于 Android、iOS、Web 和 Windows 的库，能够渲染 Adobe After Effects 动画特效。

安装

yarn add lottie-web

使用方法
我这里创建了一个组件MyLottie.vue

<!-- components/MyLottie -->
<template><!-- 渲染容器 --><div class="lottie"></div>
</template><script>
import lottie from 'lottie-web'export default {props: {animationData: {type: Object,required: true},autoplay: {type: Boolean,default: true},loop: {type: Boolean,default: true}},data () {return {lottie: null}},mounted () {this.intLottie()},methods: {intLottie () {const { animationData, autoplay, loop } = thisthis.lottie = lottie.loadAnimation({container: this.$el, // 渲染容器renderer: 'svg', // 渲染方式 svg|canvas|htmlloop, // 是否循环 true|false|numberautoplay, // 自动播放 true|falseanimationData // lottie json文件})}}
}
</script><style lang="scss" scoped>
.lottie {width: 200px;height: 200px;
}
</style>

在页面引用组件，可以去官方社区下载动画json

<template><div><MyLottie :animationData="lottieJson" /></div>
</template><script>
import MyLottie from '@/components/MyLottie'export default {name: 'Home',components: {MyLottie},data () {return {// lottie json文件lottieJson: require('@/assets/lottie/lottie.json')}}
}
</script>

这样一个lottie动画就出来了

下面结合lottie的一些实例方法，将我们的lottie组件添加鼠标事件，官方文档

html部分修改

<div class="lottie" @mouseenter="onMouseenter" @mouseleave="onMouseleave"></div>

methods部分修改

methods: {intLottie () {let { animationData, autoplay, loop } = thisif (!autoplay) {// 这里交互播放不循环loop = false}this.lottie = lottie.loadAnimation({container: this.$el, // 渲染容器renderer: 'svg', // 渲染方式loop, // 是否循环autoplay, // 自动播放animationData // lottie json文件})},onMouseenter () {// 我这里demo，非自动播放则判断为鼠标交互播放，具体封装根据自身业务场景来if (!this.autoplay) {this.lottie.setDirection(1)this.lottie.play()// 监听lottie播放结束this.lottie.addEventListener('complete', e => {this.lottie.stop()})}},onMouseleave () {this.lottie.removeEventListener('complete')if (!this.autoplay) {// 改变播放方向，鼠标移出回退this.lottie.setDirection(-1)}}}
}

引入组件处修改

<MyLottie :animationData="lottie" :autoplay="false" />

下面是改造后的效果

web端动效 lottie-web 使用相关推荐

网易云音乐动效Android,Web Audio在音频可视化中的应用（网易云音乐鲸云动效）...
本文有两个关键词:音频可视化和Web Audio.前者是实践,后者是其背后的技术支持. Web Audio 是很大的知识点,本文会将重点放在如何获取音频数据这块,对于其 API 的更多内容,可以查看 ...
聊一聊Web端的即时通讯
聊一聊Web端的即时通讯 Web端实现即时通讯的方法有哪些? - 短轮询长轮询 iframe流 Flash Socket 轮询客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并 ...
技术实践丨React Native 项目 Web 端同构
摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...
11、web端主要应用在哪些领域？
任何应用都可以web端. HTML5是WEB的未来,不仅到广泛的应在电脑端,而且在移动端也一定会得用. 据统计2015年全球将有10亿手机浏览器支持HTML5,同时HTMLWeb开发者数量将达到200 ...
前端工程化-基于Taro的Web端Monorepo架构改造
前端工程化-Genebox小程序端Monorepo架构改造中介绍了在使用Taro框架下,结合yarn workspace + lerna 来改造Monorepo架构的方式和流程,这篇文章与本篇文章内容 ...
OpenCV C++ 通过Websocket发送摄像头图片到Web端
文章目录 1. 说明 2. 流程 3. 代码 3.1 C++端代码 3.1.1 主要逻辑 cv::Mat格式数据转换为jpg格式数据 3.1.2 websocket服务端代码 3.2 Web端代码 i ...
如何让动效又快又好落地？我分析了这5种格式的优缺点
动效设计,可以提升界面的趣味性和引导性,让用户浏览过程中不会太枯燥,获得更好的体验. 最近做的金山知了(后面改名为金山知识库)官网,头图元素加入了缓动效果,第一眼挺新颖的.金山协作新年许愿活动,许愿按 ...
lottie 导出html,Lottie Web动效基本原理
前段时间在<Lottie Web动效在React中的构建>一文中和大家聊了如何通过lottie-web将AE导出来的JSON文件自动生成动效.在该文中,聊的主要是设计软件Figma.Ske ...
前端实现炫酷动效_前端动效实现--lottie - web
前端常用动效实现方式 CSS3 帧动画 CSS 发展到了今天,它的强大几乎不是我们可以想想到的.合理的使用Animation可以实现很多神奇效果.配合设计师的导出图,前端使用序列帧即可实现动画效果. ...

web端动效 lottie-web 使用

web端动效 lottie-web 使用相关推荐

最新文章

热门文章