Lottie教程:打造完美流畅APP动画

首先先介绍一下Lottie:

“Lottie is a mobile library for Android and iOS that parsesAdobe After Effectsanimations exported as json withbodymovinand renders the vector animations natively on mobile and through React Native!” - 自官网:https://github.com/airbnb/lottie-ios

大致意思是:Lottie是一个可以解析使用【bodymovin】插件从Adobe After Effects中导出的格式为 json 的文件,并在 iOS、Android、macOS、React Native 中进行解析使用的开源库。

这个库由 Airbnb 开发并在2017年2月份左右开源的。

项目开发中,需要在app中实现设计师提供的动画效果,往往通过复杂代码的实现,计算动画需要移动的点和位置,开发成本高,而且一旦需求改变或者版本周期紧张,之前苦苦做出的动画可能就要在工程中砍掉,苦不堪言啊。

总的来说,动画的实现需要设计师的灵感,开发同学的辛勤汗水来共同完成的。有的时候完成之后,还要对一些动画细节进行反复的调试。开发时间会大大增加。对于一个直播类app,需要的迭代周期短,很多情况下,直播礼物特效的更新更是希望在不发版本的情况下进行动态的更新(至少我们公司的项目是有这个需求的),这是不允许的。

无意间在GitHub上闲逛的时候,看到了这个令人欣喜若狂的框架。解决了困扰很久的礼物特效动画后台更新的问题。Airbnb开源的这个库,通过bodymovin这个AE的插件,可以将AE设计好的动画导出为json格式的文件。交给开发同学,开发同学通过集成Lottie库,就可以读出json文件,在程序中通过简单的几行代码就可以实现原本需要一天才会搞定的复杂动画。而且不需要后期的调整就可以达到和AE中一样的动画效果,是不是瞬间开心了不少,😁。

你会问就这个库这么好,没有什么缺点吗?有的,对这个开源库的了解,有缺点如下:

优点:

1.大大缩减了开发同学的开发时间

2.动画的实现成功率提高,可以最大的限度的复现设计师的设计效果。

3.支持服务器端URL方式创建,可以通过配置json文件来实现复杂动画的后台更新。如:客户端可以根据节日来实现不同的动画。

4.最最重要的一点,性能。可以完全替代原来需要使用帧图才可以完成的清晰流程的动画。节省了客户端app包的空间和动画加载的内存,对硬件的性能好一些。

5.跨平台,Lottie库是支持多个平台的动画库。iOS,android,macOS,RN 均可以使用同一套文件。

6.支持转场动画。presentviewController/DismissviewController时可以使用转场动画。

缺点:

1.对一些AE属性支持不够完全,如:

Even-Odd winding paths

Merge Shapes

Trim Shapes Individually feature of Trim Paths

Expressions

3d Layer support

Gradients

Polystar shapes (Can convert to vector path as a workaround)

Alpha inverted mask

2.对平台系统的版本限制,iOS8.0以上,android14以上。

3.对可交互的动画暂时不支持。主要是播放类型动画。

下边来说一下Lottie库的使用:

集成Lottie

github.com/airbnb/lottie-ios下载最新版本源码。在这里下载更多的素材文件www.lottiefiles.com/159-servishero-loading

推荐使用cocoapods方式集成。

cocoapods集成

pod install 成功之后在项目中引入Lottie的头文件

#import<Lottie/Lottie.h>

首先我们来看一下Lottie提供给我们使用的方法:

在LOTAnimationView.h文件中:

+ (instancetype)animationNamed:(NSString *)animationName NS_SWIFT_NAME(init(name:));//加载本地json动画

+ (instancetype)animationNamed:(NSString *)animationName inBundle:(NSBundle *)bundle NS_SWIFT_NAME(init(name:bundle:));

//加载本地json动画

+ (instancetype)animationFromJSON:(NSDictionary *)animationJSON NS_SWIFT_NAME(init(json:));//直接加载json动画

- (instancetype)initWithContentsOfURL:(NSURL *)url;//网络请求json动画

@property (nonatomic, readonly) BOOL isAnimationPlaying;//判断动画是否在播放

@property (nonatomic, assign) BOOL loopAnimation;//是否要循环播放动画

@property (nonatomic, assign) CGFloat animationProgress;//自定义动画的播放进度

@property (nonatomic, assign) CGFloat animationSpeed;//自定义动画的播放速度

@property (nonatomic, readonly) CGFloat animationDuration;//自定义动画的播放时长

- (void)playWithCompletion:(LOTAnimationCompletionBlock)completion;//动画播放结束之后的回调方法

- (void)play;//开始播放

- (void)pause;//暂停播放

- (void)addSubview:(LOTView *)view toLayerNamed:(NSString *)layer;

更新动画代码:


加载本地json动画

上图就是设置播放本地json动画的全部代码,是不是很简单。

加载网络json动画

上图为加载网络json动画。

注:在加载本地的json动画中不需要手动调用play方法,视图初始化之后会自动播放。但是加载网络json动画需要手动调用play,进行动画的播放。

LOTAnimationView是UIView的一个子分类,所以你只要像执行其他视图一样执行LOTAnimationView就可以了。如果项目中某一个动画的调用非常频繁,Lottie框架还可以对动画进行缓存,引入头文件 #import "LOTAnimationCache.h",以下是供我们使用的API:

+ (instancetype)sharedCache;

- (void)addAnimation:(LOTComposition *)animation forKey:(NSString *)key;

- (LOTComposition *)animationForKey:(NSString *)key;

设置 present/dismiss controller 转场动画:

在需要转场效果的VC中实现UIViewControllerTransitioningDelegate代理中下面的两个方法,就可以设置VC的转场动画了。

设置转场动画

方法传入的参数均为AE导出的json文件名。第二个,第三个参数可以设置也可以不设置。

以上是对Lottie开源库的初步介绍和集成使用方法介绍。示例是以iOS为例。希望对有需要的朋友有所帮助。demo传送门

安卓平台集成和使用方法见下:

Airbnb开源动画库Lottie

Lottie- 让Android动画实现更简单

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

推荐阅读更多精彩内容