UIView动画补充

我自己的总结：

 
    // 第一种： Duration 时间    animations：动画体 
    /*
    [UIView animateWithDuration:4 animations:^{
        CGRect  rect = redView.frame;
        rect.origin.y += 25;
        redView.frame = rect;
    }];
     */
    
    // 第二种： Duration 时间    animations：动画体 动画优点卡顿 相比第一种动画结束增加了一个回调
    /*
     
     [UIView animateWithDuration:4 animations:^{
         CGRect  rect = redView.frame;
         rect.origin.y += 25;
         redView.frame = rect;
     } completion:^(BOOL finished) {
         //动画结束
         CGRect  rect = redView.frame;
         rect.origin.y -= 25;
         redView.frame = rect;
     }];
    
    */
    
    //第三种：相比前两种增加一个延时，
    
    /*
    [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
        CGRect  rect = redView.frame;
        rect.origin.y += 100;
        redView.frame = rect;

    } completion:^(BOOL finished) {
        
    }];
     */
    


     //第四种： 弹簧效果动画
    //usingSpringWithDamping：弹簧动画的阻尼值，也就是相当于摩擦力的大小，该属性的值从0.0到1.0之间，越靠近0，阻尼越小，弹动的幅度越大，反之阻尼越大，弹动的幅度越小，如果大道一定程度，会出现弹不动的情况。
//    initialSpringVelocity：弹簧动画的速率，或者说是动力。值越小弹簧的动力越小，弹簧拉伸的幅度越小，反之动力越大，弹簧拉伸的幅度越大。这里需要注意的是，如果设置为0，表示忽略该属性，由动画持续时间和阻尼计算动画的效果。


/*
    [UIView animateWithDuration:2 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0.5 options:UIViewAnimationOptionCurveLinear animations:^{
        CGRect  rect = redView.frame;
        rect.origin.y += 100;
        redView.frame = rect;
    } completion:^(BOOL finished) {
        
    }];
    */
    
    
    /**
     
     UIViewAnimationOptionTransitionNone            = 0 << 20, // default
     UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,
     UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,
     UIViewAnimationOptionTransitionCurlUp          = 3 << 20,
     UIViewAnimationOptionTransitionCurlDown        = 4 << 20,
     UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,
     UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,
     UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,
  
     */
    
    //第五种： 翻页，旋转
    
    /*
    [UIView transitionWithView:redView duration:2 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
        
    } completion:^(BOOL finished) {
        
    }];
    */
    
    
    //第六种： 页面反动
    /*
    [UIView transitionFromView:blueView toView:redView duration:5 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
        
        [UIView transitionFromView:redView toView:blueView duration:5 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
            
        }];
        
    }];
     */
    
    
    
 //第六种： 页面反动,系统动画performSystemAnimation只有一种删除动画，不知道为什么
    /*
    [UIView performSystemAnimation:UISystemAnimationDelete onViews:@[redView] options:UIViewAnimationOptionTransitionNone animations:^{
  
    } completion:^(BOOL finished) {


    }];
     */
    
    
    
    
    
    
    
    
    [UIView animateKeyframesWithDuration:5 delay:0 options:UIViewKeyframeAnimationOptionAutoreverse animations:^{
        
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1 animations:^{
            CGRect  rect = redView.frame;
            rect.origin.y += 500;
            redView.frame = rect;
        }];
        
        [UIView addKeyframeWithRelativeStartTime:1 relativeDuration:3 animations:^{
            CGRect  rect = redView.frame;
            rect.origin.y -= 700;
            redView.frame = rect;
        }];
        [UIView addKeyframeWithRelativeStartTime:3 relativeDuration:5 animations:^{
            CGRect  rect = redView.frame;
            rect.origin.y += 1000;
            redView.frame = rect;
        }];

        
        
    } completion:^(BOOL finished) {
        
    }];

别人转载：http://www.cocoachina.com/ios/20160727/17199.html

一.大小动画（改变frame）

1.展示效果

fram大小变化

2.Show Code

1 2 3 4 5 6 7 8 9 10 11

-(void)changeFrame{     CGRect originalRect = self.anView.frame;     CGRect rect = CGRectMake(self.anView.frame.origin.x-20, self.anView.frame.origin.y-120, 160, 80);     [UIView animateWithDuration:1 animations:^{         self.anView.frame = rect;     } completion:^(BOOL finished) {         [UIView animateWithDuration:1 animations:^{             self.anView.frame = originalRect;         }];     }]; }

二.拉伸动画（改变bounds）

1.展示效果

bounds变化

2.Show Code

1 2 3 4 5 6 7 8 9 10 11 12

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

三.转移动画（改变center）

1.展示效果

center变化.gif

2.Show Code

1 2 3 4 5 6 7 8 9 10 11

-(void)changeCenter{     CGPoint originalPoint = self.anView.center;     CGPoint point = CGPointMake(self.anView.center.x, self.anView.center.y-170);     [UIView animateWithDuration:0.3 animations:^{         self.anView.center = point;     } completion:^(BOOL finished) {         [UIView animateWithDuration:1 animations:^{             self.anView.center = originalPoint;         }];     }]; }

谢谢二爷的示范，经典的表情也勾起很多人的回忆。好，我们回到现实，以上的3个例子，大家不难发现共同的特点和重复性。

1.都是改变UIView的属性就可以产生动画

2.都是带有block做结束回调，对结束监控

3.动画大小和位置变化可以通过多种方式实现

“佛爷，是不是很好奇我们并没有使用Tom先生很多图片组逐一显示？来，也请您下矿一走！”。“哈哈，好！不过那碗河水我还是要倒的”，“行，随你翻腾~”。

四.旋转动画(改变transform)

1.展示效果

