本文编辑于OS X系统,之前出现过windows下看不到部分图片的情况,如有请大家告知

为什么需要Lottie

在相对复杂的移动端应用中,我们可能会需要使用到复杂的帧动画。例如:
  • 刚进入APP时候可能会看到的入场小动画,带来愉悦的视觉享受
  • 许多Icon的互动变化比较复杂多变的时候,研发复现成本高
总而言之,我们的难题是: 这些事情如果给我们用CSS3(Web)或者Animated(RN)去实现是非常棘手的,而且因为研发人员和设计师之间本身无法做到心灵相通,导致如果全部交给研发者完成效果,做出来的结果往往也不能让设计师满意。同时开发成本实在太高太高。
 
诶? 那我们想,能不能把所有的动画交给设计师用设计工具(如AE)去做这些工作,然后直接导出一个文件给开发者去使用呢?如果这样,设计师就能完全独立自主,而开发者只要像“引用一张图片”那样去用这个动画就好了呀。
 
对,Lottie这个工具做的就是这件事。
 

Lottie动画简介

Lottie是一个用于Web和iOS(Android)的移动库,用于解析使用Bodymovin导出为json的Adobe After Effects动画,并在移动设备上呈现它们。设计师第一次可以创建和运送漂亮的动画,而无需工程师手工重新创建。
 
引用原文
Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.
参考文献
Demo
 

除了Lottie外的其他同类型的实现方案对比

1. gif: 优点:简单。 缺点:掉帧非常严重,体验不流畅,严重影响用户体验,对于小Icon也许勉强可以接受,但对于较大面积的动画肯定不行

2. video: 优点:兼容性好。 缺点(web端)如下所示:

  • 自动播放问题:很多平台,如微信,许多安卓浏览器,是禁止自动播放的,那么这时,你的“动画”就变成了一张“静态图”了
  • 许多手机浏览器,如oppo和华为,是有“播放置顶”功能的,影响用户体验
  • video控制条隐藏问题
3. APNG:  APNG就是Animated PNG,它的作用和gif类似
优点
  • 支持 24 位真彩色图片,(对比下gif色阶过渡糟糕,图片具有颗粒感)
  • 支持 8 位 Alpha 透明通道(gif不支持 Alpha 透明通道,边缘有杂边)
  • 向下兼容 PNG
  • 同视觉质量的情况下体积更小
缺点:兼容性问题严重
 
参考资料
  1. 《复杂帧动画之移动端video采坑实现》https://juejin.im/post/5d513623e51d453b72147600
 

Lottie的优缺点

(注:AE是设计师使用的一款动画设计软件)
优点
  1. 跨平台: IOS,Android,Web端都可以使用,横跨三端
  2. 兼容性良好:IOS/Android兼容性非常好,web端的兼容性参考SVG/Canvas兼容性
  3. 动画流畅细腻: 因为直接使用了AE的参数构建,所以动画非常流畅而且细腻
  4. 一个JSON文件,一个模块API就足够,研发可以做到“开箱即用”,研发实现和维护成本很低
  5. 给设计师非常大的自由度,和CSS那种设计给UI然后研发二次实现不同,Lottie完全由设计师实现,分工明确
  6. 接上面的第3点:维护成本低,因为所需文件资源可以从网络引入。
  7. 体积相对较小,性能成本可以接受
缺点
  1. 并不是所有的AE工具构建能力都能实现,支持手动K帧,但尚且不支持表达式,特效,mask蒙版等功能,需要和设计师沟通好
  2. 对于属性动画,大型动画的渲染效果较差
总结: 好用,够用,兼容好,跨平台。(只要和设计师提前商量好注意事项就不会有大问题) 更具体的大家可以参考下面这篇研究文章 参考资料

Lottie兼容性

这个分两部分讲
  1. IOS/Android兼容性
  2. Web端兼容性
IOS/Android兼容性
总体来看让人比较满意
具体的参数和数据,可阅览:
Web端兼容性
因为Web端的Lottie-web工具是借助Canvas,SVG去实现的,为什么这么说呢? API:bodymovin.loadAnimation(opt)里面的opt.animType参数可以指定三个值: html | canvas | SVG,所以Web端的兼容性也等价于SVG和Canvas的兼容性
 
1.SVG兼容性
 
2.Canvas兼容性
 

Lottie的使用过程

(注:下面的1,2,3在具体开发中让设计师去做,设计师只要给你提供生成的JSON文件就可以了)
1. 下载AE,这个可以到官网下载,有7天试用期
2. 到 https://github.com/airbnb/lottie-web 下载包项目,然后进入/build/extension下面下,有个Bodymovin.zxp,这个是一个安装包,点击它,就会给AE安装一个叫做Bodymovin的插件(Bodymovin是lottie-web技术栈下的一个工具)
3. 你的电脑可能不支持Bodymovin的zxp格式,没关系,我们下载一个解析器就可以了,参考链接: https://zxpinstaller.com/
4. 设计一个动画(不会没关系,让设计师做就好了),并且将动画导出成json文件,可参考 https://www.jianshu.com/p/3c8e8025757d (注意,这个过程可能会很坑,等会有时间我总结一下)
5. 最后我们不是已经有json文件了嘛,下面通过CDN脚本引用一下lottie的支持脚本,然后就可以使用bodymovin的API了,示范例子如下
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
</head> <body style="background-color:#ccc; margin: 0px;height: 100%;">
<div style="width:100%;height:100%;" id="bodymovin"></div>
<script>
var animData = {
wrapper: document.getElementById('bodymovin'),
animType: 'html',
loop: true,
prerender: true,
autoplay: true,
path: './data.json'
};
var anim = bodymovin.loadAnimation(animData);
</script>
</body>
6.最后,运行这段代码,在浏览器中打开!就可以啦(注意要跨域哦)
 
