CALayer的概念
CALayer类似 ps 中的图层,我们看到的 UIView 其实就是 view 的 layer,view上可以添加 layer,我们先来看一下怎么用 CALayer
//图层
- (void)layers{
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
view.backgroundColor = [UIColor redColor];
[self.view addSubview:view];
self.view.layer.cornerRadius = 100;
view.layer.cornerRadius = 50;
view.layer.borderWidth = 10;
view.layer.borderColor = [UIColor yellowColor].CGColor;
// 阴影透明度
view.layer.shadowOpacity = 1;
// 阴影颜色
view.layer.shadowColor = [UIColor blackColor].CGColor;
// 阴影半径
view.layer.shadowRadius = 10;
// 阴影偏移量
view.layer.shadowOffset = CGSizeMake(5, 10);
CALayer *layer = [[CALayer alloc] init];
layer.frame = CGRectMake(200, 200, 50, 50);
layer.backgroundColor = [UIColor greenColor].CGColor;
[self.view.layer addSublayer:layer];
//图层(CALayer) 和 控件(UIView)
// 控件的样子 是在控件内部的layer上显示的
// 控件比图层 多了一个交互性
// 我们所看到的控件 其实是 控件的图层
}
我们要说的核心动画分为以下几种
CATransition | 转场动画 |
CATransaction | 转场事物动画 |
CABasicAnimation | 基础动画 |
CAKeyframeAnimation | 关键帧动画 |
CAAnimationGroup | 组动画 |
CATransform3D | 三维动画 |
第一种:转场动画
//转场动画
- (void)transitionTest{
view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 568)];
view1.backgroundColor = [UIColor greenColor];
[self.view addSubview:view1];
view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 500)];
view2.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view2];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
btn.frame = CGRectMake(100, 200, 100, 100);
btn.backgroundColor = [UIColor redColor];
btn.layer.cornerRadius = 50;
btn.layer.shadowOpacity = 1;
btn.layer.shadowColor = [UIColor blackColor].CGColor;
btn.layer.shadowOffset = CGSizeMake(5, 10);
btn.layer.shadowRadius = 10;
[btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
}
- (void)btnClick{
// CATransition转场动画:用于视图之间切换
CATransition *transition = [CATransition animation];
transition.duration = 1;
// 动画速度
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
// 动画类型
transition.type = @"cube";
// 子类型 (控制方向)
transition.subtype = kCATransitionFromLeft;
// 交换子视图
[self.view exchangeSubviewAtIndex:[self.view.subviews indexOfObject:view1] withSubviewAtIndex:[self.view.subviews indexOfObject:view2]];
NSLog(@"%@",self.view.subviews);
// 把动画添加给图层
[self.view.layer addAnimation:transition forKey:@"key"];
}
第二种:转场事物动画
//转场事物动画
- (void)layerTransaction{
UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
btn.frame = CGRectMake(50, 200, 100, 100);
btn.backgroundColor = [UIColor redColor];
btn.layer.cornerRadius = 50;
btn.layer.shadowOpacity = 1;
btn.layer.shadowColor = [UIColor blackColor].CGColor;
btn.layer.shadowOffset = CGSizeMake(5, 10);
btn.layer.shadowRadius = 10;
[btn addTarget:self action:@selector(btnClick1) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
layer1 = [[CALayer alloc] init];
layer1.frame = CGRectMake(200, 200, 100, 100);
layer1.backgroundColor = [UIColor greenColor].CGColor;
[self.view.layer addSublayer:layer1];
CALayer *layer2 = [[CALayer alloc] init];
layer2.frame = CGRectMake(0, 0, 50, 50);
layer2.backgroundColor = [UIColor yellowColor].CGColor;
[layer1 addSublayer:layer2];
}
- (void)btnClick1{
// CATransaction 事务动画:用来修改图层的一些基本属性
[CATransaction begin];
[CATransaction setAnimationDuration:2];
// 旋转
layer1.transform = CATransform3DMakeRotation(M_PI_2, 1, 1, 1);
// Scale刻度 (缩放)
// layer1.transform = CATransform3DMakeScale(2, 2, 2);
// 改变位置
// layer1.transform = CATransform3DMakeTranslation(-50, 200, 10);
// layer1.frame = CGRectMake(200, 300, 50, 50);
//提交动画
[CATransaction commit];
}
第三种:基础动画
//基础动画
- (void)basicAnimation{
UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
btn.frame = CGRectMake(50, 200, 100, 100);
btn.backgroundColor = [UIColor redColor];
btn.layer.cornerRadius = 50;
btn.layer.shadowOpacity = 1;
btn.layer.shadowColor = [UIColor blackColor].CGColor;
btn.layer.shadowOffset = CGSizeMake(5, 10);
btn.layer.shadowRadius = 10;
[btn addTarget:self action:@selector(btnClick2) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
layer3 = [[CALayer alloc] init];
layer3.frame = CGRectMake(200, 200, 100, 100);
layer3.backgroundColor = [UIColor greenColor].CGColor;
[self.view.layer addSublayer:layer3];
CALayer *layer2 = [[CALayer alloc] init];
layer2.frame = CGRectMake(0, 0, 50, 50);
layer2.backgroundColor = [UIColor yellowColor].CGColor;
[layer3 addSublayer:layer2];
}
- (void)btnClick2{
// CABasicAnimation 基础动画 可以控制图层的某一个属性 每次改变多少
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
// 从什么状态开始
basic.fromValue = [NSNumber numberWithFloat:0.8];
// 增量
// basic.byValue = [NSNumber numberWithFloat:360 * M_PI / 180];
// 最终状态
basic.toValue = [NSNumber numberWithFloat:1.5];
// 总时间
basic.duration = 0.2;
// 重复的次数
// basic.repeatCount = 10;
// 重复多长时间
basic.repeatDuration = 10;
// 动画做完之后 是否返回过来
basic.autoreverses = YES;
// 匀速
basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[layer3 addAnimation:basic forKey:@"key"];
}
第四种:关键帧动画
//关键帧动画:可以控制图层在动画过程中每一个状态的值
- (void)keyFrameAnimation{
layer4 = [[CALayer alloc] init];
layer4.frame = CGRectMake(140, 80, 60, 60);
layer4.backgroundColor = [UIColor redColor].CGColor;
layer4.cornerRadius = 30;
[self.view.layer addSublayer:layer4];
UIGestureRecognizer *g;
g = [[UITapGestureRecognizer alloc]
initWithTarget:self
action:@selector(keyFrame)];
[self.view addGestureRecognizer:g];
}
- (void)keyFrame{
// CAKeyFrameAnimation 关键帧动画:可以控制图层在动画过程中每一个状态的值
/*
CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"];
// 40 110
// 280 110
// 130 110
// 200 110
keyFrame.values = @[[NSValue valueWithCGPoint:CGPointMake(30, 100)],[NSValue valueWithCGPoint:CGPointMake(300, 100)],[NSValue valueWithCGPoint:CGPointMake(200, 100)],[NSValue valueWithCGPoint:CGPointMake(250, 100)]];
keyFrame.keyTimes = @[[NSNumber numberWithFloat:0],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:0.8],[NSNumber numberWithFloat:1]];
keyFrame.duration = 2;
// 动画做完之后不移除动画效果
keyFrame.removedOnCompletion = NO;
// 保持最新的动画状态
keyFrame.fillMode = kCAFillModeForwards;
[layer4 addAnimation:keyFrame forKey:@"key"];
*/
CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
// 1
// 0.8
// 1.2
// 1
keyFrame.values = @[[NSNumber numberWithFloat:1],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:1.5],[NSNumber numberWithFloat:1]];
keyFrame.keyTimes = @[[NSNumber numberWithFloat:0],[NSNumber numberWithFloat:0.3],[NSNumber numberWithFloat:0.7],[NSNumber numberWithFloat:1]];
keyFrame.duration = 0.5;
// 动画做完之后不移除动画效果
keyFrame.removedOnCompletion = NO;
// 保持最新的动画状态
keyFrame.fillMode = kCAFillModeForwards;
[layer4 addAnimation:keyFrame forKey:@"key"];
}
第五种:组动画
//组动画
- (void)animationGroup{
imageView = [[UIImageView alloc] initWithFrame:CGRectMake(140, 60, 40, 40)];
imageView.image = [UIImage imageNamed:@"123"];
imageView.layer.cornerRadius = 20;
imageView.clipsToBounds = YES;
[self.view addSubview:imageView];
UIGestureRecognizer *g;
g = [[UITapGestureRecognizer alloc]
initWithTarget:self
action:@selector(groupAnimation)];
[self.view addGestureRecognizer:g];
}
- (void)groupAnimation{
// 往下掉落的过程中能够自动旋转, 还会变大,弹起的时候变小.
// 1,旋转
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotationAnimation.fromValue = [NSNumber numberWithFloat:0];
rotationAnimation.toValue = [NSNumber numberWithFloat:10 * 360 * M_PI / 180];
// 位置移动
CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
// 160 80
// 160 380
// 160 200
// 160 380
// 160 300
// 160 380
positionAnimation.values = @[[NSValue valueWithCGPoint:CGPointMake(160, 80)],[NSValue valueWithCGPoint:CGPointMake(160, 380)],[NSValue valueWithCGPoint:CGPointMake(160, 200)],[NSValue valueWithCGPoint:CGPointMake(160, 380)],[NSValue valueWithCGPoint:CGPointMake(160, 300)],[NSValue valueWithCGPoint:CGPointMake(160, 380)]];
positionAnimation.keyTimes = @[[NSNumber numberWithFloat:0],[NSNumber numberWithFloat:0.4],[NSNumber numberWithFloat:0.6],[NSNumber numberWithFloat:0.8],[NSNumber numberWithFloat:0.9],[NSNumber numberWithFloat:1]];
// 缩放
CAKeyframeAnimation *scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
// 1
// 2
// 1.3
// 2
// 1.7
// 2
scaleAnimation.values = @[[NSNumber numberWithFloat:1],[NSNumber numberWithFloat:2],[NSNumber numberWithFloat:1.3],[NSNumber numberWithFloat:2],[NSNumber numberWithFloat:1.7],[NSNumber numberWithFloat:2]];
scaleAnimation.keyTimes = @[[NSNumber numberWithFloat:0],[NSNumber numberWithFloat:0.4],[NSNumber numberWithFloat:0.6],[NSNumber numberWithFloat:0.8],[NSNumber numberWithFloat:0.9],[NSNumber numberWithFloat:1]];
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[rotationAnimation,positionAnimation,scaleAnimation];
group.duration = 5;
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
[imageView.layer addAnimation:group forKey:@"group"];
}
第六种:三维动画
//三维动画
- (void)threeDAnimation{
CATransform3D transform;
transform = CATransform3DMakeTranslation(0, -kSize/2, 0);
transform = CATransform3DRotate(transform, M_PI_2, 1.0, 0, 0);
self.topLayer = [self layerWithColor:[UIColor redColor]
transform:transform];
transform = CATransform3DMakeTranslation(0, kSize/2, 0);
transform = CATransform3DRotate(transform, M_PI_2, 1.0, 0, 0);
self.bottomLayer = [self layerWithColor:[UIColor greenColor]
transform:transform];
transform = CATransform3DMakeTranslation(kSize/2, 0, 0);
transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
self.rightLayer = [self layerWithColor:[UIColor blueColor]
transform:transform];
transform = CATransform3DMakeTranslation(-kSize/2, 0, 0);
transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
self.leftLayer = [self layerWithColor:[UIColor cyanColor]
transform:transform];
transform = CATransform3DMakeTranslation(0, 0, -kSize/2);
transform = CATransform3DRotate(transform, M_PI_2, 0, 0, 0);
self.backLayer = [self layerWithColor:[UIColor yellowColor]
transform:transform];
transform = CATransform3DMakeTranslation(0, 0, kSize/2);
transform = CATransform3DRotate(transform, M_PI_2, 0, 0, 0);
self.frontLayer = [self layerWithColor:[UIColor magentaColor]
transform:transform];
self.view.layer.sublayerTransform = MakePerspetiveTransform();
UIGestureRecognizer *g = [[UIPanGestureRecognizer alloc]
initWithTarget:self
action:@selector(pan:)];
[self.view addGestureRecognizer:g];
}
- (void)pan:(UIPanGestureRecognizer *)recognizer {
CGPoint translation = [recognizer translationInView:self.view];
CATransform3D transform = MakePerspetiveTransform();
transform = CATransform3DRotate(transform,
kPanScale * translation.x,
0, 1, 0);
transform = CATransform3DRotate(transform,
-kPanScale * translation.y,
1, 0, 0);
self.view.layer.sublayerTransform = transform;
}
const CGFloat kSize = 100.;
const CGFloat kPanScale = 1./100.;
- (CALayer *)layerWithColor:(UIColor *)color
transform:(CATransform3D)transform {
CALayer *layer = [CALayer layer];
layer.backgroundColor = [color CGColor];
layer.bounds = CGRectMake(0, 0, kSize, kSize);
layer.position = self.view.center;
layer.transform = transform;
[self.view.layer addSublayer:layer];
return layer;
}
static CATransform3D MakePerspetiveTransform() {
CATransform3D perspective = CATransform3DIdentity;
perspective.m34 = -1./2000.;
return perspective;
}