IOS学习之—— 图层与核心动画
//*************************************** 第七天 图层与核心动画 ****************************************** //
一、理解图层与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
ios事件有三种
1.触摸事件
*touchesBegan
*touchesMoved
*touchesEnd
*touchesCancled
*UITouch 一个手指相关
2.回事计事件
3.远程事件
今天内容
一、触摸事件传递
二、响应者链条 面试题
三、手势识别器
触摸、拖拽。。。。
四、图层
自定义图层
一、理解图层与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 动画速度
*duration 动画时间
*repeatCount 动画重复次数
//kCAMediaTimingFunctionLinear 线性匀速
//kCAMediaTimingFunctionEaseIn 先慢后快
//kCAMediaTimingFunctionEaseOut 先快后慢
//kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢、中间快两边慢
*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(转场动画) 使用步骤 ①创建CATransition对象 ②设置type /** ******************************************************* type:动画类型(比如：滴水效果，翻转效果...) ------------------------------------------------------- fade kCATransitionFade 交叉淡化过渡 moveIn kCATransitionMoveIn 新视图移到旧视图上面 push kCATransitionPush 新视图把旧视图推出去 reveal kCATransitionReveal 将旧视图移开,显示下面的新视图 pageCurl 向上翻一页 pageUnCurl 向下翻一页 rippleEffect 滴水效果 suckEffect 收缩效果，如一块布被抽走 cube 立方体效果 oglFlip 上下左右翻转效果 rotate 旋转效果 cameraIrisHollowClose 相机镜头关上效果(不支持过渡方向) cameraIrisHollowOpen 相机镜头打开效果(不支持过渡方向) ********************************************************/ ③设置子类型subtype /** ******************************************************* subtype: 动画方向(比如说是从左边进入，还是从右边进入...) ------------------------------------------------------ kCATransitionFromRight; kCATransitionFromLeft; kCATransitionFromTop; kCATransitionFromBottom; 当 type 为@"rotate"(旋转)的时候,它也有几个对应的 subtype,分别为:
90cw 逆时针旋转 90°
90ccw 顺时针旋转 90°
180cw 逆时针旋转 180°
180ccw 顺时针旋转 180°
**/
4、组动画
旋转 + 缩放 + 平移
组动画的使用步骤
//1.创建组动画
CAAnimationGroup *group = [CAAnimationGroup animation];
//2.设置动画数组[平移动画、旋转动画]
group.animations = @[transAni,rotationAni,scaleAni];
//3.添加动画
[self.imageView.layer addAnimation:group forKey:nil];
"车小弟补充案例"
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]; "底部旋转菜单案例" 八、动画总结(了解) 1.UIView封闭的动画 /* [UIView beginAnimations:nil context:nil]; .......写要执行动画的代码 [UIView commitAnimations];*/ 2.UIView animateWithDuration静态方法的动画 3.UIView的转场动画transitionWithView:duration:options:animations:completion: 4.图层的动画 如果要监听动画执行完成，要设置代理，监听animationDidStop方法 5.CALayer的动画，position未真正改变 6.能用UIView动画尽量用UIView CALayer 在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView 其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层 在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层 @property(nonatomic,readonly,retain) CALayer *layer; 当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示 换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能 通过操作CALayer对象，可以很方便地调整UIView的一些外观属性，比如： 阴影 圆角大小 边框宽度和颜色 … … 还可以给图层添加动画，来实现一些比较炫酷的效果 宽度和高度 @property CGRect bounds; 位置(默认指中点，具体由anchorPoint决定) @property CGPoint position; 锚点(x,y的范围都是0-1)，决定了position的含义 @property CGPoint anchorPoint; 背景颜色(CGColorRef类型) @property CGColorRef backgroundColor; 形变属性 @property CATransform3D transform; 边框颜色(CGColorRef类型) @property CGColorRef borderColor; 边框宽度 @property CGFloat borderWidth; 圆角半径 @property GCFloat cornerRadius; 内容(比如设置为图片CGImageRef) @property(retain) id contents; 首先 CALayer是定义在QuartzCore框架中的 CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的 UIColor、UIImage是定义在UIKit框架中的 其次 QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用 但是UIKit只能在iOS中使用 为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef 通过CALayer，就能做出跟UIImageView一样的界面效果 既然CALayer和UIView都能实现相同的显示效果，那究竟该选择谁好呢？ 其实，对比CALayer，UIView多了一个事件处理的功能。也就是说，CALayer不能处理用户的触摸事件，而UIView可以 所以，如果显示出来的东西需要跟用户进行交互的话，用UIView；如果不需要跟用户进行交互，用UIView或者CALayer都可以 当然，CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级 position和anchorPoint
CALayer有2个非常重要的属性：position和anchorPoint
@property CGPoint position;
用来设置CALayer在父层中的位置
以父层的左上角为原点(0, 0)
@property CGPoint anchorPoint;
称为“定位点”、“锚点”
决定着CALayer身上的哪个点会在position属性所指的位置
以自己的左上角为原点(0, 0)
它的x、y取值范围都是0~1，默认值为（0.5, 0.5）隐式动画
每一个UIView内部都默认关联着一个CALayer，我们可用称这个Layer为Root Layer（根层）
所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画
什么是隐式动画？
当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果
而这些属性称为Animatable Properties(可动画属性)
列举几个常见的Animatable Properties：
bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
position：用于设置CALayer的位置。修改这个属性会产生平移动画
可以通过动画事务(CATransaction)关闭默认的隐式动画效果
[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];