iOS讲解迷惑深入浅出之基础动画-关键帧动画

本文链接：https://blog.csdn.net/nlynn/article/details/48718271
/  Copyright (c) 2015年 nieyinlong. All rights reserved.
//

#import "RootViewController.h"

@interface RootViewController ()

// myView 赋值重名
@property (nonatomic, retain) UIView *myView;

@end

@implementation RootViewController

- (void)dealloc
{
    [_myView release];
    [super dealloc];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self addSubViews];
    
    self.navigationItem.title = @"CALayer";
}

- (void)addSubViews
{
    self.view.backgroundColor = [UIColor blackColor];
    
    self.myView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    self.myView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:self.myView];
    [_myView release];
    
//     UIImageView *imageV = [[UIImageView alloc] init];
//    imageV.transform.r
    
    // layer 是负责显示图层的
    // 要更改咱们看到的图形形状, 需要更改layer
    
    
    // 设置圆角
    // 矩形变成圆形的前提条件: 矩形必须为正方形
    self.myView.layer.cornerRadius = self.myView.frame.size.width / 2;
    
    // 设置阴影的颜色
    // CGColorRef 图层绘制的颜色
    self.myView.layer.shadowColor = [UIColor redColor].CGColor;
    
    // 阴影的显示范围
    self.myView.layer.shadowOffset = CGSizeMake(10, 10);
    
    // 阴影的透明度(1是不透明), 不写透明度不会显示阴影, 因为默认透明
    self.myView.layer.shadowOpacity = 1;
    
    // 阴影的模糊程度
    self.myView.layer.shadowRadius = 40;
    
    // 设置边框的宽度
    self.myView.layer.borderWidth = 20;
    
    // 边框颜色
    self.myView.layer.borderColor = [UIColor purpleColor].CGColor;
    
    
    UIButton *button  = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button.frame = CGRectMake(20, 500, 100, 40);
    button.backgroundColor = [UIColor redColor];
    [button setTitle:@"沿X旋转" forState:(UIControlStateNormal)];
    [button addTarget:self action:@selector(actionBtn:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:button];
    
    
    UIButton *button2  = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button2.frame = CGRectMake(20, 560, 100, 40);
    button2.backgroundColor = [UIColor redColor];
    [button2 setTitle:@"改变size" forState:(UIControlStateNormal)];
    [button2 addTarget:self action:@selector(actionBtnSize:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:button2];
    
    
    UIButton *button3  = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button3.frame = CGRectMake(200, 500, 120, 40);
    button3.backgroundColor = [UIColor redColor];
    [button3 setTitle:@"改变背景颜色" forState:(UIControlStateNormal)];
    [button3 addTarget:self action:@selector(actionBtnColor:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:button3];
    
    
    UIButton *button4  = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button4.frame = CGRectMake(200, 560, 120, 40);
    button4.backgroundColor = [UIColor redColor];
    [button4 setTitle:@"轨迹移动" forState:(UIControlStateNormal)];
    [button4 addTarget:self action:@selector(actionBtnXX:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:button4];
    
    
    
    
    UIButton *button5  = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button5.frame = CGRectMake(20, 630, 80, 30);
    button5.backgroundColor = [UIColor redColor];
    [button5 setTitle:@"晃动" forState:(UIControlStateNormal)];
    [button5 addTarget:self action:@selector(actionBtnHuangDong:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:button5];
    
    
    
    
    UIButton *button6  = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button6.frame = CGRectMake(150, 630, 80, 30);
    button6.backgroundColor = [UIColor redColor];
    [button6 setTitle:@"3D旋转" forState:(UIControlStateNormal)];
    [button6 addTarget:self action:@selector(actionBtnXuanZhuan:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:button6];
    
    
    UIButton *button7  = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button7.frame = CGRectMake(250, 630, 80, 30);
    button7.backgroundColor = [UIColor redColor];
    [button7 setTitle:@"组动画" forState:(UIControlStateNormal)];
    [button7 addTarget:self action:@selector(actionBtnGroup:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:button7];
    
    

    // layer层动画
    
    // CAPropertyAnimation 抽象类, 下面的两个类是其子类
    // CABasicAnimation    基础动画(更改大小, 旋转等)
    // CAKeyframeAnimation 主要按轨迹移动位置等, 例如执行一组动画时使用
}



#pragma mark - 点击按钮调用旋转方法
- (void)actionBtn:(UIButton *)btn
{
    [self XYAnimation];
    
}

- (void)actionBtnSize:(UIButton *)btn
{
    [self sizeAnimation];
}


- (void)actionBtnColor:(UIButton *)btn
{
    [self changeBackgroundColor];
}

- (void)actionBtnXX:(UIButton *)btn
{
    [self posiontPoint];
}


- (void)actionBtnHuangDong:(UIButton *)btn
{
    NSLog(@"晃动");
    [self huangDong];
}

- (void)actionBtnXuanZhuan:(UIButton *)btn
{
    NSLog(@"#3D");
    [self transform3D];
}

- (void)actionBtnGroup:(UIButton *)btn
{
    NSLog(@"组动画");
    [self groupAnimation];
}








#pragma mark -  沿着X/Y旋转
- (void)XYAnimation
{
    // 新建一个基础动画
    // 参数: 填一个属性  animationWithKeyPath:<#(NSString *)#>  (KeyPath: 间接访问属性, 千万不能写错)
    // 咱们要更改的是transform.rotation.x 形变属性下 弧度的 X 轴, 沿X轴旋转
    // KeyPath 就是CALayer中可以做动画的属性
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    
    // rotation 代表旋转的弧度
  
    // 设置属性变化到某一个值
    // toValue 需要一个对象类型, 即 NSNumber 或 NSValue (用NSNumber 或NSValue 转成对象类型)
    animation.toValue = [NSNumber numberWithFloat:M_PI * 2]; // M_PI * 2就是 PI*1 转2圈
    
    // 设置动画时间
    animation.duration = 1;
    
    // 设置动画 重复次数
    animation.repeatCount = 1;
    
    // 把设置好的动画加到layer上
    // 参数二: 添加到动画的标识 (名字自己起)
    [self.myView.layer addAnimation:animation forKey:@"transform.rotation.x"]; // forKey:@"" 随便起名
}

#pragma mark ---- 改变size的动画
- (void)sizeAnimation
{
    // 更改大小的话, 需要更改 bounds.size
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];

    // 从 (200, 200) 更改到 (40, 400) 然后恢复到原来大小
    
    // 设置改变的值 (初始值)
    animation.fromValue = [NSValue valueWithCGSize:CGSizeMake(200, 200)];
    // 结束值
    animation.toValue = [NSValue valueWithCGSize:CGSizeMake(40, 400)];
    // 动画播放时间
    animation.duration = 1;
    
    // 加到layer上
    [self.myView.layer addAnimation:animation forKey:@"Bound"];
}




#pragma mark--  CAKeyframeAnimation 改变背景颜色  ---
- (void)changeBackgroundColor
{
    
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
    
     CGColorRef color1 = [UIColor redColor].CGColor;
    CGColorRef color2 = [UIColor greenColor].CGColor;
    CGColorRef color3 = [UIColor yellowColor].CGColor;
    
    animation.values = @[(id)color1, (id)color2, (id)color3];
    
    animation.duration = 1;
    
    [self.myView.layer addAnimation:animation forKey:nil];

}


#pragma mark - 轨迹移动
- (void)posiontPoint
{
    // 把一个点转换成CGPoint类型
    NSLog(@"%@", NSStringFromCGPoint(self.myView.layer.position));
    
    // 创建对象
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    // 创建一堆点
    NSValue *point1 = [NSValue valueWithCGPoint:CGPointMake(0, 444)];
    NSValue *point2 = [NSValue valueWithCGPoint:CGPointMake(444, 0)];
    NSValue *point3 = [NSValue valueWithCGPoint:CGPointMake(0, 444)];
    NSValue *point4 = [NSValue valueWithCGPoint:CGPointMake(444, 0)];
    
    // 往数组添加点
    animation.values = @[point1, point2, point3, point4];
    
    // 设置时间
    animation.duration = 1;
    
    // 加到layer上面
    [self.myView.layer addAnimation:animation forKey:@"POSITION"];
    
    
}


#pragma mark - 晃动
- (void)huangDong
{
    NSLog(@"000000");
    
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
    
    CGFloat center = self.myView.center.x;
    CGFloat left = center - 10;
    CGFloat right = center + 10;
    
    
    NSNumber *l= [NSNumber numberWithFloat:left];
    NSNumber *cen = [NSNumber numberWithFloat:center];
    NSNumber *r = [NSNumber numberWithFloat:right];
    
    animation.values = @[l, cen, r,l, cen, r,l, cen, r,l, cen, r];
    animation.duration = 1;
    [self.myView.layer addAnimation:animation forKey:@"傻逼"];
}




#pragma mark - 3D旋转
- (void)transform3D
{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];

    // 改变结束值
    // 参数2: 弧度
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.myView.layer.transform, M_PI, 200, 200, 200)];
    
    
    animation.duration = 1;
    
    [self.myView.layer addAnimation:animation forKey:@"transtion"];
}



#pragma mark--- 组动画(播放一组动画)
- (void)groupAnimation
{
    
    // 创建组动画
    CAAnimationGroup * animationGroup = [CAAnimationGroup animation];
    
    // 设置组动画时间
    animationGroup.duration = 3;
    
    // 设置组动画执行的动画数组
    // 把一个点转换成CGPoint类型
    NSLog(@"%@", NSStringFromCGPoint(self.myView.layer.position));
    
    
    
    
    
    // 第一组动画.    创建对象
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    // 创建一堆点
    NSValue *point1 = [NSValue valueWithCGPoint:CGPointMake(0, 444)];
    NSValue *point2 = [NSValue valueWithCGPoint:CGPointMake(444, 0)];
    NSValue *point3 = [NSValue valueWithCGPoint:CGPointMake(0, 444)];
    NSValue *point4 = [NSValue valueWithCGPoint:CGPointMake(444, 0)];
    
    // 往数组添加点
    animation.values = @[point1, point2, point3, point4];
    
    // 设置时间
    animation.duration = 1;
    
    // 加到layer上面
    [self.myView.layer addAnimation:animation forKey:@"POSITION"];
    
    //----
    
    
    // 2. 新建一个基础动画
    // 参数: 填一个属性  animationWithKeyPath:<#(NSString *)#>  (KeyPath: 间接访问属性, 千万不能写错)
    // 咱们要更改的是transform.rotation.x 形变属性下 弧度的 X 轴, 沿X轴旋转
    CABasicAnimation *animationBasic = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    
    // 设置属性变化到某一个值
    // toValue 需要一个对象类型, 即 NSNumber 或 NSValue
    animationBasic.toValue = [NSNumber numberWithFloat:M_PI * 20]; // M_PI * 2就是 PI*1 转2圈
    
    // 设置动画时间
    animationBasic.duration = 1;
    
    // 设置动画 重复次数
    animationBasic.repeatCount = 1;
    
    // 把设置好的动画加到layer上
    // 参数二: 添加到动画的标识 (名字自己起)
    [self.myView.layer addAnimation:animationBasic forKey:@"transform.rotation.x"]; // forKey:@"" 随便起名
    
    
    
    
    
    animationGroup.animations = @[animation, animationBasic];
    [self.myView.layer addAnimation:animationGroup forKey:@"group"];
    
}