UI_动画-UIView属性动画、block块、仿设变换、CAAnimation

1.UIView属性动画和block动画

@property(nonatomic,strong) UIView *customView;

//声明两个视图属性:模拟两个页面根视图的切换
@property(nonatomic,strong) UIView *aView;
@property(nonatomic,strong) UIView *bView;


@end

@implementation ViewController

#define kScreenWidth [UIScreen mainScreen].bounds.size.width
#define kScreenHeight [UIScreen mainScreen].bounds.size.height


- (void)viewDidLoad {
    [super viewDidLoad];
    
 #pragma mark--------------UIView动画
    //CGRectMake()是一个快速构造函数
    /*
    CGRect rect = CGRectMake(0, 0, 100, 100);
    
    self.customView = [[UIView alloc] initWithFrame:rect];
   
    self.customView.center = CGPointMake(kScreenWidth/2, kScreenHeight/2);
    
    self.customView.backgroundColor = [UIColor magentaColor];
    
    [self.view addSubview:_customView];
    */
    
    
#pragma mark-----------transition动画
    //创建aView
    self.aView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds ];
    self.aView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.aView];
    
    
    //创建bView
    self.bView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds ];
    self.bView.backgroundColor = [UIColor cyanColor];
    
    
    
    
}


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    
#pragma mark--------------UIView动画
    //动画方式一:
    /*
//    //开始动画
//    [UIView beginAnimations:nil context:nil];
//    
//    //设置动画持续时间
//    [UIView setAnimationDuration:5];
//    
////    //设置动画的延迟时间
////    [UIView setAnimationDelay:2];
////    
////    //设置动画重复的次数
////    [UIView setAnimationRepeatCount:5];
////    
////    //设置动画反转
////    [UIView setAnimationRepeatAutoreverses:YES];
//    
//    //设置动画路径(速率分布)
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
//
//#pragma mark-----------设置代理、设置动画开始后执行的方法、设置动画结束后执行的方法这三个方法要一起写(只要设置了动画代理，就要写下面的这两个方法)
//    //设置动画代理
//    [UIView setAnimationDelegate:self];
//    
//    //设置动画开始后执行的方法
//    [UIView setAnimationWillStartSelector:@selector(begin)];
//    
//    //设置动画结束后执行的方法
//    [UIView setAnimationDidStopSelector:@selector(end)];
//    
//    //设置视图需要变换的属性(多种属性可以共存)
//    self.customView.center = CGPointMake(kScreenWidth/2, 70);
//    
//    self.customView.bounds = CGRectMake(0, 0, 200, 200);
//    
//    self.customView.backgroundColor = [UIColor cyanColor];
//    
//    self.customView.alpha = 0.5;
//    
//    self.customView.transform = CGAffineTransformMakeScale(1.5, 1.5);
//    //提交动画
//    [UIView commitAnimations];
    */
    
    
    //动画方式二:
    /*
    [UIView animateWithDuration:3 animations:^{
        
        
        self.customView.alpha = 0;
        
    }];
    */
    
    
    
    //动画方式三:
    /*
    [UIView animateWithDuration:3 animations:^{
        
        //动画效果
        
        self.customView.backgroundColor = [UIColor cyanColor];
        
        
        
    } completion:^(BOOL finished) {
        
        //动画完成后执行的代码
        
        NSLog(@"%d",finished);
        
    }];
     */
    
    
    //动画方式四:
    /*
    [UIView animateWithDuration:5 delay:0 options: UIViewAnimationOptionLayoutSubviews animations:^{
        //设置动画效果
        self.customView.transform = CGAffineTransformMakeScale(0.5, 0.5);
        
    } completion:^(BOOL finished) {
        
        //执行完动画效果后执行的代码
        NSLog(@"%d",finished);
    }];
     */
    
    
    //动画方式五:
    //第三个参数:0-1之间，值为1时：动画会平缓的进行；小于1：越小越抖
    //第四个参数:开始动画时的速率
    /*
    [UIView animateWithDuration:3 delay:0 usingSpringWithDamping:1 initialSpringVelocity:2 options: UIViewAnimationOptionAllowUserInteraction
animations:^{
    
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
    self.customView.transform = CGAffineTransformMakeRotation(2);
    
    } completion:^(BOOL finished) {
        
        NSLog(@"%d",finished);
    }];
     */
    
    
