实现动画方式深度解析（三） —— 播放序列帧动画（一）

版本记录

版本号	时间
V1.0	2017.09.17

前言

app中好的炫的动画可以让用户耳目一新，为产品增色不少，关于动画的实现我们可以用基本动画、关键帧动画、序列帧动画以及基于CoreGraphic的动画等等，接下来这几篇我就介绍下我可以想到的几种动画绘制方法。具体Demo示例已开源到Github —— 刀客传奇，感兴趣的可以看我写的另外几篇。
1. 实现动画方式深度解析（一） —— 播放GIF动画（一）
2. 实现动画方式深度解析（二） —— 播放GIF动画之框架FLAnimatedImage的使用（二）

序列帧动画

序列帧动画就是将动画的帧序列一帧一帧的播放，从而实现了动画。

---

功能实现

下面我会给出示例代码。

#import "ViewController.h"

#define kJJTomVCColumnNumber   2

@interface ViewController ()

@property (nonatomic, strong) UIImageView *imageView;
@property (nonatomic, strong) NSDictionary *animationDict;

@end

@implementation ViewController

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.animationDict = [NSDictionary dictionary];
    
    [self loadDict];
    
    [self setupUI];
}

#pragma mark - Object Private Function

- (void)setupUI
{
    self.view.backgroundColor = [UIColor whiteColor];
    
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.frame];
    self.imageView = imageView;
    self.imageView.image = [UIImage imageNamed:@"tom"];
    [self.view addSubview:imageView];
    
    for (NSString *temp in self.animationDict) {
        [self addButtonsWithKey:temp];
    }
}

- (void)addButtonsWithKey:(NSString *)key
{
    static NSInteger i = 0;
    NSInteger btnW = 30 ,btnH = 30, btnX ,btnY, spaceX = 250, spaceY = 200;
    UIButton *button = [[UIButton alloc] init];
    [button setTitle:key forState:UIControlStateNormal];
    button.titleLabel.textAlignment = NSTextAlignmentCenter;
    [button setImage:[UIImage imageNamed:key] forState:UIControlStateNormal];
    btnX = 30 + spaceX * (i % kJJTomVCColumnNumber);
    btnY = 50 + spaceY * (i / kJJTomVCColumnNumber);
    button.frame = CGRectMake(btnX, btnY, btnW, btnH);
    i++;
    
    [button addTarget:self action:@selector(playAnimationWithkey:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

- (void)loadDict
{
    NSDictionary *dict = [NSDictionary dictionaryWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"tom.plist" withExtension:nil]];
    self.animationDict = dict;
}

#pragma mark - Action && Notification

- (void)playAnimationWithkey:(UIButton *)button
{
    NSMutableArray *animationArr = [NSMutableArray array];
    
    for (NSInteger i = 0; i < [self.animationDict[button.titleLabel.text] integerValue]; i++) {
        
        NSString *imageName = [NSString stringWithFormat:@"%@_%02zd",button.titleLabel.text,i];
        NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageName ofType:@"jpg"];
        UIImage *image = [UIImage imageWithContentsOfFile:imagePath];
        [animationArr addObject:image];
    }
    
    self.imageView.animationImages = animationArr;
    self.imageView.animationRepeatCount = 1;
    self.imageView.animationDuration = 2;
    [self.imageView startAnimating];
}

@end

---

功能验证

下面看一下功能效果。

每一个动画都是序列帧的动画。

后记

未完，待续~~~