lottie动画库简介

Lottie
是Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的动画库。具体内容可以见github。
通过安装在AE上的一款名叫bodymovin的插件,能够将AE中的动画工程文件转换成通用的json格式描述文件,bodymovin插件本身是用于在网页上呈现各种AE效果的一个开源库,lottie做的事情就是实现了一个能够在不同移动端平台上呈现AE动画的方式.
在此不多做解释可以去github看使用以及支持。
github地址:https://github.com/airbnb/lottie-ios

本文重点在解析动画以及动画库。
1) 首先是动画定义
每帧图像都是由人工或计算机产生的。根据人眼的特性,用15帧/秒~20帧/秒的以上速度顺序地播放静止图像帧,产生运动的感觉的图像。
2)动画形成原理:
是因为人眼有视觉暂留的特性所谓视觉暂留就是在看到一个物体后即时该物体快速消失也还是会在眼中留下一定时间的持续影像。

<1>下面我们了解几个名词(对没错,让你自己去搞明白,我就不和你说了)
1)FPS ( Frames Per Second)
2)逐帧(Frame By Frame)
3)关键帧(Keyframe Animation)

3)以iOS为例谈一谈Core Animation:


Core Animation结构

🔍 核心动画类有以下分类:提供显示内容的图层类。动画和计时类。布局和约束类。事务类,在原子更新的时候组合图层类。
图层类是核心动画的核心基础,它提供了一套抽象的概念,CALayer 是整个图层类的基础,它是所 有核心动画图层类的父类。 和视图类(NSView 或 UIView)一样,CALayer 有自己的父图层类,同时也拥有自 己子图层类的集合,它们构成了一个图层树的层次结构。图层绘制类似视图一样自底 向上,并指定其几何形状相对他们 superlayer,创建一个相对的局部坐标系。然而图 层类通过合并变换矩阵允许你旋转、偏移、拉伸对应的图层内容。
🔍 核心动画的动画类使用基本的动画和关键帧动画把图层的内容和选取的属性动 画的显示出来。所有核心动画的动画类都是从 CAAnimation 类继承而来。CAAnimation 实现了 CAMediaTiming 协议,提供了动画的持续时间,速度,和重复计数。 (关于CAMediaTiming可以看图)


Core Animation classes and protocol

CAAnimation 也实现了 CAAction 协议。该协议为图层触发一个动画动作提供了提供 标准化响应。
动画类同时定义了一个使用贝塞尔曲线来描述动画改变的时间函数。例如,一个 匀速时间函数(linear timing function)在动画的整个生命周期里面一直保持速度不变, 而渐缓时间函数(ease-out timing function)则在动画接近其生命周期的时候减慢速度。
核心动画额外提供了一系列抽象的和细化的动画类,比如:
CATransition 提供了一个图层变化的过渡效果,它能影响图层的整个内容。 动画进行的时候淡入淡出(fade)、推(push)、显露(reveal)图层的内容。这些过渡效 果可以扩展到你自己定制的 Core Image 滤镜。
🔍 CAAnimationGroup 允许一系列动画效果组合在一起,并行显示动画。
🔍 CAPropertyAnimation 是一个抽象的子类,它支持动画的显示图层的关键路 径中指定的属性
🔍 CABasicAnimation 简单的为图层的属性提供修改。 CAKeyframeAnimation 支持关键帧动画,你可以指定的图层属性的关键路径
🔍 动画,包括动画的每个阶段的价值,以及关键帧时间和计时功能的一系列值。在 动画运行是,每个值被特定的插入值替代。
🔍 CATransaction 是核心动画 里面负责协调多个动画原子更新显示操作。事务支持嵌套使用。 核心动画支持两种事务:隐式事务和显式事务。在图层的动画属性被一个线程修 改,同时该线程下次迭代的时候自动提交该修改的时候隐式事务自动创建。显式事务 发生在程序在修改动画属性之前给 CATransaction 发送了一个开始消息,在动画属性 修改之后提交该消息。
<2> Lottie库介绍。
1)类结构

Lottie类结构

2)流程概述
里面有两点简单说一下。
一、cache是最少使用原则,利用NSDictionary和NSarray实现,最多存50个json数组
二、是动画合成过程,解析json数组每个数组生成相应的layer组合layer生成完整动画。


流程概述.png

<3>性能测试
1)CPU波动和帧动画对比会差一些


CPU波动

2)内存占用会有一定优势


内存占用

3)解析普通动画耗时大概在0.03秒左右,比较理想。

所以综上 Lottie可用性还是不错的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,455评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,089评论 5 13
  • 书写的很好,翻译的也棒!感谢译者,感谢感谢! iOS-Core-Animation-Advanced-Techni...
    钱嘘嘘阅读 2,287评论 0 6
  • Core Animation编程指南 关于Core Animation Core Animation自身并不是一个...
    钱嘘嘘阅读 1,147评论 0 12
  • 显式动画 如果想让事情变得顺利,只有靠自己 -- 夏尔·纪尧姆 上一章介绍了隐式动画的概念。隐式动画是iOS平台上...
    方圆几度阅读 497评论 0 0