zoukankan      html  css  js  c++  java
  • CoreAnimation 核心动画 / CABasicAnimation/ CAKeyframeAnimation

    - (void)createBaseAnimation{

        //基础动画

        CABasicAnimation *animation = [CABasicAnimation animation];

        

        animation.keyPath = @"bounds";

    //    animation.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)];//默认为现在的状态

        animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)];

        

        animation.duration = 2;

        animation.removedOnCompletion = NO//动画之后保持最新

        animation.fillMode = kCAFillModeForwards//最新样式

        

        animation.delegate = self;

        [view.layer addAnimation:animation forKey:nil];

     

    }

     

    - (void)animationDidStart:(CAAnimation *)anim{

        NSLog(@"动画开始时调用");

        

    }

     

    - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

        NSLog(@"动画结束时调用");

    }

     

    - (void)createKeyFrameAnimation{

        //帧动画

        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];

        animation.keyPath = @"position";

        //路径

    //    CGMutablePathRef path = CGPathCreateMutable();

    //    CGPathAddEllipseInRect(path, nil, CGRectMake(100, 100, 200, 200));

    //    

    //    animation.path = path;

        

    //注意:与基础动画的区别:可以设置多个点/一堆值

        NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];

        NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(0, 300)];

        NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(300, 0)];

        animation.values = @[value1,value2,value3];

        //动画的执行节奏

        animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

        animation.duration = 5;

        animation.removedOnCompletion = NO//动画之后保持最新

        animation.fillMode = kCAFillModeForwards//最新样式

        [view.layer addAnimation:animation forKey:nil];

        

    }

     

    - (void)createTransiton{

        //转场动画

        CATransition *animaiton = [CATransition animation];

        //动画过渡类型

        animaiton.type = @"cube";

        //过渡方向

        animaiton.subtype = kCATransitionFade;

        

        animaiton.duration = 3;

        [view.layer addAnimation:animaiton forKey:nil];

     

    }

     

    - (void)createAnimationGroup{

        //动画分组(旋转+缩放)

        //1.旋转

        CABasicAnimation *rotationAnimaiton = [CABasicAnimation animation];

        rotationAnimaiton.keyPath = @"transform.rotation.z";

        rotationAnimaiton.toValue = @(M_PI_4 * 3);

        rotationAnimaiton.duration = 5;

        rotationAnimaiton.repeatCount = MAXFLOAT;

        

        //2.缩放

        CABasicAnimation *scaleAnimation = [CABasicAnimation animation];

        scaleAnimation.keyPath = @"transform";

        scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2, 2, 0)];

        scaleAnimation.duration = 5;

        

        //动画分组

        CAAnimationGroup *group = [CAAnimationGroup animation];

        group.animations = @[rotationAnimaiton,scaleAnimation];

        group.removedOnCompletion = NO;

        group.fillMode = kCAFillModeForwards;

        group.duration = 5;

        [view.layer addAnimation:group forKey:nil];

        

    }

     

    - IOS 核心动画之CAKeyframeAnimation

    - 简单介绍

    是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值

    - 属性解析:

    - values:就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧

    - path:可以设置一个CGPathRefCGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略

    - keyTimes:可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的

    - 说明:CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

    - Values方式:

    - CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];

    animation.keyPath = @"position";

    NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];

    NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];

    NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];

    NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];

    NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 100)];

    animation.values=@[value1,value2,value3,value4,value5]; animation.repeatCount=MAXFLOAT;

    animation.removedOnCompletion = NO;

    animation.fillMode = kCAFillModeForwards;

    animation.duration = 4.0f;

    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    animation.delegate=self;

    [self.myView.layer addAnimation:animation forKey:nil];

    - Path方式:

    - CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];

    animation.keyPath = @"position";

    CGMutablePathRef path=CGPathCreateMutable();

    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));

    animation.path=path;

    CGPathRelease(path);

    animation.repeatCount=MAXFLOAT;

    animation.removedOnCompletion = NO;

    animation.fillMode = kCAFillModeForwards;

    animation.duration = 4.0f;

    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    animation.delegate=self;

    [self.myView.layer addAnimation:animation forKey:nil];

    - keyPath可以使用的key

    - #define angle2Radian(angle) ((angle)/180.0*M_PI)

    - 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

     

     

     

     

  • 相关阅读:
    Handlerbars基础笔记
    each()和eq()
    可编辑表格(Editable Table)
    垂直居中vertical-align
    CSS属性的私有前缀
    CSS进阶知识
    CSS预处理器们
    CSS3之伪元素选择器和伪类选择器
    CSS基础复习
    Plan
  • 原文地址:https://www.cnblogs.com/daxueshan/p/5886905.html
Copyright © 2011-2022 走看看