CALayer
-
CALayer负责视图中显示内容和动画
-
UIView负责监听和响应事件。在创建UIView对象时，UIView内部会自动创建一个图层（CALayer对象），通过UIView的layer属性可以访问这个层。
-
当UIView需要显示到屏幕上时，会调用
drawRect：方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成UIView的显示。 -
每一个UIView内部都默认关联着一个CALayer，我们可称这个Layer为Root Layer（根层）。所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画
-
CALayer是定义在QuartzCore框架中的
-
CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
-
UIColor、UIImage是定义在UIKit框架中的
-
QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用（C 语言编写）。但是UIKit只能在iOS中使用（Objective-C）
-
为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef 导入其他框架的方式: 选中项目, 在 General中找 Linked Frameworks and Libraries添加对应的框架
什么是隐式动画？
-
当对非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];
UIView和CALayer的选择
- 通过CALayer，就能做出跟UIImageView一样的界面效果
既然CALayer和UIView都能实现相同的显示效果，那究竟该选择谁好呢？
其实，对比CALayer，UIView多了一个事件处理的功能。也就是说，CALayer不能处理用户的触摸事件，而UIView可以。所以，如果显示出来的东西需要跟用户进行交互的话，用UIView；如果不需要跟用户进行交互，用UIView或者CALayer都可以 当然，CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级
- 注：UIView本身不具备显示的功能，是它内部的层才有显示功能。
- (void)viewDidLoad{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIView* redView = [[UIView alloc] init];
redView.frame = CGRectMake(100, 100, 100, 100);
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
// 1>边框
redView.layer.borderWidth = 10; // 边框的宽度
redView.layer.borderColor = [UIColor whiteColor].CGColor; // 边框的颜色
// 2>阴影
redView.layer.shadowOffset = CGSizeMake(50, 50); // 偏移量
redView.layer.shadowColor = [UIColor blueColor].CGColor; // 颜色
redView.layer.shadowOpacity = 1; // 透明度 (如果要显示 一定要加)
redView.layer.shadowRadius = 50; // 阴影的圆角半径
// 3>圆角
redView.layer.cornerRadius = 50;
redView.layer.masksToBounds = YES;
// 4>bounds
redView.layer.bounds = CGRectMake(0, 0, 200, 200);
// 5>postion属性和view.center的关系 默认
redView.layer.position = CGPointMake(100, 100);
// 6>设置内容(图片)
redView.layer.contents = (__bridge id)([UIImage imageNamed:@"me"].CGImage);
}
CALayer的transform属性
// 旋转
self.layer.transform = CATransform3DRotate(self.layer.transform, M_PI_4, 0, 0, 1);
// 缩放 z轴无效果
self.layer.transform = CATransform3DScale(self.layer.transform, 1, 1, 0.5);
// 平移 z轴无效果
self.layer.transform = CATransform3DTranslate(self.layer.transform, 0, 0, 10);
核心动画
- Core Animation：核心动画，是一组非常强大的动画处理API。
- Core Animation的动画执行过程是在后台执行的，不会阻塞主线程。Core Animation是直接作用在CALayer上的，并非UIView。
使用步骤：
1、创建动画对象
2、设置动画属性
3、把动画对象添加到某个CALayer对象上
4、需要停止动画：可以调用remove方法移除动画
- CAAnimation是所有动画对象的父类，负责控制动画的持续时间和速度，是个抽象类，不能直接使用，应该使用它具体的子类.
- 属性解析：(红色代表来自CAMediaTiming协议的属性)
duration：动画的持续时间
repeatCount：动画的重复次数
repeatDuration：动画的重复时间
removedOnCompletion：默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode为kCAFillModeForwards
fillMode：决定当前对象在非active时间段的行为.比如动画开始之前,动画结束之后
beginTime：可以用来设置动画延迟执行时间，若想延迟2s，就设置为CACurrentMediaTime()+2，CACurrentMediaTime()为图层的当前时间。
timingFunction：速度控制函数，控制动画运行的节奏
基础动画（CABasicAnimation）
CAPropertyAnimation的子类
-
属性解析:
fromValue：keyPath相应属性的初始值
toValue：keyPath相应属性的结束值 -
随着动画的进行，在长度为duration的持续时间内，keyPath相应属性的值从fromValue渐渐地变为toValue
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, weak) CALayer* layer;
@end
@implementation ViewController
- (void)viewDidLoad{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIView* redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.frame = CGRectMake(100, 100, 100, 100);
[self.view addSubview:redView];
self.layer = redView.layer;
}
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event{
// *1.基本动画
// 1.创建动画对象
CABasicAnimation* anim = [[CABasicAnimation alloc] init];
// 2.操作
anim.keyPath = @"position.x";
// anim.fromValue = @(10); // 从哪
// anim.toValue = @(300); // 到哪
anim.byValue = @(10); // 在自身的基础上累加
// 不希望核心动画回到原来的位置
anim.fillMode = kCAFillModeForwards;
anim.removedOnCompletion = NO;
// 3.添加动画
[self.layer addAnimation:anim forKey:nil];
}
@end
关键帧动画（CAKeyframeAnimation）
-
CApropertyAnimation的子类
跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值 -
属性解析：
values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。 动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧
path：可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略
keyTimes：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, weak) CALayer* layer;
@end
@implementation ViewController
- (void)viewDidLoad{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIView* redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.frame = CGRectMake(100, 100, 20, 20);
[self.view addSubview:redView];
self.layer = redView.layer;
}
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event{
// 1.创建动画对象
CAKeyframeAnimation* anim = [[CAKeyframeAnimation alloc] init];
// 2.操作
anim.keyPath = @"position";
// 创建一个圆的路径
UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 160, 160)]; anim.path = path.CGPath;
// 设置时间
anim.duration = 3;
// 设置重复次数
anim.repeatCount = INT_MAX;
// 3.添加动画
[self.layer addAnimation:anim forKey:nil];
}
转场动画（CATransition）
- CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。
- UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果
- 属性解析:
type：动画过渡类型
subtype：动画过渡方向
startProgress：动画起点(在整体动画的百分比)
endProgress：动画终点(在整体动画的百分比)
#import "ViewController.h"
@interface ViewController()<UIGestureRecognizerDelegate>
@property (nonatomic, strong) UIImageView* imageView;
@property (nonatomic, assign) int index;
@end
@implementation ViewController
//懒加载创建并添加imageView到view上
-(UIImageView *)imageView{
if (_imageView == nil) {
// 获取图片
NSString* imageName = [NSString stringWithFormat:@"%d", self.index];
UIImage* image = [UIImage imageNamed:imageName];
//创建视图控制器
_imageView = [[UIImageView alloc] initWithFrame:CGRectMake(40, 40, 300, 400)];
_imageView.image = image; //打开交互
_imageView.userInteractionEnabled = YES;
[self.view addSubview:_imageView];
}
return _imageView;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.index = 1;
[self addSwipe];
}
- (void)addSwipe{
//添加轻扫手势
UISwipeGestureRecognizer* swipeLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipe:)];
UISwipeGestureRecognizer* swipeRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipe:)];
swipeRight.direction = UISwipeGestureRecognizerDirectionLeft;
[self.imageView addGestureRecognizer:swipeLeft];
[self.imageView addGestureRecognizer:swipeRight];
}
- (void)swipe:(UISwipeGestureRecognizer*)sender{
// 转场动画
// 1.创建动画
CATransition* anim = [[CATransition alloc] init];
// 2.操作
anim.type = @"cameraIrisHollowOpen";
if (sender.direction == UISwipeGestureRecognizerDirectionLeft) {
anim.subtype = kCATransitionFromLeft;
self.index ++;
}else {
anim.subtype = kCATransitionFromRight;
self.index --;
}
if (self.index == 6) {
self.index = 1;
}
if (self.index == 0) {
self.index = 5;
}
self.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",self.index]];
[self.imageView.layer addAnimation:anim forKey:nil];
}
@end
组动画(CAAnimationGroup)
-
CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行
-
属性解析：
animations：用来保存一组动画对象的NSArray
默认情况下，一组动画对象是同时运行的，也可以通过设置动画对象的beginTime属性来更改动画的开始时间。
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, weak) CALayer* layer;
@end
@implementation ViewController
- (void)viewDidLoad{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIView* redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.frame = CGRectMake(100, 100, 20, 20);
[self.view addSubview:redView];
self.layer = redView.layer;
}
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event{
// 组动画
// 1.创建动画对象
CAAnimationGroup* group = [[CAAnimationGroup alloc] init];
// 2.操作
// *1.关键帧动画 - 绕着圆的路径转
// ------
// 1.创建动画对象
CAKeyframeAnimation* anim = [[CAKeyframeAnimation alloc] init];
// 2.操作
anim.keyPath = @"position";
// 创建一个圆的路径
UIBezierPath* path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:80 startAngle:0 endAngle:2 * M_PI clockwise:1];
anim.path = path.CGPath;
// ------
// *2.基本动画 - 自转
// ------
// 1.创建动画
CABasicAnimation* anim1 = [[CABasicAnimation alloc] init];
// 2.操作
anim1.keyPath = @"transform.rotation"; anim1.byValue = @(M_PI * 2 * 3);
// ------
group.animations = @[ anim, anim1 ];
// 设置事件
group.duration = 3;
// 设置次数
group.repeatCount = INT_MAX;
// 3.添加动画
[self.layer addAnimation:group forKey:nil];
}
@end
网友评论