ios中的动画小结(view层次和layer层次)

(一).view层次上的动画

       一、动画简单实用

     /**    setAnimationDelay的时间间隔一般设置在0.250.35s*/

    //————方法1 ———

    CGRect f = view.frame;

    f.origin.y += 250;

    [UIView beginAnimations:@"Ani1" context:@"123"];

    [UIView setAnimationDelay:1.35f];

    // 代理

    [UIView setAnimationDelegate:self];

    /**

                UIViewAnimationCurveEaseOut      先快后慢 

                UIViewAnimationCurveEaseIn          先慢后快

                UIViewAnimationCurveEaseInOut   先慢快后快慢

                UIViewAnimationCurveLinear    水平

            */

    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

    //设置动画完毕执行的方法

    [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];


    //动画开始

    view.frame =f ;

    //动画结束

    [UIView commitAnimations];


-(void)animationDidStop:(NSString *)animationID

               finished:(NSNumber *)finished

                context:(void *) context

{

    NSLog(@"%@---%@",animationID,context);

}

    //————方法2 ———

    [UIView animateWithDuration:1.35f animations:^(void)

     {

         // 旋转

         CGAffineTransform t = CGAffineTransformRotate(view.transform, 0.3);//

         view.transform = t;

         //缩放

         CGAffineTransform t1 = CGAffineTransformMakeScale(0.5, 0.5);

           view.transform = t1;

          //位移

         CGAffineTransform t2 = CGAffineTransformMakeTranslation(3, 3);

          view.transform  = t2;

     }];

     二、关键帧动画

        iOS7UIView封装了一组API,让我们很容易的得到与Core Animation框架中的   CAKeyframeAnimation一样的效果。

     注意:delay 是推迟多少时间执行

                 duration:执行时间

                  options:UIViewAnimationOptionRepeat 

            UIViewAnimationOptionAutoreverse 

              …

       1. [UIView animateKeyframesWithDuration:duration delay:delay 

  1. options:options animations:^{ 
  2. [UIView addKeyframeWithRelativeStartTime:0.0 
  3. relativeDuration:0.5 animations:^{ 
  4. //第一帧要执行的动画 
  5. }]; 
  6. [UIView addKeyframeWithRelativeStartTime:0.5 
  7. relativeDuration:0.5 animations:^{ 
  8. //第二帧要执行的动画 
  9. }]; 
  10. } completion:^(BOOL finished) { 
  11. //动画结束后执行的代码块 
  12. }];

  新引入的animateKeyframesWithDurationCAKeyframeAnimation的关系,可以比对animateWithDurationCABasicAnimation,我们只需要将每一帧动画加入到block方法中,并传入此段动画在全过程中的相对开始时间和执行时间(duration具体是指此段动画的执行时间占全过程的百分比)。同时,你可以在一次动画中使用多个关键帧,只需使用addKeyframe依次将所有关键帧加入动画执行栈中。

     [UIView animateKeyframesWithDuration:3 delay:0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{

        // first frame

        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.15 animations:^{

            // 顺时针旋转 90

            view.transform = CGAffineTransformMakeRotation(M_PI*-1.5);

        }];

        // second frame

        [UIView addKeyframeWithRelativeStartTime:0.15 relativeDuration:0.10 animations:^{

            // 180

            view.transform =CGAffineTransformMakeRotation(M_PI*1.0);

        }];

        

        //third frame

        [UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.20 animations:^{

            // 摆过中点 225

            view.transform = CGAffineTransformMakeRotation(M_PI*1.3);

        }];

        

        // fourth frame

        [UIView addKeyframeWithRelativeStartTime:0.45 relativeDuration:0.20 animations:^{

            // 再摆回来 140

            view.transform = CGAffineTransformMakeRotation(M_PI*0.8);

        }];

        // fifth frame

        [UIView addKeyframeWithRelativeStartTime:0.65 relativeDuration:0.35 animations:^{

            CGAffineTransform shift =

            CGAffineTransformMakeTranslation(180.0, 0.0);

            CGAffineTransform rotate =

            CGAffineTransformMakeRotation(M_PI*0.3);

            

            view.transform = CGAffineTransformConcat(shift, rotate);

            view.alpha = 0.0;

        }];


    } completion:^(BOOL finished) {

        

    }];

    三、弹簧动画

     弹簧动画

       iOS7新引入的另一个block方法可以让你轻松将真实物理世界中的弹性效果集成进视图动画中。苹果公司一直建议开发者尽可能将动画效果做的跟真实物理世界一样——在视图滑动时,可以像弹簧一样,稍微拉伸一些,再弹回正确位置。使用新的弹簧动画API来实现此效果相较以往要简单很多。

         usingSpringWithDamping:阻尼值越接近0时,弹性越明显

          initialSpringVelocity:velocity参数代表弹性修正速度,它表示视图在弹跳时恢复原位的速度,例如,如果在动画中视图被拉伸的最大距离是200像素,你想让视图以100像素每秒的速度恢复原位,那么就设置velocity的值为0.5



   [UIView animateWithDuration:2 delay:0.0 usingSpringWithDamping:0.1 initialSpringVelocity:1 options:UIViewAnimationOptionCurveEaseInOut animations:^{

          // 旋转

          CGAffineTransform t = CGAffineTransformRotate(view.transform, 0.3);//

//          view.transform = t;

          

          //缩放

          CGAffineTransform t1 = CGAffineTransformMakeScale(0.5, 0.5);

          //         view.transform = t1;

          //位移

          CGAffineTransform t2 = CGAffineTransformMakeTranslation(0, 100);

                   view.transform  = t2;

      } completion:^(BOOL finished) {

      }];


