优雅的利用Lottie实现炫酷的动画效果

Git原文:优雅的利用Lottie实现炫酷的动画效果

      APP中的交互动画对整个APP来说是十分重要的。对用户来说,使用一款APP可能并不是这个APP界面做的绚丽,动画做的美之类的原因。纵然如此,一款APP只有动画优美,界面上做好了,才会吸引到用户,用户才会来使用这个APP

1、为什么用Lottie

      对于一些简单的动画我们开发者可以使用系统提供的一些方法来实现,但是在实际开发中设计师给出的动画都是很炫酷复杂的,如果采用手写代码的方式,就要面对很多问题:

  • (1)、AndroidiOS要针对系统来编写代码动画
  • (2)、同时由于不同系统之间的差异,比如Android能够实现的动画iOS不能实现,即使实现也要花费得不偿失的时间,这就造成在开发中一些动画被去掉或者简单化,最终还是没有达到设计师满意的效果
  • (3)、即使开发者通过代码实现了设计师的效果,可能会和设计师给出的效果有一些出入,这样就造成了沟通和修改的成本
  • (4)、 越是复杂的代码,编写的代码就会越多这样势必会对后期的维护造成很大的成本
  • (5)、 考虑到不断的版本迭代中需求的变更,修改代码也会有很大的成本

所以综上所述的一些问题,此处给诸位推荐一个第三方动画库Lottie

      下面几个gif动画都是用Lottie实现的。

LaunchScreen.gif
refreshAnimationView.gif
background.gif

(1)、Lottie是专门为移动开发设计的一个第三方库,目前支持Android、iOS 、Web、React Native等平台;
(2)、Lottie同时支持页面切换的过场动画(UIViewController Transitions)
(3)、Lottie的使用非常简单,直接读取资源文件或者读取服务器资源链接即可;
(4)、开发者可以轻松控制动画(播放进度、播放帧数、背景颜色等);
(5)、Lottie是设计师通过After Effects将动画导出JSON文件,然后由Lottie加载和渲染这个文件并转成相应的代码,由于是JSON文件,文件也会很小,可以减少App包的大小
(6)、把动画制作和APP开发的工作分开,由设计师来完成动画的制作

2、Lottie 的实现原理

Lottie在iOS上的实现是:将After Effects编辑的动画内容,通过JSON作为媒介一一映射到iOS的 LayerModel、Keyframe、ShapeItem、DashElement、Marker、Mask、Transfrom这些类的属性中并保存了下来,然后 再通过CoreAnimation进行渲染。

3、Lottie 的简单使用

1、 导入工程

Lottie的使用非常简单,只要集成了Lottie框架,然后在程序中通过Loattie的接口控制设计通过AE生成的JSON就行了。
官方推荐iOS开发者使用PodCarthage来管理,其他平台开发者可参考Lottie官网给出的方案。个人比较推荐适用Carthage来管理第三方库。

  • CocoaPods
    Podfile文件中导入:
pod 'lottie-ios'

cd到工程目录下执行安装命令即可:

pod install
  • Carthage
touch Cartfile
github "airbnb/lottie-ios"
carthage update --platform iOS
2、 初始化一个动画

在需要的Lottie动画的类引入头文件,

import Lottie
// 加载本地资源
 let path : String = Bundle.main.path(forResource: "Refresh", ofType: "json")!
 let lottieAnimationView = AnimationView.init(filePath: path)
 let lottieAnimationView = AnimationView.init(name: "Refresh")
// load from URL
 let animationView = LOTAnimationView(contentsOf: WebURL)
 let lottieAnimationView = AnimationView.init(url: WebURL, closure:{
           down in
  })
3、动画的播放和控制

运行代码,此时动画只停在第一帧,因为并没有让动画执行,执行播放:

 lottieAnimationView.play()

如果在动画执行完 还有其他的逻辑,可使用:

 lottieAnimationView.play { (animationFinished) in
    print("其他相关业务");
 }

如果需要这个动画循环播放:

lottieAnimationView.loopMode = .loop

同时可以控制帧数和播放进度来实现顺序播放或者逆序播放:

// 播放进度
lottieAnimationView.play(fromProgress: 0.25, toProgress: 0.5, loopMode: .loop) { (animationFinished) in
            
 }
// 播放帧数
lottieAnimationView.play(fromFrame: 0, toFrame: 5, loopMode: .loop) { (animationFinished) in

}

如果需要逆序播放,只需将帧数或进度的顺序调整即可,如顺序是0 --> 5帧,逆序则是5 --> 0:

lottieAnimationView.play(fromProgress: 0.5, toProgress: 0.25, loopMode: .loop) { (animationFinished) in
            
 }

lottieAnimationView.play(fromFrame: 5, toFrame: 0, loopMode: .loop) { (animationFinished) in

}

在使用Lottie动画时,由于程序业务关系,我们需要在这段动画没有执行完之前就执行下一段动画,此时可直接从某一帧执行:

 loadingAnimationView.play(fromFrame: 20, toFrame: 50, loopMode: .loop) { (animationFinished) in
            
        }

如果要停止动画并保持当前帧数,可使用pause(),
如果要停止动画并回到初始帧,可使用stop()

lottieAnimationView.pause()
lottieAnimationView.stop()

更多使用,如修改关键帧数的参数颜色等可参考Lottie官网

4、总结

对于程序中比较复杂的动画用iOS系统为开发者提供的API无法实现的,建议使用Lottie动画,对于一些简单的动画,建议使用系统提供的API来实现,可以参考iOS核心动画技巧
以上是我在使用Lottie时的一些总结,更多使用请参考Github


本文demo Swift
本文demo OC
Lottie官方demo
友情链接:SVGA

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

推荐阅读更多精彩内容

  • 当晚,九龙给我打电话,约我出来玩。我婉拒了。九龙说我不够意思,不把他们当朋友。 我转念一想,多个朋友也没什么,反正...
    左耳莫沫阅读 3,654评论 1 1
  • 江阳韵 彌漫的霜 枯萎的黃滿眼里壹片盡是蒼涼沒有天堂 不能遺忘冰冷著最後的嚮往 有些彷徨 無法阻擋就像晦暗會吞噬光...
    易似非阅读 639评论 0 0
  • 《月思》 ——荒瞳 天上一壶月,流入万湖心。 身是山外客,月是故乡明。
    说书人荒瞳阅读 426评论 2 2