APP中的交互动画对整个APP来说是十分重要的。对用户来说,使用一款APP可能并不是这个APP界面做的绚丽,动画做的美之类的原因。纵然如此,一款APP只有动画优美,界面上做好了,才会吸引到用户,用户才会来使用这个APP。对于一些简单的动画我们开发者可以使用系统提供的一些方法来实现,但是在实际开发中,也会遇到一些系统提供的动画难以实现的效果,此处给诸位推荐一个第三方动画库Lottie。
Lottie 是一个可应用于Andriod和iOS的动画库,它通过bodymovin插件来解析Adobe After Effects动画并导出为json文件,通过手机端原生的方式或者通过React Native的方式渲染出矢量动画。
1、为什么用Lottie
(1)、Lottie是专门为移动开发设计的一个第三方库,目前支持Android、iOS 、Web、React Native等平台;
(2)、Lottie的使用非常简单,直接读取资源文件或者读取服务器资源链接即可;
(3)、开发者可以轻松控制动画(播放进度、播放帧数等);
2、Lottie目前存在的问题
(1)、我个人使用中发现非常消耗手机内存和CPU使用率,尤其是渲染的面积越大这个问题越明显;
我在APP中开启这段动画时,手机CPU使用率和内存瞬间增长,个人觉得可能由于动画需要实时渲染,所以动画面积越大,对手机资源消耗就越大。
针对这种情况,个人建议如果不是常驻的动画,在使用完后立即移除,而不是hidden,
lottie三方框架地址:https://github.com/airbnb/lottie-ios
总而言之,咱们开发人员有了这个三方框架,再也不用去苦恼各种动画的实现了,还得跟UI设计人员扯皮。这个框架,UI设计人员将动画图制作好了后,利用工具转为json文件,咱们通过框架提供的方法加载json就可以实现各种精彩的动画,但是有一个缺点,这个框架的动画效果只能作为展示,不能产生交互行为。进入正题,开始集成。
一、通过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来使用它,这也是最常用的一种方式。
在需要的Lottie动画的类引入头文件,
以上是我在使用Lottie时的一些总结,更多使用请参考Github。
本文demo:戳这里
网友评论