zoukankan      html  css  js  c++  java
  • CoreAnimation

    CoreAnimation


    1.CABasicAnimation

    // position 
    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"position"];

    // bounds
    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"bounds.size"];

    // opacity
    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"opacity"];

    // backgroundColor
    // 景色渐变一定用CGColor
    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];

    // transform.scale
    // 以下缩放是中心缩放,若需要自定义缩放点需要设置锚点: [self.firstView.layer setAnchorPoint:CGPointMake(0, 0)];
    // 一般,锚点位于图层中心{0.5,0.5},其度量是以单位方形而不是点为参照,无论图层有多大,右下角的坐标都是{1.0,1.0}
    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

    // transform.rotation
    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"]; // x ,y ,z 默认是z

    // transform.translation
    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"]; // x ,y ,z 默认是x

    // cornerRadius
    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];

    // borderWidth
    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"borderWidth"];

    以position为例

    // position
    - (void)postionAnimation {
    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"position"];
    ba.toValue = [NSValue valueWithCGPoint:self.firstView.center];
    ba.duration = 0.8;
    ba.delegate = self;
    ba.removedOnCompletion = NO; // 动画结束后是否回到原状态,默YES.若为NO,则 fillMode 须为 kCAFillModeForwards
    ba.fillMode = kCAFillModeBackwards;
    ba.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; // 动画的时间节奏控制
    [self.secondView.layer addAnimation:ba forKey:@"position"];
    }

    2.CAKeyframeAnimation

    - (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];

    [self valuesAnimation];
    }

    - (void)valuesAnimation {
    CAKeyframeAnimation *kf = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    kf.fillMode = kCAFillModeForwards;
    kf.removedOnCompletion = NO;
    kf.duration = 3;
    kf.repeatCount = 0;
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(0, 120)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(190, 20)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(20, 300)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(300, 150)];
    kf.values = @[value1,value2,value3,value4];

    [self.firstView.layer addAnimation:kf forKey:@"valuesKeyframe"];
    }

    - (void)pathAnimation {
    CAKeyframeAnimation *kf = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    kf.duration = 3.0f;
    kf.removedOnCompletion = NO;
    kf.fillMode = kCAFillModeForwards;
    kf.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(0, 0, 370, 300));

    kf.path = path;
    CGPathRelease(path);

    [self.firstView.layer addAnimation:kf forKey:@"pathKeyframe"];
    }

    3.CATransition
    /***********type:动画过渡类型***********************

            kCATransitionFade 交叉淡化过渡
    kCATransitionMoveIn 新视图移到旧视图上面
    kCATransitionPush 新视图把旧视图推出去
    kCATransitionReveal 将旧视图移开,显示下面的新视图

            kCATransitionCube 立方体翻滚效果
    kCATransitionOglFlip 上下左右翻转效果
    kCATransitionSuckEffect 收缩效果,如一块布被抽走
    kCATransitionRippleEffect 水滴效果
    kCATransitionPageCurl 向上翻页效果
    kCATransitionPageUnCurl 向下翻页效果
    kCATransitionCameraIrisHollowOpen 相机镜头打开效果
    kCATransitionCameraIrisHollowClos 相机镜头关闭效果

    ************************************************************/

    /***********subType:动画过渡方向***********************

            kCATransitionFromRight 从右边
    kCATransitionFromLeft 从左边
    kCATransitionFromTop 从顶部
    kCATransitionFromBottom 从底部

    *************************************************************/
    以cameraIrisHollowOpen为例

     - (void)cameraIrisHollowTransition {
    CATransition *t = [CATransition animation];
    t.type = @"cameraIrisHollowOpen";
    // t.type = @"cameraIrisHollowClos";
    t.subtype = kCATransitionFromLeft;
    t.duration = 1.5;
    self.firstView.backgroundColor = [UIColor colorWithRed:0.2 green:0.3 blue:0.6 alpha:1];
    [self.firstView.layer addAnimation:t forKey:@"pageCurlTransition"];
    }

    4.CASpringAnimation 继承自CABasicAnimation

    /**
    * @author Jack Lee, 16-05-17 22:05:53
    *
    * @brief after iOS9.0
    */

    - (void)springAnimation {
    CASpringAnimation *spring = [CASpringAnimation animationWithKeyPath:@"bounds.size"];
    spring.mass = 10; // 质量,影响图层运动时的弹簧惯性,质量越大,弹簧拉伸和压缩的幅度越大
    spring.stiffness = 5000; // 刚度系数(劲度系数/弹性系数),刚度系数越大,形变产生的力就越大,运动越快
    spring.damping = 100; // 阻尼系数,阻止弹簧伸缩的系数,阻尼系数越大,停止越快
    spring.initialVelocity = 5; // 初始速率,动画视图的初始速度大小;速率为正数时,速度方向与运动方向一致,速率为负数时,速度方向与运动方向相反
    spring.duration = spring.settlingDuration; // 结算时间 返回弹簧动画到停止时的估算时间,根据当前的动画参数估算,通常弹簧动画的时间使用结算时间比较准确
    spring.toValue =[NSValue valueWithCGSize:self.firstView.bounds.size];
    spring.removedOnCompletion = NO;
    spring.fillMode = kCAFillModeForwards;
    [self.secondView.layer addAnimation:spring forKey:@"spring"];
    }

    5.CAAnimationGroup

    - (void)groupAnimation {
    CABasicAnimation *p = [CABasicAnimation animationWithKeyPath:@"position"];
    p.toValue = [NSValue valueWithCGPoint:self.firstView.center];

    CABasicAnimation *o = [CABasicAnimation animationWithKeyPath:@"opacity"];
    o.toValue = @(0.2);

    CABasicAnimation *b = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
    b.toValue = [NSValue valueWithCGSize:self.firstView.bounds.size];

    CAAnimationGroup *g = [CAAnimationGroup animation];
    g.animations = @[p,o,b];
    g.duration = 0.8;
    g.removedOnCompletion = NO;
    g.fillMode = kCAFillModeForwards;
    g.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

    [self.secondView.layer addAnimation:g forKey:@"groupAnimation"];
    }

     
  • 相关阅读:
    团队作业第五次—项目冲刺-Day6
    团队作业第五次—项目冲刺-Day4
    团队作业第五次—项目冲刺-Day3
    团队作业第五次—项目冲刺-Day2
    研途——冲刺集合
    团队作业第六次—事后诸葛亮
    研途——测试总结
    研途——冲刺总结
    研途——冲刺日志(第七天)
    研途——冲刺日志(第六天)
  • 原文地址:https://www.cnblogs.com/buakaw/p/5725670.html
Copyright © 2011-2022 走看看