#pragma mark-----------transition动画
    
    //1.对两个页面进行切换
    /*
    [UIView transitionFromView:self.aView toView:self.bView duration:3 options: UIViewAnimationOptionTransitionCurlDown  completion:^(BOOL finished) {
        NSLog(@"动画完成后执行的代码...........");
    }];
    */
    
    
    //2.对一个页面进行操作
    /*
    [UIView transitionWithView:self.aView duration:3 options:  UIViewAnimationOptionTransitionCurlUp animations:^{
        
        self.aView.backgroundColor = [UIColor yellowColor];
        
    } completion:^(BOOL finished) {
        NSLog(@"执行完成");
    }];
    */
    
    
    
 }

/*
-(void)begin
{
    NSLog(@"动画将要开始...........");
}

-(void)end
{
     NSLog(@"动画将要结束...........");
}

*/

2.仿射变换

@property(nonatomic,strong) UIView *tempView;

@property(nonatomic,strong) UIView *staticView;


@property(nonatomic,strong) UIImageView *imgView;



@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
    self.staticView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    self.staticView.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:_staticView];

    
    self.tempView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    self.tempView.backgroundColor = [UIColor redColor];
    [self.view addSubview:_tempView];
    
    
    
    
    self.imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]];
    
    //切圆角
    self.imgView.layer.cornerRadius = 100;
    self.imgView.layer.masksToBounds = YES;
    
    self.imgView.frame = CGRectMake(100, 300, 200, 200);
    
    [self.view addSubview:_imgView];
    
    //定时器
    [NSTimer scheduledTimerWithTimeInterval:0.03 target:self selector:@selector(makeRotation) userInfo:nil repeats:YES];
    
   }


-(void)makeRotation
{
    self.imgView.transform = CGAffineTransformRotate(self.imgView.transform, M_PI_4/60);
}


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
#pragma mark-------------平移
    
#warning 方法一和方法二都只能平移一次
    //方法一:
    //self.tempView.transform = CGAffineTransformMake(1, 0, 0, 1, 50, 50);
 
    //方法二:
    //self.tempView.transform= CGAffineTransformMakeTranslation(100, 10);
    
    //方法三:
    //基于视图已经有的状态平移:第一个参数就是上一次视图的位置
    //self.tempView.transform = CGAffineTransformTranslate(self.tempView.transform, 10, 10);
    
    
    
#pragma mark------------缩放
    
    //方法一:
//    self.tempView.transform = CGAffineTransformMake(2, 0, 0, 2, 0, 0);
//    
//    //方法二:
//    self.tempView.transform = CGAffineTransformMakeScale(2, 2);
    
    //方法三:
    //基于视图已经有的状态平移:第一个参数就是上一次视图的位置
//    self.tempView.transform = CGAffineTransformScale(self.tempView.transform, 1.5, 1.5);
    
    
#pragma mark------------旋转
    
    //方法一:
//    self.tempView.transform = CGAffineTransformMake(cos(M_PI_4), sin(M_PI_4), -sin(M_PI_4),cos(M_PI_4) , 0, 0);
//    
//    //方法二:
//    self.tempView.transform =CGAffineTransformMakeRotation(M_PI_4);
    
    //方法三:
//    self.tempView.transform = CGAffineTransformRotate(self.tempView.transform, -3);
    
    
}

3.CAAnimation动画

@property(nonatomic,strong) UIView *simpleView;




@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
 
    
    _simpleView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    
    _simpleView.backgroundColor = [UIColor magentaColor];
    
    //设置边框的颜色
    _simpleView.layer.borderColor = [UIColor cyanColor].CGColor;
    
    
    [self.view addSubview:_simpleView];
    
    //设置锚点位置(旋转是绕着锚点的,位移是按照position的)锚点可以改变
    //_simpleView.layer.anchorPoint = CGPointMake(0, 0);
    
    //打印锚点(把整个视图看成一个1，此时是中心点)
    NSLog(@"%@",NSStringFromCGPoint(_simpleView.layer.anchorPoint));
    
    //打印位置(和视图的中心一样)
    NSLog(@"%@",NSStringFromCGPoint(_simpleView.layer.position));
    
}


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    
#pragma mark-------------CABasicAnimation动画
    
    //创建CABasicAnimation动画并设定变换的属性
