Core Animation笔记(动画)

一.隐式动画

layer默认开启隐式动画

禁用隐式动画

 [CATransaction setDisableActions:true];

设置隐士动画时间

 //默认0.25s
    [CATransaction setAnimationDuration:3.0];

    //新启一个事务,防止对同一时间其他隐士动画产生影响   

 
    [CATransaction begin];
    //默认0.25s
    [CATransaction setAnimationDuration:3.0];
    //动画完成调用块 0.25s后调用 完成快是在事务提交之后才执行的 所以使用默认的时间0.25,后面再执行此方法是3秒后才调用
    [CATransaction setCompletionBlock:^{
        self.colorLayer.affineTransform = CGAffineTransformRotate(self.colorLayer.affineTransform, M_PI/4);
    }];
    //动画缓冲  默认为kCAMediaTimingFunctionLinear
  /*

    kCAMediaTimingFunctionEaseIn
    kCAMediaTimingFunctionEaseOut
    kCAMediaTimingFunctionEaseInEaseOut
    kCAMediaTimingFunctionDefault
*/
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
  
    CGFloat red = arc4random()*1.0/ INT_MAX;
    CGFloat green = arc4random()*1.0/ INT_MAX;
    CGFloat blue = arc4random()*1.0/ INT_MAX;

    // 
    self.colorLayer.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1].CGColor;
  
    //提交事务
    [CATransaction commit];

改变actions 使其有一个过渡效果

  //定义过度类型这里使背影颜色的改变是从左往右的push效果
    CATransition *transiton = [CATransition animation];
    transiton.type = kCATransitionPush;
    transiton.subtype = kCATransitionFromLeft;
    self.colorLayer = layer;
    self.colorLayer.actions = @{@"backgroundColor":transiton};

自定义action的属性

当设置自定义layer的radius属性的时候隐式的为当前属性添加动画

 presentationLayer:获取屏幕上真正显示的图层(改变图层属性,视觉上不是直接就显示对应值,所以通过presentationLayer可以获取当前展示的图层的信息)

   

@interface CustomActionLayer : CALayer
//当改变radius隐式的调用动画效果
@property(nonatomic,assign)CGFloat radius;

@end
/**
 必须用dynamic,CALayer为这个属性自动生成存取方法 ,不能用@synthesize
 */

@dynamic radius;

- (instancetype)init{
    if (self = [super init]) {
        [self setNeedsDisplay];
    }
    return self;
}
- (void)drawInContext:(CGContextRef)ctx{
    CGContextSetFillColorWithColor(ctx,[UIColor redColor].CGColor);
    CGFloat x = self.bounds.size.width/2 - self.radius/2;
    CGFloat y = self.bounds.size.height/2 - self.radius/2;
   
    CGContextAddEllipseInRect(ctx,CGRectMake(x, y,self.radius, self.radius) );
    CGContextFillPath(ctx);
}
+ (BOOL)needsDisplayForKey:(NSString *)key{
    if ([key isEqualToString:@"radius"]) {
        return true;
    }
    return [super needsDisplayForKey:key];
    
}


/**
 presentationLayer:获取屏幕上真正显示的图层(改变图层属性,视觉上不是直接就显示对应值,所以通过presentationLayer可以获取当前展示的图层的信息)
 */
- (id<CAAction>)actionForKey:(NSString *)event{
    if ([self presentationLayer] != nil) {
        if ([event isEqualToString:@"radius"]) {
            CABasicAnimation* basicAni = [CABasicAnimation animationWithKeyPath:@"radius"];
            basicAni.fromValue = [[self presentationLayer] valueForKey:@"radius"];
            return basicAni;
        }
    }
    return [super actionForKey:event];
    
}

 

 

 

UIView的layer默认关闭隐式动画

   //uiview关联的layer禁用了隐士动画 覆盖了layer的actionForkey 返回nil
    [UIView beginAnimations:nil context:nil];//开启uivew的隐士动画
    [UIView setAnimationDuration:3.0];//这里设置3.0秒
    self.btn.layer.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1].CGColor;
    [UIView commitAnimations];

二.属性动画

1.CABasicAnimation

keyPath可取值(收集于网络)

  transform.rotation.x 围绕x轴翻转 参数:角度 angle2Radian(4) 

  transform.rotation.y 围绕y轴翻转 参数:同上 

  transform.rotation.z 围绕z轴翻转 参数:同上 

  transform.rotation 默认围绕z轴 

  transform.scale.x x方向缩放 参数:缩放比例 1.5 

  transform.scale.y y方向缩放 参数:同上 

  transform.scale.z z方向缩放 参数:同上 

  transform.scale 所有方向缩放 参数:同上 

  transform.translation.x x方向移动 参数:x轴上的坐标 100 

  transform.translation.y x方向移动 参数:y轴上的坐标 

  transform.translation.z x方向移动 参数:z轴上的坐标 

  transform.translation 移动 参数:移动到的点 (100,100) 

  opacity 透明度 参数:透明度 0.5 

  backgroundColor 背景颜色 参数:颜色 (id)[[UIColor redColor] CGColor] 

  cornerRadius 圆角 参数:圆角半径 5 

  borderWidth 边框宽度 参数:边框宽度 5 

  bounds 大小 参数:CGRect 

  contents 内容 参数:CGImage 

  contentsRect 可视内容 参数:CGRect 值是0~1之间的小数 

  hidden 是否隐藏 

  position 

  shadowColor 

  shadowOffset 

  shadowOpacity 

  shadowRadius

各属性值的解释

 

