动画示例（一） —— 一种外扩的简单动画

版本记录

版本号	时间
V1.0	2017.12.12

前言

如果你细看了我前面写的有关动画的部分，就知道前面介绍了CoreAnimation、序列帧以及LOTAnimation等很多动画方式，接下来几篇我们就以动画示例为线索，进行动画的讲解。相关代码已经上传至GitHub - 刀客传奇。

功能需求

实现外扩的那种动画，有点像水中掉落物体引起的涟漪一样。

---

功能实现

下面我们就直接看代码。

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UIButton *alertButton;

@end

@implementation ViewController

#pragma mark -  Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor lightGrayColor];
    
    UIButton *alertButton = [UIButton buttonWithType:UIButtonTypeCustom];
    alertButton.frame = CGRectMake(self.view.bounds.size.width * 0.5 - 50.0, self.view.bounds.size.width * 0.5 - 50.0, 100.0, 100.0);
    [alertButton addTarget:self action:@selector(alertButtonDidClick:) forControlEvents:UIControlEventTouchUpInside];
    alertButton.backgroundColor = [UIColor redColor];
    alertButton.layer.cornerRadius = 50.0;
    alertButton.layer.masksToBounds = YES;
    [self.view addSubview:alertButton];
    self.alertButton = alertButton;
}

#pragma mark -  Object Private Function

- (void)alertButtonDidClick:(UIButton *)button
{
    CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    animation.duration = 1.0;
    
    NSMutableArray *values = [NSMutableArray array];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.8, 0.8, 1.0)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2, 1.2, 1.0)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9, 0.9, 1.0)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]];
    animation.values = values;
    [self.alertButton.layer addAnimation:animation forKey:nil];
}

@end

---

功能效果

下面我们就看一下实现的效果。

后记

未完，待续~~~