iOS动画实战之Lottie动画

介绍

若是你还不知道Lottie是什么, 那你真的out了.

若是把iOS动画分为两类: 交互式动画, 播放式动画, 那么其中的播放动画彻底可使用Lottie来完成, 例如:

做为收藏按钮, 是否是很活泼?

返回与菜单之间的切换, 生动有趣!

还有各类形变更画.

这里先放上Lottie的地址: github.com/airbnb/lott…

更棒的是, Lottie有各类不一样的版本, 安卓, iOS, 前端均可以使用, 理论上动画作一套就能够共用, 大大的减小了工做量.

使用方法

1. 集成环境: 移动端同窗集成Lottie框架, UI/UE同窗集成AE的bodymovin插件
2. 制做动画, 导出文件, 拖进工程
3. 建立LOTAnimationView, 并播放

很是简单, 下面看两个实际例子

实战

先看第一个例子:

典型的形变更画加上几个普通动画融合在一块儿, 若是由程序员来写, 确实还要花一番心思, 使用Lottie就很是容易了.

viewDidLoad时加载动画, 在视图显示出来时播放, 播放完了移除. 就是这么简单.

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];

    if (_launchMask && _launchAnimation) {
        WeakObj(self);
        [_launchAnimation playWithCompletion:^(BOOL animationFinished) {

            [UIView animateWithDuration:0.3 animations:^{
                selfWeak.launchMask.alpha = 0;
            } completion:^(BOOL finished) {
                [selfWeak.launchAnimation removeFromSuperview];
                selfWeak.launchAnimation = nil;
                [selfWeak.launchMask removeFromSuperview];
                selfWeak.launchMask = nil;
            }];
        }];
    }
}


- (void)setupLaunchMask{
    _launchMask = [[UIView alloc] initWithFrame:self.view.bounds];

    [JRKeyWindow addSubview:_launchMask];

    _launchAnimation = [LOTAnimationView animationNamed:@"data"];
    _launchAnimation.cacheEnable = NO;
    _launchAnimation.frame = self.view.bounds;
    _launchAnimation.contentMode = UIViewContentModeScaleToFill;
    _launchAnimation.animationSpeed = 1.2;

    [_launchMask addSubview:_launchAnimation];
}复制代码

甚至能够用在引导页中, 代码都很简单, 就不重复贴了. 值得注意的是, 像这样屡次使用到Lottie时必定要注意素材的名字不能同样, 不然动画就是错乱的, 简单讲一讲怎么改.

这是一个动画资源的文件结构, 若是修改了img_0.png及其文件夹, 则须要在Json文件中修改对应的内容

这就是Json文件中的内容, 最上面一部分包含了素材路径, 素材名称, 注意修改好就ok.

第二个例子:

动画有小鱼的尾巴摇动, 眼睛眨, 鱼鳍煽动, 背后的小泡泡时隐时现, 随机运动, 这让程序员来一个个写, 效率必然很低. 使用Lottie则简单不少, 咱们公司的高级UI写完这个简直不要过轻松.

让UI同窗导出动画时将第一帧截取出来做为启动页静态图, 在第一个视图加载的地方设置动态动画.

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];

    if (_launchMask && _launchAnimation) {
        WeakObj(self);
        [_launchAnimation playWithCompletion:^(BOOL animationFinished) {

            [UIView animateWithDuration:0.3 animations:^{
                selfWeak.launchMask.alpha = 0;
            } completion:^(BOOL finished) {
                [selfWeak.launchAnimation removeFromSuperview];
                selfWeak.launchAnimation = nil;
                [selfWeak.launchMask removeFromSuperview];
                selfWeak.launchMask = nil;
            }];
        }];
    }
}


- (void)setupLaunchMask{
    _launchMask = [UIImageView imageViewWithFrame:self.view.bounds image:[UIImage imageNamed:@"launchAnimationBg"]];

    [self.view addSubview:_launchMask];

    _launchAnimation = [LOTAnimationView animationNamed:@"launchAnimation"];
    _launchAnimation.cacheEnable = NO;
    _launchAnimation.frame = self.view.bounds;
    _launchAnimation.contentMode = UIViewContentModeScaleToFill;
    _launchAnimation.animationSpeed = 1.2;

    [_launchMask addSubview:_launchAnimation];
}复制代码

几点值得注意的是:

1. 我这建立一个UIImageView做为背景, 是拆分了动画, 将不动的部分做为背景, 避免内存中加载的图片过多, 后面会细说这个问题.

2. LOTAnimationView这个类就是动画自己了, 也能够设置contentMode, 因此为了适配, 这个属性应该与启动页图片一致(建议启动页用Storyboard + UIImageView).

3. 在视图加载完成以后调用_launchAnimation的play方法, 完成以后渐变色隐藏并置空.

很容易的, 一个精美的启动动画就完成了.

总结

看完了本篇文章, 你会发现动画居然如此简单, 那咱们之后动画全用Lottie来实现? 其实Lottie也有必定的限制

Lottie是基于CALayer的动画, 全部的路径预先在AE中计算好, 转换为Json文件, 而后自动转换为Layer的动画, 因此性能理论上是很是不错的, 在实际使用中, 确实很不错, 可是有几点须要注意的:

• 若是使用了素材, 那么素材图片的每一个像素都会直接加载进内存, 而且是不能释放掉的(实测, 在框架中有个管理cache的类, 并无启动到做用, 若你们找到方法请告诉我), 因此, 若是是一些小图片, 加载进去也还好, 可是若是是整页的启动动画, 如上面的启动页动画, 不拆分一下素材, 可能一个启动页所须要的内存就是50MB以上. 若是不使用素材, 而是在AE中直接绘制则没有这个问题.

• 若是使用的PS中绘制的素材, 在AE中作动画, 可能在动画导出的素材中出现黑边, 个人解决办法是将素材拖入PS去掉黑边, 同名替换.

• 拆分素材的办法是将一个动画中静态的部分直接切出来加载, 动的部分单独作动画

• 若是一个项目中使用了多个Lottie的动画, 须要注意Json文件中的路径及素材名称不能重复, 不然会错乱

• 不支持渐变色

• 不支持AE中的mask属性

• Lottie先天就支持播放式动画, 对于交互式动画有个animationProgress的属性(待核实)

基于以上的问题, 建议使用Lottie的场合为复杂的播放式形变更画, 由于形变更画由程序员一点点的写路径确实不直观且效率低. 但即使如此, Lottie也是咱们在CoreAnimation以后一个很好的补充.

以上健呗的Demo地址: github.com/syik/JR

直播伴侣地址: github.com/syik/Bullet…

这是一个已经上架的App, 你们能够直接在App Store中找到使用. 上一篇文章为此App中CoreAnimation与CoreGraphics可交互式图表实战.若你们以为写得有用, 不吝啬打赏一个Star~, 谢谢~