我们的设计如是说:

Lottie的json动画,优缺点有

优点:

1、开发成本低,动画的还原度高。设计师导出 json 文件后,交付开发。原本要1天甚至更久的动画实现,现在只要不到一小时甚至更少时间了。

2、支持服务端 URL 方式创建。所以可以通过服务端配置 json 文件,随时替换客户端的动画,不用通过发版本就可以做到了。比如 app 启动动画可以根据活动需要进行变换了。

3、性能提高,可以替代原来需要使用帧图完成的动画。节省了客户端的空间和加载的内存

4、跨平台,iOS、安卓平台可以使用一套文件。省时省力,动画一致。不用设计师跑去两边去跟着微调确认了。

5、支持转场动画。 PresentViewController/DismissViewController 时可以做转场效果。

不足:

1、对一些AE的属性支持不够完全(例如:表达式,中继器)

详情见官网:https://github.com/airbnb/lottie-ios

2、对系统平台版本限制,如 iOS8 及以上,安卓 API14 及以上。

3、对可交互的动画暂时还不行,主要是以播放类型动画(需要开发自己进行交互编译控制)。

知乎上说:

它最大的优点是提供了一套完整的跨平台的动画实现工作流。

其次,相对于类似的实现方案GIF、手写动画、帧动画而言,这个方案更为轻量,性能和存储上都更佳。

从代码上看,Android 端的实现是基于 Drawable、iOS 端是基于 Layer —— 最终都是对 canvas 的操作,中间除去解析 json 外,基本无耗费性能的行为。(官方文档有提到,masks 和 mattes 动画较为耗费性能,原因是需要额外的 Bitmap 辅助,这点需注意)

而存储上,动画由 json 文件描述,占用空间不多。

也是因为动画由 json 文件描述,所以它的第三个优点是动画的更新及其方便。在之前,假如我们要完成动画动态更新需求,要么使用上述所说的 GIF、帧动画等方案,要么就自定义动画描述文件或用笨重的xml来完成动画。那么现在用 json 文件,简直再方便不过了。

三. 仍然存在的问题

1. Bodymovin 插件待完善,仍然有部分 AE 效果无法成功导出;

2. Lottie 对 json 文件的支持待完善,目前有部分能成功导出成 json 文件的效果在移动端上无法很好的展现;

3. 目前不支持文字,所有文字必须转成矢量图才能正常展现动画;

4. 动画无法被编辑,即移动端无法更改远端下载到本地的动画;

5. 文档需要跟进。。现在的 json 文件内容看的好蛋疼。。根本没法开开心心提 PR;

Lottie的json动画的更多相关文章

  1. Html5页面内使用JSON动画的实现

    有一天我们的UI设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的json动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果(写到这里我突然想到一个问题,这么复杂的动画为什么不使用g ...

  2. Lottie在手,动画我有:ios/Android/Web三端复杂帧动画解决方案

      为什么需要Lottie 在相对复杂的移动端应用中,我们可能会需要使用到复杂的帧动画.例如: 刚进入APP时候可能会看到的入场小动画,带来愉悦的视觉享受 许多Icon的互动变化比较复杂多变的时候,研 ...

  3. Android之Lottie动画详解

    文章大纲 一.Lottie介绍二.Lottie实战三.项目源码下载四.参考文章   一.Lottie介绍 1. 什么是Lottie   Lottie是Android和iOS的移动库,用于解析Adobe ...

  4. Lottie 动画里有图片怎么办?设计师小姐姐也能帮你减少开发量!

    一.序 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整解决方案,设计师只需要使用 After Effectes (之后简称 AE)设计出动画之后,使用 Lotti ...

  5. Lottie开源库实现Android动画效果

    Lottie简介 Lottie是一个支持Android.iOS.React Native,并由Adobe After Effects制作aep格式的动画,然后经由bodymovin插件转化渲染为jso ...

  6. iOS 动画(基于Lottie封装)

    一般app中都会带有动画,而如果是一些复杂的动画,不但实现成本比较高,而且实现效果可能还不能达到UI想要的效果,于是我们可以借助lottie来完成我们想要的动画.   lottie动画1.gif   ...

  7. 看逐浪CMS技术小哥做SVG动画(附使用Bodymovin和Lottie将Adobe After Effects(AE)程式转为 HTML5/Android/iOS原生的动画全过程-即AE转svg\canvas\html5动画)

      名词解解释 adobe After Effects AE:adobe After Effects,adobe公司的专业视频制作软件. Bodymovin插件预览 Bodymovin:是一个AE的插 ...

  8. 【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画

    作者 | 弗拉德 来源 | 弗拉德(公众号:fulade_me) Lottie动画 在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过 ...

  9. 在vue里添加好看的lottie动画 (^_^)

    为什么用lottie ★~★ 1.能让你的程序不那么单调 2.能让一些有审美强迫症的同学好受一点 3.网上有丰富的资源 点我进入lottie资源网站 引入lottie库 (>.<) 在vu ...

随机推荐

  1. sqli-labs(六)

    第十一关: 这关是一个登陆口,也是一个sql注入的漏洞,也就是常说的万能密码. 在输入框账号密码种分别输入 1'  和1'  页面会报错. 后台使用的单引符号进行的拼接.账号输入1' or '1'=' ...

  2. Container(容器)与 Injector(注入)

    Container(容器): History: containerd于2014年出生于Docker,最初是Docker引擎的低层运行时管理器.继2017年3月被CNCF接受之后,containerd已 ...

  3. C#学习入门第二篇

     4.转义字符\b    退格符\n     换行\r     回车,移到本行开头\t     水平制表符\\      代表反斜线字符“\“\'        代表一个单引号字符@字在字符串前面表示 ...

  4. 019-JQuery(Ajax异步请求)

    使用jquery完成异步操作 ->开发文档提供的异步API url:请求地址 type:请求方式,主要是get.post data:{}:请求的数据 dataType:返回值的类型,主要有xml ...

  5. 关于python中selector问题

    在做大型的爬虫时,re表达式往往效率不高,scrapy框架为爬虫提供了很好的爬虫方法 scrapy提取数据时有一套自己的机制,即selectors,一般通过特定的XPath,或者特定 的CSS表达式来 ...

  6. VS2017

    Visual Studio常用快捷键https://www.cnblogs.com/DonetRen/p/8182911.htmlVisual Studio 2017 Product Family S ...

  7. HighCharts学习笔记(一)

    HighChars基本概述 Highcharts是一个纯js写成的插件库,很好的外观表现可以满足任何图标需求. 开始使用chart之前进行配置 全局配置: Highcharts.setOptions( ...

  8. Java集合-----Set详解

    Set是没有重复元素的集合,是无序的 1.HashSet HashSet它是线程不安全的       HashSet常用方法:   add(E element)  将指定的元素添加到此集合(如果尚未存 ...

  9. 【impala学习之一】impala

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 CM5.4 一.ImpalaImpala是基于Hive的大数 ...

  10. hive 实现一个字段多行转一行 和 一行转多行

    1.多行转一行 多行转一行可以通过concat_ws(',',collect_set(col_name)) as col_new的方式实现,可以参考:https://www.cnblogs.com/s ...