zoukankan      html  css  js  c++  java
  • CAKeyframeAnimation

    之所以叫做关键帧动画是因为,这个类可以实现,某一属性按照一串的数值进行动画,就好像制作动画的时候一帧一帧的制作一样。

    一般使用的时候  首先通过 animationWithKeyPath 方法 创建一个CAKeyframeAnimation实例,

    CAKeyframeAnimation 的一些比较重要的属性

    1. path

    这是一个 CGPathRef  对象,默认是空的,当我们创建好CAKeyframeAnimation的实例的时候,可以通过制定一个自己定义的path来让  某一个物体按照这个路径进行动画。这个值默认是nil  当其被设定的时候  values  这个属性就被覆盖 

    2. values

    一个数组,提供了一组关键帧的值,  当使用path的 时候 values的值自动被忽略。

     CGMutablePathRef path = CGPathCreateMutable();

        

        CGPathMoveToPoint(path, NULL, 50.0, 120.0);

        CGPathAddLineToPoint(path, NULL, 90, 130);

        CGPathAddLineToPoint(path, NULL, 40, 140);

        CGPathAddLineToPoint(path, NULL, 80, 150);

        CGPathAddLineToPoint(path, NULL, 30, 160);

        CGPathAddLineToPoint(path, NULL, 100, 170);

    //CGPathAddCurveToPoint(path,NULL,50.0,275.0,150.0,275.0,70.0,120.0);   曲线path       

        CAKeyframeAnimation * animation = [CAKeyframeAnimationanimationWithKeyPath:@"position"];

        [animation setPath:path];

        [animation setDuration:2.0f];

        CFRelease(path);

        [_btn.layer addAnimation:animation forKey:NULL];

    以上代码就是让  _btn 按照上面path中定义的5个点进行移动,其中  的@"position"代表的是属性。

     

    //////////////////////////////////////////////////////////////////////

    例子

    A、 B两面, 从A面旋转到B面然后有旋转到A面 

    代码片段一

    CAKeyframeAnimation *theAnimation = [CAKeyframeAnimationanimation];

        theAnimation.values = [NSArray arrayWithObjects:

      [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(0, 0,1,0)],

                               [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(3.14/2.0f, 0,1,0)],

                               [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(3.14, 0,1,0)],

                               [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(3.14 + 3.14/2.0f, 0,1,0)],

                               [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(3.14 + 3.14, 0,1,0)],         

      nil];

    theAnimation.cumulative = YES;

    theAnimation.duration = 2.0f;

    theAnimation.repeatCount = 1;

    theAnimation.removedOnCompletion = YES;

    [_headImageView.layer addAnimation:theAnimation forKey:@"transform"];

    &&&&&&&&&&&&&

    代码片段二

     _headImageView.animationDuration = 2;

        _headImageView.animationImages = [NSArrayarrayWithObjects:[UIImageimageNamed:@"A.jpg"],

                                          [UIImage imageNamed:@"B.jpg"],[UIImage imageNamed:@"B.jpg"],

                                          [UIImage imageNamed:@"A.jpg"], nil];

        _headImageView.animationRepeatCount = 1;

        [_headImageViewstartAnimating];

     

    上面的代码很巧妙的结合在了一起

    代码片段一让headImageView旋转了360度,一共分为了4个步骤,也就是每次90度(3.14/2.0),因为在第一个90度的时候,需要从A切换到B,所以这里用到了每90度一个阶段。

    代码片段二种使用了同样的时间进行了图片的切换, 4个步骤,分别使用了对应的图片。这样两者结合起来,就达到了一个完美的效果。

    真TM是人才啊

     

    CATransform3D myTransform;
    myTransform = CATransform3DMakeRotation(angle, x, y, z);

    该CATransform3DMakeRotation函数创建了一个转变,将在三维轴坐标系以任意弧度旋转层。x-y-z轴的有个确定的范围(介于-1 和+1之间) 。相应的坐标轴指定的值告诉系统在该轴上旋转。例如,如果X轴是设置为-1或1 ,该对象将的X轴的方向上旋转,这意味着将把它垂直旋转。把这些值看做是插入在图像每个坐标轴上的秸秆(Think of these values as inserting straws through the image for each axis.)。如果秸秆插过x轴,图像将沿着秸秆垂直旋转。您可以使用坐标轴角度值创建更复杂的旋转。。对于大多数的用途,但是,值介于-1和+1已经足够。

     

     

    /////////////////////////////////////////////////

    1.渐渐变淡的效果:

        CAKeyframeAnimation *opacityAnimation = [CAKeyframeAnimationanimationWithKeyPath:@"opacity"];

        opacityAnimation.duration = 3.0f;

        opacityAnimation.values = @[@1, @0.45, @0];

        opacityAnimation.keyTimes = @[@0, @0.5, @1];    

        [_imgView.layer addAnimation:opacityAnimation forKey:nil];

     

    /////////////////////////////////////////////////

    2.从大变小 

        CABasicAnimation *scaleAnimation = [CABasicAnimationanimationWithKeyPath:@"transform.scale.xy"];

        scaleAnimation.fromValue = @1.0;

        scaleAnimation.toValue = @0.0;

        scaleAnimation.duration = 3.0f;

        [_imgView.layer addAnimation:scaleAnimation forKey:nil];

    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    3.将上面的2个animation 放到一个 animationgroup 里面  就可以一起运行了

      CAAnimationGroup * group = [CAAnimationGroupanimation];

        group.duration = 3.0f;

        group.repeatCount = INFINITY;

        group.animations = @[scaleAnimation,opacityAnimation];

        [_imgView.layeraddAnimation:group forKey:nil];

  • 相关阅读:
    RabbitMQ 均衡调度(公平分发机制)
    RabbitMQ 循环调度
    模型绑定与验证笔记
    Controller总结
    JQuery事件绑定,bind与on区别
    View的呈现(一)ActionResult
    C#操作sql时注意点
    mvc4中的过滤器
    Bundle、Intent、SharedPreferences
    SharedPreferences的基本用法
  • 原文地址:https://www.cnblogs.com/rollrock/p/3717717.html
Copyright © 2011-2022 走看看