美文网首页
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