iOS学习笔记(三十三)————核心动画

/ 0评 / 0

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;
}

代码请查看 http://git.oschina.net/zcb1603999/LearningiOS

评论已关闭。