动画道路上的新宠 -- Lottie
能够成为新宠,必定是有他自己的独特之处,那么lottie到底是什么呢?
在没有接触lottie之前,要想做一个很炫酷的动画效果要经过很复杂的计算,嗯,对于不善于这种高难度的计算的我来说,很是具有挑战性啊,不过从今以后,制作一个动画就很容易啦
1. lottie 简介
Lottie是一个iOS,Android和React Native库,可以实时渲染After Effects动画,并且允许本地app像静态资源那样轻松地使用动画。Lottie使用名为Bodymovin的开源After Effects的扩展程序导出的JSON文件格式的动画数据。简单来说就是利用一个json格式的动画数据来渲染到页面上,就是这么简单,官方文档上就有很多的小demo,比如?
2. lottie 能帮到我们吗?
答案是肯定的,首先,设计同学在Adobe After Effects上设计了动画效果,通过bodymovin插件,可以将动画导出成一个json文件。
然后,开发同学就可以通过Lottie将前面生成的json文件渲染成动画效果。
这样就可以高效的实现很多复杂动画效果啦
是不是看着就很有技术含量,不要急,下面我们也来做一个
3. lottie 实例
- 第一步 安装vue-cli 搭建一个基本的vue实例
npm install -g vue-cli
vue init webpack test // 构建一个名为test的文件
- 第二步 安装vue-lottie
npm install --save vue-lottie
- 第三步 引入到你的文件中,当然你也可以全局引入
import Lottie from 'vue-lottie'
- 第四步 引入json文件
这一步很是关键,他决定了你动画的成败,在做练习的时候,你可以到下面这个地方,也就是官网去找一个你喜欢的动画,然后下载下来
神奇世界的大门
像这样引入到你的文件中
import * as animationData from './assets/pumped_up.json'复制代码
- 第五步 开始做动画啦
像引入canvas一样写入你的文件中
<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>复制代码
不同于canvas的是他要有自己的方法
data () {return {defaultOptions: { animationData: animationData },animationSpeed: 1,anim: {}}},methods: {handleAnimation (anim) {this.anim = anim}}复制代码
如果你想要加上暂停键,开始键等这些就这样写?
<template><div id="app"><lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/><div><p>Speed: x{{animationSpeed}}</p><inputtype="range"value="1"min="0"max="3"step="0.5"v-on:change="onSpeedChange"v-model="animationSpeed"></div><button @click="stop">stop</button><button @click="pause">pause</button><button @click="play">play</button></div>
</template>
<script>
import Lottie from 'vue-lottie'
import * as animationData from './assets/pumped_up.json'
export default {name: 'app',components: { 'lottie': Lottie },data () {return {defaultOptions: { animationData: animationData },animationSpeed: 1,anim: {}}},methods: {handleAnimation (anim) { this.anim = anim},// 停止动画stop () {this.anim.stop()},// 开始动画play: function () {this.anim.play()},// 暂停动画pause: function () {this.anim.pause()},// 动画速度onSpeedChange () {this.anim.setSpeed(this.animationSpeed)}}}
</script>复制代码
好了,到了看效果的时候了?(我承认这个动图做得有点丑,但是相信我,运行的效果真的很赞?)
- 第六步 感谢欣赏
上面的案例是不是很简单呢,不知道这个新的分享有没有让你get到新世界的大门,反正我是领略到了,想要做更炫酷的效果可以自己细细的研究一下哦☺️
最后附上开源地址:
- Android: Android地址
- iOS: iOS地址
- React Native:React Native地址
- lottie-web地址:github.com/airbnb/lott…
转载于:https://juejin.im/post/5b7e74ce51882542a92ba0e9
动画道路上的新宠 -- Lottie相关推荐
- 如何在 Joomla 网站上配置交互式 Lottie 动画
Lottie 基本上是一种用于矢量图形动画的文件格式,它在吸引访问者注意力方面比您网站的静态资产非常有效.它以德国剪影动画先驱 Charlotte Lotte Reiniger 的名字命名. Lott ...
- 使用基本几何图元在道路上实现准确高效的自定位
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 摘要(Abstract) 在非常有限的内存和计算能力的条件下实现准确定位是下一代汽车序列的一大挑战.本 ...
- 第一天开通博客,记录自己在编程道路上的点点滴滴
第一天开通博客,第一天写随笔:今年刚毕业,希望能用博客记录自己在编程道路上的点点滴滴,会记录自己在编程过程中遇到的问题及解决办法,也会记录自己的程序人生,分享出来和大家共勉. 希望自己能早日成为一名快 ...
- 快速找到由程序员到CTO发展道路上的问路石
快速找到由程序员到CTO发展道路上的问路石 本文选自<我也能做CTO之程序员职业规划 >一书 高阳兄发过来本书前六章样章时,我正在上班,任务比较紧,精神高度集中,却还是止不住地走神要翻来看 ...
- LeetCode 2211. 统计道路上的碰撞次数
文章目录 1. 题目 2. 解题 1. 题目 在一条无限长的公路上有 n 辆汽车正在行驶.汽车按从左到右的顺序按从 0 到 n - 1 编号,每辆车都在一个 独特的 位置. 给你一个下标从 0 开始的 ...
- 如何在读研读博的道路上迅速失败?
把导师当傻子, 甚至形成了逆反心理, 老师说什么或者做什么, 都会在心里或者私底下数落他. 老师给一个方向弄不出来的话, 要么是老师岁数大了不搞科研, 或者是他根本就不愿意指导自己. 三天两头就想换方 ...
- 励志!26岁单臂博士生:我想在科研的道路上发更多高质量论文
"人生应该坚持不懈地努力."尽管3岁时因车祸失去右臂,只能左手握笔,袁鑫的字却力透纸背,正如他的人生,坚韧有力. >>>> 靠左手敲代码,武汉科技大学计算机 ...
- 道路上下行是什么意思_了解道路禁止符号 春节压岁钱少填罚款
[爱卡汽车 用车 原创] 虽然对于离开学校很久的成年人们来说,压岁钱基本都是向外付出,很少再有收到的情况.但毕竟年终奖也是一笔可观的年底收入,可以犒劳一下忙碌了一整年的自己.若是这些开心的资金都要给过 ...
- 【产品化 IT】在产品化 IT 的道路上避免流量拥堵的 3 种方法
转向产品运营模式是一项重大的文化和运营变革--但值得付出努力. 在对速度的无尽需求中,数字领导者继续从项目导向转向产品导向.然而,这种转变并不是"一劳永逸"的举措.它需要培育和持续 ...
最新文章
- mysql内存爆_线上MySQL机器内存爆掉原因分析与解决
- python怎么玩pdf_如何使用Python玩转PDF各种骚操作?
- java有什么压力_编程语言的心智负担!你学编程得有多大的压力快来测试一下...
- Map四种获取key和value值的方法,以及对map中的元素排序
- 拼数(洛谷-P1012)
- html+lt;input+file样式,不同内核的浏览器中文件选择控件的外观也不相同
- mysql与php教程,php与Mysql
- Beetl学习总结(2)——基本用法
- Java面试通关要点汇总整理
- R_ggplot2基础(一)
- 《大象UML》看书笔记2:
- 信息学奥赛一本通 欧拉回路
- word文档里面怎样自动生成目录
- 如何用免费office表格制作课程表
- -bash: netstat: 未找到命令
- 【智能制造】歌尔股份打造面向可重构和微服务的可穿戴产品智慧工厂
- 组织的目的是使平凡的人做出不平凡的事 --- 彼得.德鲁克 《卓有成效的管理者》
- 运营之光:我的互联网运营方法论与自白学习总结(思维导图)
- ERROR 1366 (HY000): Incorrect string value: ‘\xE8\xB5\xB5 \xE9\x9B...‘ for column ‘s_name‘ at row 1
- 得到app文稿导出_得到-app分析
热门文章
- java cssselector类_CSS 元素选择器
- 微博polg什么意思_成都网站代运营是什么意思?-建站
- vue项目开发实战案例_Vue、Spring Boot开发小而完整的Web前后端分离项目实战02
- matlab isinteger,MATLAB数据类型
- 8321r 当前不允许登陆_Apache Shiro安全框架实现身份认证(登陆与登出)
- php asp.net des,转DES的dotNet到php实现
- 使用双重循环,输出数字金字塔
- 《网络编程》ioctl 操作
- 手把手教你cuda5.5与VS2010的编译环境搭建
- HTML5 新元素标签系列:最简版 HTML5