transform变化.gif

2.Show Code

1 2 3 4 5 6 7 8 9 10 11 12

-(void)transform{     CGAffineTransform originalTransform = self.anView.transform;     [UIView animateWithDuration:2 animations:^{         //self.anView.transform = CGAffineTransformMakeScale(0.6, 0.6);//缩放         //self.anView.transform = CGAffineTransformMakeTranslation(60, -60);         self.anView.transform = CGAffineTransformMakeRotation(4.0f);     } completion:^(BOOL finished) {         [UIView animateWithDuration:2 animations:^{             self.anView.transform = originalTransform;         }];     }]; }

五.透明度动画(改变alpha)

1.展示效果

alpha变化.gif

2.Show Code

1 2 3 4 5 6 7 8 9

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

卓先生，停停停，来，回到我们舞台中间来。就以上5中都能让您玩的这么愉快，以上都是仅仅修改本身的属性值，我再介绍剩下三种基于UIView特别的动画，一个是Keyframe，一个Spring和Transition动画。一人一个轮着来，卓先生你先。

六.背景颜色Keyframes动画（改变background）

1.展示效果

background变化.gif

2.Show Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

-(void)changeBackground{     [UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{         [UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{             self.anView.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0];         }];         [UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{             self.anView.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0];         }];         [UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{             self.anView.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0];         }];         [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{             self.anView.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0];         }];         [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{             self.anView.backgroundColor = [UIColor whiteColor];         }];     } completion:^(BOOL finished) {         NSLog(@"动画结束");     }]; }

七.Spring动画（iOS 7.0起）

1.展示效果

spring动画.gif

2.Show Code

1 2 3 4 5 6 7 8 9 10 11 12

-(void)springAnimation{     CGRect originalRect = self.anView.frame;     CGRect rect = CGRectMake(self.anView.frame.origin.x-80, self.anView.frame.origin.y, 120, 120);     [UIView animateWithDuration:0.4 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{         self.anView.frame = rect;         } completion:^(BOOL finished) {             [UIView animateWithDuration:1 delay:1 usingSpringWithDamping:0.5 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{                    self.anView.frame = originalRect;             } completion:^(BOOL finished) {         }];     }]; }

八.transition动画

1.展示效果

transition动画.gif

2.Show Code

1 2 3 4 5 6 7 8 9 10

-(void)transitionAnimation{     [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{         //self.anView.backgroundColor = [UIColor blueColor];     } completion:^(BOOL finished) {         [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{         //self.anView.backgroundColor = [UIColor greenColor];         } completion:^(BOOL finished) {         }];     }]; }

九.关于参数option选择说明

1.UIViewAnimationOptions

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

UIViewAnimationOptionLayoutSubviews            //进行动画时布局子控件 UIViewAnimationOptionAllowUserInteraction      //进行动画时允许用户交互 UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画 UIViewAnimationOptionRepeat                    //无限重复执行动画 UIViewAnimationOptionAutoreverse               //执行动画回路 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置 UIViewAnimationOptionOverrideInheritedCurve    //忽略嵌套动画的曲线设置 UIViewAnimationOptionAllowAnimatedContent      //转场：进行动画时重绘视图 UIViewAnimationOptionShowHideTransitionViews   //转场：移除（添加和移除图层的）动画效果 UIViewAnimationOptionOverrideInheritedOptions  //不继承父动画设置 UIViewAnimationOptionCurveEaseInOut            //时间曲线，慢进慢出（默认值） UIViewAnimationOptionCurveEaseIn               //时间曲线，慢进 UIViewAnimationOptionCurveEaseOut              //时间曲线，慢出 UIViewAnimationOptionCurveLinear               //时间曲线，匀速 UIViewAnimationOptionTransitionNone            //转场，不使用动画 UIViewAnimationOptionTransitionFlipFromLeft    //转场，从左向右旋转翻页 UIViewAnimationOptionTransitionFlipFromRight   //转场，从右向左旋转翻页 UIViewAnimationOptionTransitionCurlUp          //转场，下往上卷曲翻页 UIViewAnimationOptionTransitionCurlDown        //转场，从上往下卷曲翻页 UIViewAnimationOptionTransitionCrossDissolve   //转场，交叉消失和出现 UIViewAnimationOptionTransitionFlipFromTop     //转场，从上向下旋转翻页 UIViewAnimationOptionTransitionFlipFromBottom  //转场，从下向上旋转翻页

2.UIViewKeyframeAnimationOptions

1 2 3 4 5 6 7 8 9 10 11 12

UIViewAnimationOptionLayoutSubviews           //进行动画时布局子控件 UIViewAnimationOptionAllowUserInteraction     //进行动画时允许用户交互 UIViewAnimationOptionBeginFromCurrentState    //从当前状态开始动画 UIViewAnimationOptionRepeat                   //无限重复执行动画 UIViewAnimationOptionAutoreverse              //执行动画回路 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置 UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置 UIViewKeyframeAnimationOptionCalculationModeLinear     //运算模式 :连续 UIViewKeyframeAnimationOptionCalculationModeDiscrete   //运算模式 :离散 UIViewKeyframeAnimationOptionCalculationModePaced      //运算模式 :均匀执行 UIViewKeyframeAnimationOptionCalculationModeCubic      //运算模式 :平滑 UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀

就UIView的动画而言，UIViewKeyframeAnimationOptions紧在Keyframes，其余的都是UIViewAnimationOptions。

十.总结和扩展

1.UIView动画主要是变化UIView的自带属性

2.UIView动画可以有很多种方式实现同一效果

3.Spring动画iOS 7.0以上才有

4.UIViewKeyframeAnimationOptions用着Keyframes动画，其余都用UIViewAnimationOptions枚举