lottie-ios 的集成及使用

Lottie 是一个可应用于Andriod和iOS的动画库,它通过bodymovin插件来解析Adobe After Effects 动画并导出为json文件,通过手机端原生的方式或者通过React Native的方式渲染出矢量动画。
lottie三方框架地址:https://github.com/airbnb/lottie-ios

总而言之,咱们开发人员有了这个三方框架,再也不用去苦恼各种动画的实现了,还得跟UI设计人员扯皮。这个框架,UI设计人员将动画图制作好了后,利用工具转为json文件,咱们通过框架提供的方法加载json就可以实现各种精彩的动画,而且LOTAnimationView继承自UIView,可以给它添加手势和frame。进入正题,开始集成。

一、通过cocoapods集成。

1.在你的podfile中添加:
pod 'lottie-ios'

2.运行
pod install

  • 假如你的项目之前集成过其他三方,比如Masonry,这个时候你编译项目,可能会报code1错误,当然没报错最好。稍安勿躁,人家官方文档说了,还得安装Carthage。

二、安装Carthage

1、安装 Homebrew
  • 将以下命令粘贴至终端即可
    第一步:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

第二步:

brew update
2、安装 Carthage
brew install carthage

可通过下面这条命令来查看版本。

carthage version
3、使用 Carthage 安装依赖

第一步:

cd ~/路径/项目文件夹

第二步:创建一个空的 Carthage 文件 Cartfile

touch Cartfile

第三步:使用 Xcode 打开 Cartfile 文件

open -a Xcode Cartfile

第四步:在cartfile里面加一行代码

github "airbnb/lottie-ios" "master"

第五步:终端执行更新命令

carthage update --platform iOS
OK,你再编译项目试试,,这个时候code1错误没有了。是不是很惊喜。注意:项目名字最好为英文,因为这个框架是国外的,假如项目名字包含中文也会出现想像不到的错误。

那么问题来了,这个时候可能会出现这种情况:导入头文件还有索引,但是导入后总是报错,报找不到那个头文件,这种时候,只需多重启几次Xcode。就能OK

三、lottie的使用

Lottie支持iOS 8 及其以上系统。当我们把动画需要的images资源文件添加到Xcode的目标工程的后,Lottie 就可以通过JSON文件或者包含了JSON文件的URL来加载动画。

  • 最简单的方式是用LOTAnimationView来使用它,这也是最常用的一种方式。
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
  // Do Something
}];
  • 如果你使用到了多个bundle文件,你可以这么做:
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
  // Do Something
}];
  • 或者你可以用代码通过NSURL来加载,这种情况一般是将动画效果保存在服务器,动态加载。
LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];

Lottie 支持iOS中的UIViewContentModes的 aspectFit, aspectFill 和 scaleFill这些属性。

  • 你可以控制动画的进度
CGPoint translation = [gesture getTranslationInView:self.view];
CGFloat progress = translation.y / self.view.bounds.size.height;
animationView.animationProgress = progress;
  • 想要任意视图来给Lottie View中的动画图层做遮罩吗 ?只要你知道After Effects中对应的图层的名字,那就是小菜一碟的事了:
UIView *snapshot = [self.view snapshotViewAfterScreenUpdates:YES];
[lottieAnimation addSubview:snapshot toLayerNamed:@"AfterEffectsLayerName"];
  • Lottie 带有一个UIViewController动画控制器,可以用来自定义转场动画!
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
                                                                  presentingController:(UIViewController *)presenting
                                                                      sourceController:(UIViewController *)source {
  LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
                                                                                                          fromLayerNamed:@"outLayer"
                                                                                                            toLayerNamed:@"inLayer"];
  return animationController;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容

  • Lottie介绍 “Lottie is a mobile library for Android and iOS ...
    刘明洋阅读 1,784评论 4 2
  • Lottie 应用于iOS、MacOS(以及Android 和React Native) 本文由CRAnimati...
    好尼桑阅读 7,595评论 19 40
  • 前言 在开发APP的过程中,需要在APP中实现设计同学的UE效果动画,一般都是通过代码实现的,当对于较复杂的动画时...
    Japho阅读 65,025评论 27 117
  • 又见星星 不想再错过它 都市多少繁华 不抵它晶莹 人都散了 古镇静了 坐在桥边 唱着歌 和它对着话
    东隅之桑阅读 151评论 0 3
  • 老子身为写作者 口无美食妄为 衣无华服妄为 住无豪宅妄为 坐无小车妄为 用无神器妄为 老子身为写作者 不食人间烟火...
    状元大人阅读 159评论 0 4