//    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
//    
//    //赋值是一个对象（NSNumber）
//    
//    //设定变换的初始值
//    ba.fromValue = @0;
//    //设定变换的结束值
//    ba.toValue = @(M_PI_4);
//    //设置持续时间
//    ba.duration = 4;
//    
//    
//    //添加动画到视图的layer层(注意:动画执行完后要移除)
//    //forKey:用于以后移除
//    [self.simpleView.layer addAnimation:ba forKey:@"1"];
//    
//    
//    //因为CA动画结束后会回到起始位置，可以使用延时器将视图固定在目标状态
//    [self performSelector:@selector(makeNewView) withObject:nil afterDelay:4];
    
    
    //设置边框的动画
    CABasicAnimation *b = [CABasicAnimation animationWithKeyPath:@"borderWidth"];
    
    b.fromValue = @1;
    b.toValue = @50;
    b.duration = 4;
    
    //[self.simpleView.layer addAnimation:b forKey:@"2"];
    
    //设置圆角的动画
    
    
    
#pragma mark-------------CAKeyFrameAnimation动画
    
    //关键帧动画
    CAKeyframeAnimation *keya = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    //准备路径
    CGPoint p1 = CGPointMake(100, 100);
    CGPoint p2 = CGPointMake(50, 100);
    CGPoint p3 = CGPointMake(70, 200);
    CGPoint p4 = CGPointMake(200, 130);
    CGPoint p5 = CGPointMake(150, 170);
    CGPoint p6 = CGPointMake(20, 100);
    
    //将结构体变量转换成对象类型,用于存放到数组中作为关键帧
    NSValue *v1 = [NSValue valueWithCGPoint:p1];
    NSValue *v2 = [NSValue valueWithCGPoint:p2];
    NSValue *v3 = [NSValue valueWithCGPoint:p3];
    NSValue *v4 = [NSValue valueWithCGPoint:p4];
    NSValue *v5 = [NSValue valueWithCGPoint:p5];
    NSValue *v6 = [NSValue valueWithCGPoint:p6];
    
    //设定关键帧
    keya.values = @[v1,v2,v3,v4,v5,v6];
    
    //设定时间间隔
    keya.duration = 4;
    
    //添加动画
    //[self.simpleView.layer addAnimation:keya forKey:@"3"];
    
    
    
#pragma mark--------------组合动画
    //创建组合对象动画
    CAAnimationGroup *group = [CAAnimationGroup animation];
    //设置同事执行的动画的数组
    group.animations = @[keya,b];
    //设置时间间隔
    group.duration = 4;
    //添加
   // [self.simpleView.layer addAnimation:group forKey:@"4"];
    
    
    
#pragma mark------------CATranstion
    //现在支持的效果：
//    kCATransitionFade   交叉淡化过渡
//    kCATransitionMoveIn 新视图移到旧视图上面
//    kCATransitionPush   新视图把旧视图推出去
//    kCATransitionReveal 将旧视图移开,显示下面的新视图
//    pageCurl            向上翻一页
//    pageUnCurl          向下翻一页
//    rippleEffect        滴水效果
//    suckEffect          收缩效果，如一块布被抽走
//    cube                立方体效果
//    oglFlip             上下翻转效果
//    cameraIrisHollowOpen,       //开镜头
//    cameraIrisHollowClose,      //关镜头

   
    CATransition *transition = [CATransition animation];
    //设置动画类型
    transition.type = @"rippleEffect";
    //设置动画间隔
    transition.duration = 4;
    //设置动画过度方向
    transition.subtype = kCATransitionFromBottom;
    //添加动画
    [self.simpleView.layer addAnimation:transition forKey:@"5"];
  }

-(void)makeNewView
{
    self.simpleView.transform = CGAffineTransformMakeRotation(M_PI_4);
    
    //移除动画
    [self.simpleView.layer removeAnimationForKey:@"1"];

}