iOS动画效果三：CABAsicAnimation实现平移、旋转和放大

使用CABAsicAnimation来实现动画的放缩和旋转是比较常用的，这篇主要介绍CABasicAnimation实现简单的动画效果
最终的效果图为：

CABAsicAnimation实现平移、放大和旋转.gif

Demo地址
对应的实现文件是SecondViewController

首先，我们先定义一个UIView以及三个button按钮，分别对应平移、放大和旋转
在.h文件中定义相应的属性

@property (nonatomic, strong) UIView *myView;
@property (nonatomic, strong) UIButton *transformButton;//平移按钮
@property (nonatomic, strong) UIButton *scaleButton;//旋转按钮
@property (nonatomic, strong) UIButton *rotationButton;//放大按钮

之后，在.m文件中实现相应的懒加载

- (UIView *)myView {
    if (_myView) {
        return _myView;
    }
    _myView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 100)];
    _myView.backgroundColor = [UIColor yellowColor];
    return _myView;
}
- (UIButton *)transformButton {
    if (_transformButton) {
        return _transformButton;
    }
    _transformButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
    [_transformButton setTitle:@"平移按钮" forState:UIControlStateNormal];
    [_transformButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [_transformButton addTarget:self action:@selector(beginTranslationAnimation) forControlEvents:UIControlEventTouchUpInside];
    return _transformButton;
}
- (UIButton *)scaleButton {
    if (_scaleButton) {
        return _scaleButton;
    }
    _scaleButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
    [_scaleButton setTitle:@"放大按钮" forState:UIControlStateNormal];
    [_scaleButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [_scaleButton addTarget:self action:@selector(beginEnlargeAnimation) forControlEvents:UIControlEventTouchUpInside];
    return _scaleButton;
}
- (UIButton *)rotationButton {
    if (_rotationButton) {
        return _rotationButton;
    }
    _rotationButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
    [_rotationButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [_rotationButton setTitle:@"旋转按钮" forState:UIControlStateNormal];
    [_rotationButton addTarget:self action:@selector(beginRotationAnimation) forControlEvents:UIControlEventTouchUpInside];
    return _rotationButton;
}

将UIView以及button添加到界面上

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.navigationController.navigationBar.translucent = NO;
    self.title = @"CABasicAnimation实现平移、放大和旋转操作";
    self.view.backgroundColor = [UIColor whiteColor];
    
    [self.view addSubview:self.myView];
    [self.myView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.top.equalTo(self.view).offset(100);
        make.width.equalTo(@200);
        make.height.equalTo(@100);
    }];
    [self.view addSubview:self.transformButton];
    [self.transformButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.top.equalTo(self.myView.mas_bottom).offset(100);
        make.width.greaterThanOrEqualTo(@0);
        make.height.greaterThanOrEqualTo(@0);
    }];
    [self.view addSubview:self.scaleButton];
    [self.scaleButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.top.equalTo(self.transformButton.mas_bottom).offset(20);
        make.width.greaterThanOrEqualTo(@0);
        make.height.greaterThanOrEqualTo(@0);
    }];
    [self.view addSubview:self.rotationButton];
    [self.rotationButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.top.equalTo(self.scaleButton.mas_bottom).offset(20);
        make.width.greaterThanOrEqualTo(@0);
        make.height.greaterThanOrEqualTo(@0);
    }];
}

之后，我们先来实现平移动画，实现下面的方法

//开始平移动画
- (void)beginTranslationAnimation {
    NSLog(@"开始执行平移动画");
    CABasicAnimation *animation1 = [CABasicAnimation animation];
    //注意：不能使用transform.position.x,那样的话动画无效
    animation1.keyPath = @"position.x";
    animation1.duration = 1.0f;
    animation1.byValue = @(100);
    animation1.beginTime = 0.f;
    //动画维持结束后的状态,如果不加这两句代码，动画运行结束后会恢复最初的动画状态
    animation1.removedOnCompletion = NO;
    animation1.fillMode = kCAFillModeForwards;
    [self.myView.layer addAnimation:animation1 forKey:@"animation1"];
}