Autoreverses 设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到开始的值,过渡平滑
Duration 设定开始值到结束值花费的时间。期间会被速度的属性所影响
RemovedOnCompletion 这个属性默认为 YES,在指定的时间段完成后,动画就自动的从层上移除了。
FillMode 这个属性一般和 RemovedOnCompletion 配合使用,保持动画状态。其中kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态.此时将RemovedOnCompletion设为NO
Speed 默认的值为 1.0.如果你改变这个值为 2.0,动画会用 2 倍的速度播放。这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟即一半的持续时间。
RepeatCount 默认的是 0,动画只会播放一次。如果指定一个无限大的重复次数,使用 MAXFLOAT 。这个不应该和 repeatDration 属性一块使用
RepeatDuration 这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间用完。同上它不应该和 repeatCount 一起使用
FromValue 设置动画的初始值
ToValue 设置动画的到达值
TimingFunction 控制动画运行的节奏.    kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉    kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开    kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地    kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。
BeginTime 可以用来设置动画延迟执行时间,若想延迟1s,就设置为CACurrentMediaTime()+1,CACurrentMediaTime()为图层的当前时间
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position"];
    basic.delegate = self;
    basic.toValue = [NSValue valueWithCGPoint:point];
    basic.duration = 5.0;
//    basic.repeatCount = HUGE_VAL  //循环

 //储存终点值用于动画结束后获取

    [basic setValue:[NSValue valueWithCGPoint:point] forKey:@"KBasicPostionKey"];
    [layer addAnimation:basic forKey:@"KBasicPositon"];

  basic.removedOnCompletion = false;

//位移动画结束后回到结束的位置,如果不这么做 视图回到起始点  
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSLog(@"animationDidStop---");
    [CATransaction begin];//开启事务
    [CATransaction setDisableActions:YES];//关闭隐式动画
    CGPoint point = [[anim valueForKey:@"KBasicPostionKey"] CGPointValue];
    layer.position = point;
    [CATransaction commit];
}

 

暂停动画

    CFTimeInterval time = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
    layer.timeOffset = time;
    
 //speed = 0
    layer.speed = 0;

恢复动画

     CFTimeInterval beigintime = CACurrentMediaTime() - layer.timeOffset;
     layer.timeOffset = 0;
     layer.beginTime = beigintime;
     layer.speed = 1

 关于动画时间的解释:

  

t = (tp - beginTime) * speed + offset

 t为层上的时间,tp为父图层上的时间

 与图层的层级类似,时间也有层级,修改图层上的时间,会影响该图层和子图层,不影响父图层

 CoreAnimation有一个全局时间的概念,也就是所谓的马赫时间,它在设备上所有进程都是全局的

 图层上的默认时间就是马赫时间,即为CACurrentMediaTime()

 动画停止时,层上时间为pauseTime

 恢复动画时,设置了layer.speed = 1, layer.offset = 0

 t = pauseTime = (tp - beginTime) * speed + offset

 pauseTime = (CACurrentMediaTime() -  beginTime) * 1 + 0

 beginTime = CACurrentMediaTime() - pauseTime

2. CAKeyframeAnimation

基本动画只有两个值fromValue和toValue 而关键帧动画可以有多个值

 CAKeyframeAnimation *ani= [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *key1 = [NSValue valueWithCGPoint:layer.position];
//不同于基本动画关键帧动画需要设置初始位置
    NSValue *key2 = [NSValue valueWithCGPoint:CGPointMake(120, 150)];
    NSValue *key3 = [NSValue valueWithCGPoint:CGPointMake(130, 300)];
    NSValue *key4 = [NSValue valueWithCGPoint:CGPointMake(110, 600)];
    ani.values = @[key1,key2,key3,key4];
    CAMediaTimingFunction *fn = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    //每一帧都运用动画缓冲效果
    ani.timingFunctions = @[fn,fn,fn,fn];
    //自定义的缓冲,是个三次贝塞尔曲线,代表变化速率
//    ani.timingFunction = [CAMediaTimingFunction functionWithControlPoints:1 :0 :0.75 :1];
    //整体缓冲
//    ani.timingFunction = fn;
    
    ani.duration = 8;
 //    ani.beginTime = CACurrentMediaTime() +3;//延迟3秒
    [layer addAnimation:ani forKey:@"KCAFramPositon"];

 

自定义缓冲器:

定义了两个控制点(可以理解为一条直线被两个点互相吸引导致的变化) 切线代表变化速率

[CAMediaTimingFunction functionWithControlPoints:1 :0 :0.75 :1];

 

关键帧动画还可以指定运动路径

rotationMode:当沿着路路径变化时自动调整图层方向
 
  CAKeyframeAnimation *ani= [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    CGMutablePathRef path = CGPathCreateMutable();
 
    CGPathMoveToPoint(path, NULL, layer.position.x, layer.position.y);
    CGPathAddCurveToPoint(path, NULL, 150, 160, -30, 80, 60, 400);
    //动画路径
    ani.path = path;
    //沿着路径切线方向
    ani.rotationMode = kCAAnimationRotateAuto;
    CGPathRelease(path);//释放路径对象
    ani.duration = 4;
    ani.beginTime = CACurrentMediaTime() +3;//延迟3秒
    [layer addAnimation:ani forKey:@"KCAFramPositon"];

动画组

CAAnimationGroup:

    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[ani1,ani2];

 转场动画

 

    CATransition *transtion = [[CATransition alloc] init];
    transtion.type = @"cube";
    transtion.subtype = kCATransitionFromRight;
    transtion.duration = 1;
    _transView.backgroundColor = bkcolors[currentIndex];
    [_transView.layer addAnimation:transtion forKey:nil];

type的值:

 

posted @ 2019-04-13 23:19  菜鸟工程司  阅读(305)  评论(0编辑  收藏  举报