UI22_动画

分三部分讲述:UIView动画,transform动画,layer动画

UIView动画

有两种形式:
**第一种形式:**
      UIView提供的动画方法:NSTimerInterval(double类型)
                         duration动画的时间间隔
      [UIView animateWithDuration:3 animations:^{
      //动画的内容写在block里
      self.imageView.frame = CGRectMake(100, 100, 300, 300);
      }];
       //如果下句代码放在这就会显示出从某一处出现的,发到到下句的位置
      self.imageView.frame = CGRectMake(100, 300, 150, 150);
**第二种形式:**
      [UIView animateWithDuration:5 animations:^{
      self.imageView.frame = CGRectMake(100, 100, 300, 300);
      self.imageView.alpha = 0;
      } completion:^(BOOL finished) {
        //最后的回归的状态
        //当动画结束的时候在执行的另外一个UIView动画,平滑的缩放
      [UIView animateWithDuration:3 animations:^{
      self.imageView.frame = CGRectMake(100, 300, 150, 150);
       }];
       self.imageView.alpha = 1;
   }];
**第三种形式:**
    第二参数:延迟时间
    只能重复动画那部分的内容
    [UIView animateWithDuration:5 delay:0.1 options:UIViewAnimationOptionRepeat  animations:^{
    self.imageView.frame = CGRectMake(100, 300, 150, 150);
    } completion:^(BOOL finished) {
    [UIView animateWithDuration:3 animations:^{
      self.imageView.frame = CGRectMake(100, 300, 150, 150);
     }];
       self.imageView.alpha = 1;
    }];
**第四种形式:**
  颤抖动画
  第三个参数:设置的越小,抖动的越剧烈
  第四个参数:设置越大,图片的初速度越快
    [UIView animateWithDuration:5 delay:0.1 usingSpringWithDamping:3 initialSpringVelocity:50 options:UIViewAnimationOptionRepeat animations:^{
     self.imageView.frame = CGRectMake(100, 200, 200, 150);
    } completion:^(BOOL finished) {
     self.imageView.frame = CGRectMake(100, 300, 150, 150);
    }];

transform动画

对视图进行旋转的操作
  第一个参数:将原来的给他
  第二个参数:设置旋转的弧度
    self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_4);
对视图缩放
  第二三个参数设置缩放的比例
    self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 0.9, 0.9);
  在设置视图的偏移量设置
    self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 100, 100);

layer动画

layer是种类最多的动画.主要负责显示空间的一些设置信息,比如边框,弧度等,layer动画的中种类很多,我们看见的UIView的动画也是封装了几个layer动画
第一种layer动画:
创建一个动画的效果
  CATransition *transition = [CATransition animation];
设置动画的种类
  transition.type = @"cube";
设置动画时长
  [transition setDuration:3];
设置动画重复次数    NSIntegerMax整数的最大值
  [transition setRepeatCount:NSIntegerMax];
向imageView上添加动画效果,添加到imageView的layer上
  [self.imageView.layer addAnimation:transition forKey:@"transition"];


动画种类:rippleEffect-水波纹;cube-方形旋转;
    下面首字母小写
    typedef enum : NSUInteger {
        fade = 1,                   //淡入淡出
        push,                       //推挤
        reveal,                     //揭开
        moveIn,                     //覆盖
        cube,                       //立方体
        suckEffect,                 //吮吸
        oglFlip,                    //翻转
        rippleEffect,               //波纹
        pageCurl,                   //翻页
        pageUnCurl,                 //反翻页
        cameraIrisHollowOpen,       //开镜头
        cameraIrisHollowClose,      //关镜头
        curlDown,                   //下翻页
        curlUp,                     //上翻页
        flipFromLeft,               //左翻转
        flipFromRight,              //右翻转
//都要小写        
    } AnimationType;
第二种layer动画(沿着轨迹跑)
关键帧动画
    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
给动画创建一个行走的路径,用来记录移动的关键坐标
    CGMutablePathRef path = CGPathCreateMutable();

  指定起始的坐标位置
    第一个参数:用path来保存起始路径
    第二个参数:null
    第三四个参数:要移动的控件的起始坐标
    CGPathMoveToPoint(path, NULL, self.imageView.frame.origin.x, self.imageView.frame.origin.y);

   设置图片的移动轨迹
    CGPathAddLineToPoint(path, NULL, 100, 100);
    CGPathAddLineToPoint(path, NULL, 10, 20);
    CGPathAddLineToPoint(path, NULL, 50, 10);
    CGPathAddLineToPoint(path, NULL, 140, 200);

   给视图设置一条曲线的路径
    CGPathAddCurveToPoint(path, NULL, 200, 200, 200, 100, 120, 40);
    CGPathAddCurveToPoint(path, NULL, 80, 10, 20, 100, 300, 100);  
    CGPathAddCurveToPoint(path, NULL, 20, 90, 20, 100, 200, 150);   
    CGPathAddCurveToPoint(path, NULL, 30, 70, 60, 90, 110,50);
  设置动画的时长
    [keyAnimation setDuration:4];

  重复次数
    [keyAnimation setRepeatCount:NSIntegerMax];

  把设计好的路线放到动画中
    [keyAnimation setPath:path];

  最后,把动画添加到视图上
    [self.imageView.layer addAnimation:keyAnimation forKey:@"keyAnimation"];
**第三种layer动画**
**让图片缩放:**
    本质还是修改transform的属性 让其放大缩小
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    对layer动画设置很多需要KVC的方式赋值,就是需要通过给定一个key再去设置

    动画时长
    [basic setDuration:3];

    设置动画执行的次数
    [basic setRepeatCount:NSIntegerMax];

    这个动画设置的是一个缩放的效果,所以需要给定一个开始的初始值
    fromValue与toValue是对象类型  需要一个id类型的对象  所以用number进行转型  number就是个对象类型   
    basic.fromValue = [NSNumber numberWithInt:1];

    在设置一个结束的值
    basic.toValue = [NSNumber numberWithInt:2];

    把动画添加到视图上
    [self.imageView.layer addAnimation:basic forKey:@"basic"];

**让图片旋转**
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];

    设置角度
    basic.fromValue = [NSNumber numberWithFloat:0.0];
    basic.toValue = [NSNumber numberWithFloat:2*M_PI];

    设置动画时长
    [basic setDuration:3];

    设置动画次数
    [basic setRepeatCount:NSIntegerMax];
    [self.imageView.layer addAnimation:basic forKey:@"basic"];

    让其自动旋转
    [basic setAutoreverses:YES];
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值