利用lottie打造app完美动画

一款好的app总是不会缺少吸引用户并且有意义的动画,在app中适当加入经过精准设计的动画能极大的提升用户体验.
对于专业的设计师来说设计一款飘逸灵动的动画也许并不是什么难题,但是对于开发者来说,当动画或者视图切换非常复杂时,是很难百分百的将这个动画在app中完美地展现出来的,飘逸炫酷的动画意味着代码量和难度剧增.
但有了Airbnb开发的Lottie，开发者就可以免去写一行一行的代码而非常容易地渲染动画了。你可以直接把 Adobe After Effects的动画用在你的Xcode 项目中。这真的非常实用并且还能把你实现动画的大量时间节省下来。
说来惭愧,lottie出来好几个月了,我也是刚刚研究,以下是我用lottie制作出的动画效果,初出茅庐,做工难免粗糙:

test-lottieDemo.gif

那么接下来笔者主要说说两点:

1.制作这种lottie动画需要的材料
2.项目中需要的相关代码

材料

1.这里推荐一个有大量免费lottie资源的网站, 在这里你可以找到并且下载你钟意的动画
2.下载完成后将 .json 文件导入到你的Xcode项目中,像这样就OK啦!

项目中导入json文件.png

代码

1.pod中导入第三方库

pod中导入lottie库.png

2.相关代码

//
//  ViewController.m
//  test-lottieDemo
//
//  Created by 邓昊 on 2017/8/23.
//  Copyright © 2017年 HarrisDeng. All rights reserved.
//

#import "ViewController.h"
#import <Lottie/Lottie.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];
    
    [self animaWithName:@"check" Frame:CGRectMake(10, 0, 180, 180)];
    [self animaWithName:@"servishero_loading" Frame:CGRectMake(220, 0, 180, 180)];
[self animaWithName:@"cursoranim" Frame:CGRectMake(10, 260, 180, 180)];
    [self animaWithName:@"like_animation" Frame:CGRectMake(220, 260, 180, 180)];
    [self animaWithName:@"loading.." Frame:CGRectMake(10, 450, 180, 180)];
    [self animaWithName:@"playing" Frame:CGRectMake(220, 450, 180, 180)];
        
}

- (void)animaWithName:(NSString *)name Frame:(CGRect )frame{
    LOTAnimationView *animationView = [LOTAnimationView animationNamed:name];
    [animationView setFrame:frame];
    animationView.loopAnimation = YES;
    animationView.contentMode = UIViewContentModeScaleAspectFill;
    animationView.animationSpeed = 0.5;
    animationView.transform = CGAffineTransformMakeScale(0.1, 0.1);
    [UIView animateWithDuration:3.0 delay:0.0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
        animationView.transform = CGAffineTransformIdentity;
    } completion:^(BOOL finished) {
        [self.view addSubview:animationView];
        [animationView play];
    }];
}

这样就可以在你的项目中展示刚才下载的lottie动画啦,是不是so easy?