核心动画二

2015-12-28 本文已影响311人 coma

6> CoreAnimation

Core Animation是直接作用在CALayer上的，并非UIView。
Core Animation，中文翻译为核心动画，它是一组非常强大的动画处理API，使用它能做出非常炫丽的动画效果，而且往往是事半功倍。也就是说，使用少量的代码就可以实现非常强大的功能。
Core Animation可以用在Mac OS X和iOS平台。
Core Animation的动画执行过程都是在后台操作的，不会阻塞主线程。
要注意的是，Core Animation是直接作用在CALayer上的，并非UIView。
Core Animation结构
Core Animation 使用步骤
如果不是xcode5之后的版本，使用它需要先添加QuartzCore.framework和引入对应的框架<QuartzCore/QuartzCore.h>
开发步骤:
1.首先得有CALayer
2.初始化一个CAAnimation对象，并设置一些动画相关属性
3.通过调用CALayer的addAnimation:forKey:方法，增加CAAnimation对象到CALayer中，这样就能开始执行动画了
4.通过调用CALayer的removeAnimationForKey:方法可以停止CALayer中的动画
创建CALayer
touchBegin,点击屏幕，做动画
创建动画，添加动画到CALayer
怎样执行动画？执行动画的本质是改变图层的属性。
告诉动画执行怎样的动画?设置动画属性(position)
告诉动画属性怎么改变?设置动画属性值改变 toValue fromValue
duration:动画时长
动画有反弹?取消反弹
1> 执行动画完毕不要移除
2> 设置动画填充模式，保持最新的位置。
rotation:
三维旋转：transform
二维旋转：transform.rotation
scale
设置图层内容（心）
tovalue:@0.5

    //创建动画对象
    CABasicAnimation *anim = [CABasicAnimation animation];
    //设置属性值.
    anim.keyPath = @"transform.rotation";
    anim.toValue = @(M_PI);
    //动画完成时会自动的删除动画.
    //动画完成时要不要删除动画
    anim.removedOnCompletion = NO;
    //让动画始终保存最前面的效果.
    anim.fillMode = @"forwards" 
    //添加动画
    [self.redView.layer addAnimation:anim forKey:nil];

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
  //添加动画
    CABasicAnimation *anim = [CABasicAnimation animation];
    //设置属性值.
    anim.keyPath = @"transform.scale";
    anim.toValue = @0;
  //想要动画执行多次
    anim.repeatCount = MAXFLOAT;
 //设置动画的执行时长
    anim.duration = 0.5;
  //反转,怎么去的,怎么样回来.
    anim.autoreverses = YES;
//添加动画
    [self.imageV.layer addAnimation:anim forKey:nil];    
}

    //创建动画对象
    CABasicAnimation *anim = [CABasicAnimation animation];
    //设置属性值.
    anim.keyPath = @"transform.rotation";
    anim.toValue = @(M_PI);
    //动画完成时会自动的删除动画.
    //动画完成时要不要删除动画
    anim.removedOnCompletion = NO;
  //让动画始终保存最前面的效果.
    anim.fillMode = @"forwards";
   //添加动画
    [self.redView.layer addAnimation:anim forKey:nil];

* 总结CABasicAnimation只能在两个值之间做动画，怎么多个值做动画，用CAKeyframeAnimation

7> CAKeyframeAnimation

面向view开发，拖一个view
values:能多个值之间做动画，按照顺序做。

  //添加抖动的动画.
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    //设置属性值.
    anim.keyPath = @"transform.rotation";
    anim.values = @[@(angle2Rad(-5)),@(angle2Rad(5))];
   anim.autoreverses = YES;
   //动画一直重复执行.
    anim.repeatCount = MAXFLOAT;
 anim.duration = 0.5;
 //添加动画
    [self.iconView.layer addAnimation:anim forKey:nil];

path

   //添加抖动的动画.
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    //设置属性值.
    anim.keyPath = @"position";
    
  //根据路径做动画
//    UIBezierPath *path = [UIBezierPath bezierPath];
//    [path moveToPoint:CGPointMake(50, 50)];
//    [path addLineToPoint:CGPointMake(200, 400)];
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 300, 300)];
    anim.path = path.CGPath;    
//    anim.autoreverses = YES;
    //动画一直重复执行.
    anim.repeatCount = MAXFLOAT;
  anim.duration = 0.5;
  //添加动画
    [self.iconView.layer addAnimation:anim forKey:nil];

动画节奏(timingFunction)

8> * 图标抖动

PPT分析,左边旋转右边旋转 -> keyPath(transform.rotation) -> values -> 有点瘸 -> PPT分析 -> values添加一个值

9> * CATransition
过度动画又叫转场动画 -> type(转场类型) -> subtype(方向) -> 动画进度
注意:转场动画必须和过度代码放在一块，否则没有效果

static int _i = 1;
   //转场代码必须得要和转场动画在同一个方法当中.,并没有要求他们的上下顺序.
    //转场代码.
    _i++;
    if (_i > 3) {
        _i = 1;
    }
    NSString *imageName = [NSString stringWithFormat:@"%d",_i];
    self.imageV.image = [UIImage imageNamed:imageName];  
    //添加转场动画
    CATransition *anim = [CATransition animation]; 
    anim.duration = 1;
    //动画从哪个点开始.
    anim.startProgress = 0.3;
    //动画从哪个点结束.
    anim.endProgress = 0.5;  
    //转场类型.
    anim.type = @"pageCurl";  
    [self.imageV.layer addAnimation:anim forKey:nil];

10> * CAAnimationGroup
同时进行多种动画 -> 平移，旋转，缩放 -> 取消反弹

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 
    CAAnimationGroup *animGroup = [CAAnimationGroup animation];
    //animations数组当中存入的都是animation对象
    //平移
    CABasicAnimation *anim = [CABasicAnimation animation];
    anim.keyPath = @"position.y";
    anim.toValue = @(400); 
    //缩放
    CABasicAnimation *anim2 = [CABasicAnimation animation];
    anim2.keyPath = @"transform.scale";
    anim2.toValue = @(0.5);
    //会自动执行数组当中所有的动画对象.
    animGroup.animations = @[anim,anim2];
    //动画完成不要删除动画
    animGroup.removedOnCompletion = NO;
    //始终保持最前面的效果
    animGroup.fillMode = kCAFillModeForwards;
    [self.redView.layer addAnimation:animGroup forKey:nil];   
}

11> * UIView封装的动画
单视图

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;

参数说明：
duration：动画的持续时间
view：需要进行转场动画的视图
options：转场动画的类型
animations：将改变视图属性的代码放在这个block中
completion：动画结束后，会自动调用这个block
双视图
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion;

参数说明：
duration：动画的持续时间
options：转场动画的类型
animations：将改变视图属性的代码放在这个block中
completion：动画结束后，会自动调用这个block
* 什么时候用核心动画，什么时候用UIView动画
* 核心动画的缺点：都是假象，不能真正改变图层属性的值
* 展示和真实的位置不同
* 如果改变位置就用UIView的动画
* 转场动画就用核心动画
* 为什么转场用核心动画？因为UIView的转场动画太少。
* 演示UIView的转场动画
* touchBegin,切换图片

核心动画二

猜你喜欢

热点阅读