使用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
我写的同一系列的其他文章
iOS动画效果的探究二：UIView Animation实现动画
iOS动画效果三：CABAsicAnimation实现平移、旋转和放大