代码中damping设置为0.8不够明显,你可以将damping调为0.1,然后慢慢调整velocity看看效果)

 

         我用弹簧动画让模态视图控制器从屏幕底部滑上来,设置弹性阻尼为0.8,弹性修正速度为1.0,运行后可以看到,视图将冲出15像素的距离,然后慢慢降回原位。如果我设置弹性阻尼为0.6或者更小,那么视图会冲得更高,而且降回原位前还会继续向下反弹。(也就是停止前来回弹的次数越来越多,弹性效果越来越明显)需要注意的是,不要将弹性动画与UIKit的动态特效引擎相混淆。弹性动画是一个标准的UIView动画API,仅仅提供了有限的几种真实物理效果。

  屏幕快照

       在iOS7 以前, 获取一个UIView的快照有以下步骤: 首先创建一个UIGraphics的图像上下文,然后将视图的layer渲染到该上下      文中,从而取得一个图像,最后关闭图像上下文,并将图像显示在UIImageView中。

   现在我们只需要一行代码就可以完成上述步骤了:

  1. [view snapshotViewAfterScreenUpdates:NO]; 

      这个方法制作了一个UIView的副本,如果我们希望视图在执行动画之前保存现在的外观,以备之后使用(动画中视图可能会被子视图遮盖或者发生其他一些变          化),该方法就特别方便。

 

      afterUpdates参数表示是否在所有效果应用在视图上了以后再获取快照。例如,如果该参数为NO,则立马获取该视图现在状态的快照,反之,以下代码只能得         到一个空白快照:

  1. [view snapshotViewAfterScreenUpdates:YES]; 
  2. [view setAlpha:0.0]; 

由于我们设置afterUpdates参数为YES,而视图的透明度值被设置成了0,所以方法将在该设置应用在视图上了之后才进行快照,于是乎屏幕空空如也。另外就是……你可以对快照再进行快照……继续快照……

   结论

苹果公司在iOS7中为开发者添加了新的用于创建和自定义动画的APIiOS7 SDK不仅引入了强大的动画block和许多易于使用的方法,而且彻底改变了为视图自定义动画的方式。

(二)layer层动画

     前提要导入包:#import <QuartzCore/QuartzCore.h>

    一、基础动画效果

    CABasicAnimation 自己只有三个 property   fromValue  toValue  ByValue
  
    CABasicAnimation provides basic,single-keyframe animation capabilities for a layer property.
         >创建CABasicAnimation>设置属性值:duration、toValue、autoreverse   、repeatCount> 加入控件中的layer中
     // 动画效果
    CGRect r = CGRectMake(0, 0, 120, 120);
      @“position” @“bounds”    

    // bounds is layer's property
    // position is layer's property
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"position"];
     ani.duration = .35f;
     ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    //    ani.toValue = [NSValue valueWithCGRect:r];
      ani.toValue = [NSValue valueWithCGPoint:self.view.center];
    // 路径反转
      ani.autoreverses = YES;
      ani.repeatCount = 100;

    [view.layer addAnimation:ani forKey:@"ani-1"];


    二、帧动画 

  //动画是在多线程执行的

    >创建CAKeyframeAnimation对象>加入values>设置对象的属性值>加入空件的layer中

    //---------帧动画 ---------

    CGPoint c =tf.center;

    CGPoint l = CGPointMake(c.x - 15,c.y);

    CGPoint r  =CGPointMake(c.x + 15,c.y);


    CAKeyframeAnimation *ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    ani.values = [NSArray arrayWithObjects:

                  [NSValue valueWithCGPoint:l],

                  [NSValue valueWithCGPoint:c],

                  [NSValue valueWithCGPoint:r],

                  [NSValue valueWithCGPoint:c],

                  [NSValue valueWithCGPoint:l],

                  [NSValue valueWithCGPoint:c],

                  nil];

    ani.autoreverses = YES;

    ani.repeatCount = 100;

    [tf.layer addAnimation:ani forKey:@"122"];

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值