这里面遇到挺多坑的，下面逐条说明一下

1.对于CABasicAnimation的平移动画，keyPath不能设置为“transform.position”,前面不能添加transform，但是对于放缩动画和旋转动画，前面必须加transform，后面你可以看到，刚开始被这里卡了好久，加了transform，平移动画不论怎样都不生效，后面以为是anchorPoint和position的问题，还特地花了很长时间去探究这两者对动画的影响，这个可以在CABasicAnimation绕定点旋转时看到这两个属性对动画的影响，后面的文章我会写
2.toValue、byValue和fromValue三者的属性，苹果官方文档有详细的说明，截图在下面

fromValue、toValue和byValue的说明

总的来说，fromValue是最初的动画开始位置，toValue是最终的动画位置，byValue是动画过程中某个属性增加的数值，上面我们设置的keyPath是“position.x”,byValue为100就代表view的position的x位置增加100

3.

image.png

加这两行代码是为了使动画在执行完毕后，保持最终的状态
如果不加这两行代码，动画执行完毕后，会回到最初的状态

接下俩，我们类似添加相应的放大和旋转的动画效果

//开始放大动画
- (void)beginEnlargeAnimation {
    NSLog(@"开始执行放大动画");
    CABasicAnimation *animation2 = [CABasicAnimation animation];
    //必须加transform,不然会不起作用
    animation2.keyPath = @"transform.scale";
    animation2.fromValue = @(1.0);
    animation2.toValue = @(2.0);
    animation2.duration = 1.0f;
    animation2.beginTime = 0.f;
   //动画后保持最终的动画状态
    animation2.removedOnCompletion = NO;
    animation2.fillMode = kCAFillModeForwards;
    [self.myView.layer addAnimation:animation2 forKey:@"animation2"];
}

//开始旋转动画
- (void)beginRotationAnimation {
    NSLog(@"开始执行旋转动画");
    CABasicAnimation *animation3 = [CABasicAnimation animation];
 //必须加上transform才行，不然不起作用，z表示绕z轴旋转
    animation3.keyPath = @"transform.rotation.z";
   //M_PI_2表示90度，在旋转时，使用度数都是使用类似的表达,M_PI代表180度的意思
    animation3.byValue = @(M_PI_2);
    animation3.beginTime = 0.f;
    animation3.duration = 1.0f;
   //动画后保持最终的动画状态
    animation3.removedOnCompletion = NO;
    animation3.fillMode = kCAFillModeForwards;
    [self.myView.layer addAnimation:animation3 forKey:@"animation3"];
}

这样，我们就完成了CABasicAnimation实现平移、放大和旋转的动画效果

这种动画效果使用挺多的

另外，我们阅读苹果开发文档时，我们可以看到协议CAAnimationDelegate，通过这个协议我们可以观察动画的开始和结束。
在平移动画中，让CABasicAnimation遵守这个协议

animation1.delegate = self;

实现相应的协议方法

#pragma mark - CAAnimationDelegate
- (void)animationDidStart:(CAAnimation *)anim {
    NSLog(@"动画开始执行");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    if (flag) {
        NSLog(@"动画正常结束");
    } else {
        NSLog(@"动画被打断，未正常结束");
    }
}

比较重要的是，我们通过协议方法可以判断动画是否正常完成还是被打断，这个我以前就碰到过动画过程被UITableView 的reloadData打断，导致动画表现异常，具体可以看下这篇文章
CAnimationGroup动画执行时间比duration小
)

总结

最终效果图为：

CABAsicAnimation实现平移、放大和旋转.gif

Demo地址

我写的同一系列的其他文章

iOS开发中动画效果的探究(一)

iOS动画效果的探究二：UIView Animation实现动画

iOS动画效果三：CABAsicAnimation实现平移、旋转和放大

ios动画效果四：使用Pop框架实现弹簧效果

iOS动画效果五：CABasicAnimation实现绕定点旋转的效果]

iOS动画效果六：实现自定义的push转场动画

iOS动画效果七：实现自定义present转场动画效果

iOS动画效果八:实现类似系统的测滑返回效果