版本记录

版本号	时间
V1.0	2017.12.13

前言

如果你细看了我前面写的有关动画的部分，就知道前面介绍了CoreAnimation、序列帧以及LOTAnimation等很多动画方式，接下来几篇我们就以动画示例为线索，进行动画的讲解。相关代码已经上传至GitHub - 刀客传奇。感兴趣的可以看我写的前面几篇。
1. 动画示例（一） —— 一种外扩的简单动画
2. 动画示例（二） —— 一种抖动的简单动画

功能要求

今日头条加载的时候，会有一种动画，下面我们就看一种简单的动画。

---

功能实现

下面我们就看一下功能实现，看代码。

#import "ViewController.h"
#import "Lottie.h"
#import "Masonry.h"

@interface ViewController ()

@property (nonatomic, strong) UIImageView *imageView;
@property (nonatomic, strong) LOTAnimationView *circleAnimation;
@property (nonatomic, strong) LOTAnimationView *liveAnimation;;

@end

@implementation ViewController

#pragma mark -  Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor lightGrayColor];
    
    [self initUI];
}

#pragma mark -  Object Private Function'

- (void)initUI
{
    //头像后面的外扩动画
    CGRect frame = CGRectMake(0, 0, 180, 180);
    LOTAnimationView *circleAnimation = [LOTAnimationView animationNamed: @"homepage_circle"];
    circleAnimation.frame = frame;
    circleAnimation.contentMode = UIViewContentModeScaleAspectFill;
    circleAnimation.clipsToBounds = YES;
    circleAnimation.loopAnimation = YES;
    [self.view addSubview: circleAnimation];
    self.circleAnimation = circleAnimation;
   
    
    //头像
    self.imageView = [[UIImageView alloc] init];
    self.imageView.frame = CGRectMake(self.view.bounds.size.width * 0.5 - 50.0, 200.0, 100.0, 100.0);
    self.imageView.backgroundColor = [UIColor blueColor];
    self.imageView.layer.cornerRadius = 50.0;
    self.imageView.layer.masksToBounds = YES;
    [self.view addSubview:self.imageView];
    
    self.circleAnimation.center = self.imageView.center;
    
    //直播中动画
    LOTAnimationView *liveAnimation = [LOTAnimationView animationNamed: @"homepage_live"];
    liveAnimation.loopAnimation = YES;
    [self.view addSubview: liveAnimation];
    self.liveAnimation = liveAnimation;
    [self.liveAnimation mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.imageView);
        make.top.equalTo(self.imageView.mas_bottom).offset(50.0);
        make.width.equalTo(@100.0);
        make.height.equalTo(@50.0);
    }];
    
    [self.circleAnimation play];
    [self.liveAnimation play];
}

@end

这里homepage_circle和homepage_live里面都是Json字符串，下面给出homepage_circle一部分Json数据。

{"v":"4.13.0","fr":8,"ip":0,"op":14,"w":248,"h":248,"nm":"圆","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"形状图层 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":7,"s":[100],"e":[0]},{"t":11.0001171875}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[126,127,0],"ix":2},"a":{"a":0,"k":[-250,427,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[30,30,100],"e":[130,130,100]},{"t":11.0001171875}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[158.266,158.266],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"椭圆路径 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":50,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":35,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-251.672,424.828],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[111.85,111.85],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"椭圆 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":40,"st":10.88,"bm":0}]}

---

功能效果

下面我们就看一下功能效果。

后记

未完，待续~~~