美文网首页
UIView动画

UIView动画

作者: 春风依旧 | 来源:发表于2017-12-16 10:50 被阅读15次

    前言:

    对于动画的应用我还是停留在UIView动画的层次上,最近面试的时候被问到动画,面试官那一脸嫌弃的样子至今记忆优新,所以对这一块进行恶补一下

    UIView动画:实质上是对Core Animation的封装,提供简洁的动画接口
          基本属性动画
               1、frame 2、bounds 3、center 4、alpha 5、backgroundColor
          transform动画:
               1、旋转 2、平移 3、缩放

    属性更新:

    1、frame

           [UIView animateWithDuration:1.5 animations:^{
                    _middleRect = self.TopRightView.frame;
                    self.TopRightView.frame = self.TopLeftView.frame;
                } completion:^(BOOL finished) {
                    [UIView animateWithDuration:1.5 animations:^{
                        self.TopRightView.frame = _middleRect;
                    }];
                }];
    

    2、bounds

       CGRect originalBounds = self.BoundsView.bounds;
                //尽管这个rect的x,y跟原始的不同,动画也只是改变了宽高
                CGRect rect = CGRectMake(0, 0, 300, 120);
                
                [UIView animateWithDuration:1 animations:^{
                    self.BoundsView.bounds = rect;
                } completion:^(BOOL finished) {
                    [UIView animateWithDuration:1 animations:^{
                        self.BoundsView.bounds = originalBounds;
                    }];
                }];
    

    3、center

        CGPoint pointOne = self.centerView.center;
            CGPoint pointTwo = CGPointMake(SCREEN_WIDTH - 50, pointOne.y);
            CGPoint pointThree = CGPointMake(50, pointOne.y);
    
            [UIView animateWithDuration:2 animations:^{
                self.centerView.center = pointThree;
            } completion:^(BOOL finished) {
                
                [UIView animateWithDuration:3 animations:^{
                    self.centerView.center = pointTwo;
                } completion:^(BOOL finished) {
                    [UIView animateWithDuration:2 animations:^{
                        self.centerView.center = pointOne;;
                    }];
                }];
        
            }];
    

    4、alpha

       [UIView animateWithDuration:2 animations:^{
                    self.BoundsView.alpha = 0.3;
                } completion:^(BOOL finished) {
                    [UIView animateWithDuration:2 animations:^{
                        self.BoundsView.alpha = 1;
                    }];
                }];
    

    5、backgroundColor

     [UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
                    [UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
                        self.backView.backgroundColor = RGB(0.9475, 0.1921, 0.1746);
                    }];
                    [UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{
                        self.backView.backgroundColor = RGB(0.1064, 0.6052, 0.0334);
                    }];
                    [UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{
                        self.backView.backgroundColor = RGB(0.1366, 0.3017, 0.8411);
                    }];
                    [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
                        self.backView.backgroundColor = RGB(0.619, 0.037, 0.6719);
                    }];
                } completion:^(BOOL finished) {
                    
                    [UIView animateWithDuration:1 animations:^{
                        self.backView.backgroundColor = [UIColor whiteColor];
                    }];
                    
                }];
    

    transform动画:

    CGAffineTransform:是CoreGraphics框架中的类,作为UIView的transform属性,控制视图的缩放、旋转、平移操作,也称为放射变换矩阵

     CGAffineTransformIdentity                                还原的设置
     CGAffineTransformMakeRotation(CGFloat angle)             旋转
     CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)       缩放
     CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty) 移动
    

    1、旋转

      angle = 0;
            [NSTimer scheduledTimerWithTimeInterval: 0.03 target: self selector:@selector(transformAction) userInfo: nil repeats: YES];
    
    -(void)transformAction {
        
        angle += 0.05;//angle角度 double angle;
        NSLog(@"%f",angle);
        if (angle > 6.28) {//大于 M_PI*2(360度) 角度再次从0开始
            angle = 0;
        }
        
        CGAffineTransform transform;
        transform = CGAffineTransformMakeRotation(angle);
        
      // transform = GAffineTransformRotate(self.imageView.transform, angle);
        
        self.imageView.transform = transform;
        
    }
    
    

    2、缩放

     [UIView animateWithDuration:kAnimationDuration animations:^{
                
            CGAffineTransform transform;
                //每次旋转都是根据目标对象最原始的transform进行旋转
            transform = CGAffineTransformMakeScale(0.4, 0.4);
                //则是根据目标对象当前的transform(多次旋转后transform已经变化了)进行旋转
           //  transform = CGAffineTransformScale(self.imageView.transform, 0.4, 0.4);            
             self.imageView.transform = transform;
                
    }];
    

    3、移动

        [UIView animateWithDuration:kAnimationDuration animations:^{
                
                CGAffineTransform transform;
                //每次旋转都是根据目标对象最原始的transform进行旋转
                transform = CGAffineTransformMakeTranslation(0, 60);
                //则是根据目标对象当前的transform(多次旋转后transform已经变化了)进行旋转
             // transform = CGAffineTransformTranslate(self.imageView.transform, 0, 60);
          self.imageView.transform = transform;
                
         }];
    

    弹簧动画:

        [UIView animateWithDuration:1.5//动画时长
                              delay:0 //动画延迟
             usingSpringWithDamping:0.2 //类似弹簧的震动效果 0~1
              initialSpringVelocity:4  //初始速度
                            options:UIViewAnimationOptionCurveLinear//动画过度效果
                         animations:^{
                             
           self.strechView.backgroundColor = [UIColor redColor];
           self.strechView.frame = _pointTwo;
                     
        } completion:^(BOOL finished) {
            
             [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{
                 
                 self.strechView.frame = _pointOne;
                 
             } completion:^(BOOL finished) {
                 
               self.strechView.backgroundColor = [UIColor orangeColor];
                 
             }];
            
        }];
    

    相关文章

      网友评论

          本文标题:UIView动画

          本文链接:https://www.haomeiwen.com/subject/mycswxtx.html