版本記錄

前言

如果你細看了我前面寫的有關動畫的部分，就知道前面介紹了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}]}

功能效果

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

后記

未完，待續~~~