CoreAnimation动画位于iOS框架的Media层
CoreAnimation动画实现需要添加QuartzCore.Framework
CoreAnimation基本上是Layer Animation
CoreAnimation分类:
隐式动画:无需指定任何动画的类型,仅仅改变一个属性,然后Core Animation来决定如何何时去做动画。
显示动画:对一些属性做指定的自定义动画,或者创建非线性动画,比如沿着任意一条曲线移动。
CoreAnimation作用:
与UIView动画相比,CoreAnimation能够实现更多复杂、好看高效的动画效果。
隐式动画
简单说明:
每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层)
所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画
什么是隐式动画?
当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果
而这些属性称为Animatable Properties(可动画属性)
列举几个常见的Animatable Properties:
bounds:用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
position:用于设置CALayer的位置。修改这个属性会产生平移动画
- (void)viewDidLoad
{
[super viewDidLoad];
//创建图层
CALayer *mylayer=[CALayer layer];
//设置图层属性
mylayer.backgroundColor=[UIColor brownColor].CGColor;
mylayer.bounds=CGRectMake(0, 0, 150, 100);
//显示位置
mylayer.position=CGPointMake(100, 100);
mylayer.anchorPoint=CGPointZero;
mylayer.cornerRadius=20;
//添加图层
[self.view.layer addSublayer:mylayer];
self.layer=mylayer;
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//隐式动画
self.layer.bounds=CGRectMake(0, 0, 200, 60);
self.layer.backgroundColor=[UIColor yellowColor].CGColor;
}
开关隐式动画
[CATransaction begin];
[CATransaction setDisableActions:YES];
//隐式动画
self.layer.bounds=CGRectMake(0, 0, 200, 60);
self.layer.backgroundColor=[UIColor yellowColor].CGColor;
[CATransaction commit];
如何查看CALayer的某个属性是否支持隐式动画
1、可以查看头文件,看有没有Animatable,如果有则表示支持
2、查看官方文档
文档中标明的这些属性都是支持隐式动画的
显示动画:
CABasicAnimation动画:
- (IBAction)basicAnimation:(id)sender {
// 第一步:创建动画的对象
CABasicAnimation *basicAnimation = [CABasicAnimation animation];
// 第二步:告诉layer层需要执行什么样子的动画[后边设置的内容为CALayer的相关属性]
basicAnimation.keyPath = @"position";
// 第三步:告诉Layer从哪里来,要到哪里去
basicAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];
// 注意:如果要实现移动到的位置不回到原来的位置,需要设置以下两句代码
basicAnimation.removedOnCompletion = NO;
// 设置保存动画状态的内容
basicAnimation.fillMode = kCAFillModeForwards;
// 第四步:设置动画持续的时长
basicAnimation.duration = 6;
// 第五步:将要执行的动画添加到calayer上
[self.imageView.layer addAnimation:basicAnimation forKey:@"basic"];
/********翻转效果********/
CABasicAnimation *basic = [CABasicAnimation animation];
basic.keyPath = @"transform";
// 设置翻转到的地方
basic.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0, 0, 1)];
basic.duration = 2;
[self.imageView.layer addAnimation:basic forKey:@"aaa"];
// 根据key去移除动画
[self.imageView.layer removeAnimationForKey:@"basic"];
}
CAKeyframeAnimation动画:
- (IBAction)keyFrameAnimation:(id)sender {
// 第一步创建对象
CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
// 第二步:设置轨迹
keyFrameAnimation.keyPath = @"transform.rotation";
// 第三步:设置翻转的角度(弧度的计算公式:度数/ 180 *M_PI)
keyFrameAnimation.values = @[@(-4/180.0*M_PI), @(4/180.0*M_PI), @(18/180.0*M_PI)];
// 第四步:设置时长
keyFrameAnimation.duration = 3;
// 第五步:添加动画到layer层
[self.imageView.layer addAnimation:keyFrameAnimation forKey:@"bb"];
}
CAAnimationGroup动画:
- (IBAction)animationGroupAnimation:(id)sender {
// 平移动画
CABasicAnimation *basicAnimation1 = [CABasicAnimation animation];
basicAnimation1.keyPath = @"transform.translation.y";
basicAnimation1.toValue = @(400);
// 翻转动画
CABasicAnimation *basicAnimation2 = [CABasicAnimation animation];
basicAnimation2.keyPath = @"transform.scale";
basicAnimation2.toValue = @(0.8);
// 旋转动画
CABasicAnimation *basicAnimation3 = [CABasicAnimation animation];
basicAnimation3.keyPath = @"transform.rotation";
basicAnimation3.toValue = @(M_PI);
// 需要创建管理各个动画的动画组
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[basicAnimation1, basicAnimation2, basicAnimation3];
group.duration = 5.0f;
[self.imageView.layer addAnimation:group forKey:@"groupAnimation"];
}
CASpringAnimation动画:
- (IBAction)springAnimation:(id)sender {
CASpringAnimation *springAnimation = [CASpringAnimation animation];
springAnimation.keyPath = @"transform.scale";
springAnimation.fromValue = @1;
springAnimation.toValue = @0.25;
springAnimation.duration = 3;
[self.imageView.layer addAnimation:springAnimation forKey:@"aas"];
}