参考资料列表

Lottie使用的坑点

  1. 就像我刚才说的,Lottie只支持AE的基本功能,不支持表达式,特效,mask蒙版等功能,这些功能要是用了,要么是你的JSON数据导出失败,要么你最后在Web端上显示不出来,或者显示和预期不一样。所以很多功能要和设计师商量好
  2. 吐槽一下:Bodymovin这个插件的使用,真是让人一言难尽。(最后导出的时候要点击绿色的render按钮才能导出,不要点那个player按钮),如果能把render这个文案改成export(导出),语意上就更好理解一些了
  3. lottie-web的使用需要手动处理跨域问题,否则会报错误。所以上面那段HTML代码是不能用IDE插件通过文件方式直接打开的
本文完
 

Lottie在手,动画我有:ios/Android/Web三端复杂帧动画解决方案的更多相关文章

  1. Android为TV端助力 帧动画

    首先在res/drawable/name1.xml/定义一组图片集合: <?xml version="1.0" encoding="utf-8"?> ...

  2. 仿微信的IM聊天时间显示格式(含iOS/Android/Web实现)[图文+源码]

    本文为原创分享,转载请注明出处. 1.引言 即时通讯IM应用中的聊天消息时间显示是个再常见不过的需求,现在都讲究用户体验,所以时间显示再也不能像传统软件一样简单粗地暴显示成“年/月/日 时:分:秒”这 ...

  3. iOS/Android/Web Url Encode空格處理 原文連結:http://read01.com/3gDO.html

    iOS/Android/Web Url Encode空格處理 原文連結:http://read01.com/3gDO.html 前言 這裡只是講一個故事,一個發生在我身上的真實的故事.曾經,我以為搞加 ...

  4. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

  5. 转Android 用Animation-list实现逐帧动画

    Android 用Animation-list实现逐帧动画     第一步:先上图片素材,以下素材放到res/drawable目录下: http://blog.csdn.net/aminfo/arti ...

  6. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  7. Android为TV端助力 自定义动画

    android自定义动画注意是继承Animation,重写里面的initialize和applyTransformation,在initialize方法做一些初始化的工作,在applyTransfor ...

  8. Android 用Animation-list实现逐帧动画 (转载)

    转自:http://blog.csdn.net/aminfo/article/details/7847761 第一步:先上图片素材,以下素材放到res/drawable目录下: http://blog ...

  9. Android 用Animation-list实现逐帧动画

    第一步:先上图片素材,以下素材放到res/drawable目录下: http://blog.csdn.net/aminfo/article/details/7847761 图片素材: 文件名称: ic ...

随机推荐

  1. 防止sql注入:替换危险字符

    在用户名或者密码框中输入“11‘ or ’1‘ = '1”时,生成的sql语句将为“selec * from userInfo where name = '11' or '1' = '1' and p ...

  2. 【0726 | Day 2】编程语言分类/主流编程语言介绍/网络的瓶颈效应

    编程语言分类 机器语言 与硬件交互 优点:执行效率高 缺点:开发效率低 汇编语言 间接与硬件交互 优点(相较于机器语言):开发效率高 缺点(相较于机器语言):执行效率低 高级语言 简单化指令,让人人都 ...

  3. (二十六)c#Winform自定义控件-有确定取消的窗体(二)

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  4. 100天搞定机器学习|day40-42 Tensorflow Keras识别猫狗

    100天搞定机器学习|1-38天 100天搞定机器学习|day39 Tensorflow Keras手写数字识别 前文我们用keras的Sequential 模型实现mnist手写数字识别,准确率0. ...

  5. UWP实现吸顶的Pivot

    话不多说,先上效果 这里使用了一个ScrollProgressProvider.cs,我们这篇文章先解析一下整体的动画思路,以后再详细解释这个Provider的实现方式. 结构 整个页面大致结构是 & ...

  6. 《白帽子讲web安全》——吴瀚清 阅读笔记

    浏览器安全 同源策略:浏览器的同源策略限制了不同来源的“document”或脚本,对当前的“document”读取或设置某些属性.是浏览器安全的基础,即限制不同域的网址脚本交互     <scr ...

  7. luoguP2444_[POI2000]病毒

    题意 给定多个01模式串,问是否存在一个无限长的字符串不包含任何一个模式串. 分析 好像数据有点水,网上一大堆题解连样例都没过??? 多模式串,先把AC自动机建出来再说. 反向考虑,若存在一个无限长的 ...

  8. day01计算机硬件基础

    1.cpu\内存\硬盘 2.存储器 操作系统 是什么 为什么 如何用 1.什么是编程语言: 语言是一个事物与另一个事物沟通的表达方式 编程语言即程序员与计算机沟通的介质 计算机是程序员的奴隶 2.什么 ...

  9. springboot中的springSession的存储和获取

    利用redis进行springSession的存储: 存储: // 在session中保存用户信息 HttpSession session = httpRequest.getSession(true) ...

  10. 原生js之Math对象

    1.比较方法(常用) Math.min() //求一组数中的最小值 不能是数组,和对象等等. Math.max() //求一组数中的最大值eg:Math.min(5,3,5) // 3 2.取整(常用 ...