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"]; }