11、iOS 开发之 CALayer 和核心动画

最新推荐文章于 2021-11-15 18:00:33 发布

王的博

最新推荐文章于 2021-11-15 18:00:33 发布

阅读量670

点赞数

分类专栏： ios开发

本文链接：https://blog.youkuaiyun.com/wangbo_neuq/article/details/48081811

版权

ios开发专栏收录该内容

21 篇文章

订阅专栏

一、理解图层与UIView的关系

1.UIView能显示在屏幕上，是因为里面有个图层，UIView的DrawRect方法，会将绘制的东西绘在图层上，当要显示的时候，将图层拷贝到屏幕上进行显示

二、CALayer的基本属性

1.尺寸(bounds)
2.背影颜色(backgroundColor)
3.位置(position)
4.边框颜色(borderColor)、边框长度(borderWidth) "配合使用才有效果"
5.圆角(cornerRadius)
6.内容对象(contents) 通常设置图片,
  *如果要显示圆角效果，必须设置图层的masksToBounds为YES,意思是把多余的剪切掉
7.阴影属性
  *阴影颜色(shadowColor)、阴影透明度(shadowOpacity) "要配合使用才有效果"
  *阴影起始位置(shadowOffset)
  *如果图片添加了圆角并设置了剪切掉多余的部分，阴影效果不会出现
  *如果又想图片有圆角效果，又想有阴影，那图片只能是本来就有圆角效果的，不用代码设置


8. transform(CATransform3D)属性
   *缩放CATransform3DMakeScale
   *旋转CGAffineTransformMakeRotation,理解xyz方向的意思
   *平移CATransform3DMakeTranslation
   *熟练transform里的key Paths 如transform.scale transform.rotation transform.translation
   *查看文档，搜索CATransform3D key paths，了解更多key paths属性

三、UIView与CALayer的细节

1.CALayer属于QuartzCore框架与 CGColor所属于CoreGraphics框架
QuartzCore框架与CoreGraphics框架都是可跨平台使用，能在iOS和Mac OS X上都能使用
2.UIView比CALayer多了一个事件处理的功能

四、position和anchorPoint

/*目标
*掌握position和anchorPoint的关系
*/

五、隐式动画

“什么是隐式动画，直接改变属性就会有动画效果”

1.根层与非根层,
*控件的layer属性是根层
*控件的layer属性的子层就是非根层

2.非根层有隐式动画,根层是没有隐式动画的

3.隐藏动画怎么禁止

/*
 [CATransaction begin];
 [CATransaction setDisableActions:YES];
 //设置隐式动画动画时间
  self.myview.layer.position = CGPointMake(10, 10);
 [CATransaction commit];
 */

六、自定义图层

1.自定义图层实现【drawInContext:】绘制自己想要的东西到图层
2.如果自定图层，要显示时要调用图层的setNeedsDisplay方法
//只有显示的调用setNeedsDisplay方法才会调用 drawInContext:方法
-(void)drawInContext:(CGContextRef)ctx{
CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 50, 50));
CGContextFillPath(ctx);

七、核心动画

/*目标：
 *掌握核心动画的类结构
 *
 */

1、CABasicAnimation

①相关属性
*keyPath 动画类型
/*如
 *平移动画: position/transform.translation.x
 *旋转动画: transform.rotation/transform.rotation.x/transform.rotation/rotation.y
 *缩放动画: bounds/transform.scale/transform.scale.x/transform.scale.y
 */
*fromValue 动画开始位置
*toValue 动画结束位置
*byValue 动画增加值

*removedOnCompletion 动画完成后不要删除
*fillMode 保持最新状态
/*
 *默认动画执行后，会恢复到动画之前的状态
 *如果想保存动画之后的状态设置动画的removedOnCompletion＝NO/fillMode＝kCAFillModeForwards
 */

2、CAKeyframeAnimation帧动画

*values 动画轨迹
*timingFunction
*path 动画路径 如果设置了path values被忽略
 /*如添加一个圆的路径
  *
  CGMutablePathRef path = CGPathCreateMutable();
  CGPathAddEllipseInRect(path, NULL, CGRectMake(10, 30, 300, 300));
  animation.path = path;
  CFRelease(path);
  */

“图标抖动案例”
步骤：
1>添加图片到控制器view
2>监听抖动按钮

//创建帧对话对象
  CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
  animation.keyPath = @"transform.rotation";
  //旋转浮动度数
  CGFloat angle = M_PI_4 * 0.1;
  //抖动轨迹
  animation.values = @[@(-angle),@(angle),@(-angle)];
  //动画次数
  animation.repeatCount = MAXFLOAT;
  //执行动画
  [self.iconBtn.layer addAnimation:animation forKey:@"shake"];

3>监听停止按钮

 //停止动画
   [self.iconBtn.layer removeAnimationForKey:@"shake"];

3、CATransition(转场动画)
“图片游览器案例”

4、组动画
旋转 + 缩放 + 平移

“车小弟补充案例”

1> 透明度动画 CABasicAnimation * opacity
2> 旋转动画 CABasicAnimation *rotation (transform.rotation)
3> 缩放动画CAKeyframeAnimation *scale ("transform.scale)
if (self.imageView.alpha == 0) {//打开

   self.imageView.alpha = 1;

   //由看不见到看得见 opacity.fromValue = @(0); opacity.toValue = @(1);

   //由-45度到0rotation.fromValue = @(-M_PI_4);  rotation.toValue = @(0);

   //缩放scale.values = @[@(0),@(1.2),@(1)];

}    

//组动画
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[opacity,rotation,scale];

四、动画总结(了解)
写个Demo 只改变Center属性来演练

1.UIView封闭的动画
/*
[UIView beginAnimations:nil context:nil];
.......写要执行动画的代码
[UIView commitAnimations];*/
2.UIView animateWithDuration静态方法的动画
3.UIView的转场动画transitionWithView:duration:options:animations:completion:
4.图层的动画
图层的动画要想监听动画执行完成，要设置代理，监听animationDidStop方法
CALayer的动画，position未真正改变
5.能用UIView动画尽量用UIView