[iOS]iOS的UI animation 简单整理

iOS 做动画，主要是2种方式，初学者或者常见动画UIKit就可以搞定，如果是较为复杂的动画，则需要coreAnimation.

1.UIKit

代码来自CSDN的博客
感谢这位有心的博主

1.1 通过动画上下文使用UIKit动画

 [self.view addSubview:redView];  
    //开始动画  
    [UIView beginAnimations:@"test" context:nil];  
    //动画时长  
    [UIView setAnimationDuration:1];  
    /*  
     *要进行动画设置的地方  
     */  
      
    redView.backgroundColor=[UIColor blueColor];  
    redView.frame=CGRectMake(50, 50, 200, 200);  
    redView.alpha=0.5;  
      
    //动画结束  
    [UIView commitAnimations];

1.2 通过代码块使用UIKit动画

[UIView animateWithDuration:1 //时长  
                          delay:0 //延迟时间  
                        options:UIViewAnimationOptionTransitionFlipFromLeft//动画效果  
                     animations:^{  
                           
                         //动画设置区域  
                         redView.backgroundColor=[UIColor blueColor];  
                         redView.frame=CGRectMake(50, 50, 200, 200);  
                         redView.alpha=0.5;  
                           
                     } completion:^(BOOL finish){  
                       //动画结束时调用  
                       //............  
                     }];  

2. 使用Core Animation对象来实现动画

CABasicAnimation
CAKeyframeAnimation
CATransitionAnimation

其中CABasicAnimation和CAKeyframeAnimation是对图层中的不同属性进行动画的。
如果要多整个图层进行动画，则应该使用CATransitionAnimation
如果要使用组合动画，例如要改变图层的大小和透明度，则可以先为每个属性创建一个CABasicAnimation对象，再把他们组合到CAAnimationGroup中，最后把这个组合添加到要进行动画的CALayer中。
注：CAAnimation（以及CAAnimation的子类）,全部都是显式动画，这样动画播放后，表现层回恢复到模型层的原始状态，这就意味着，如果动画播放完后，会恢复到原来的样子，所以在动画播放完后要对模型层进行修改，例如：self.view.layer.backgroundColor=[UIColor blueColor].CGColor;

2.1 CABasicAnimation

-(void)animationOfCABasicAnimation  
{  
    //创建一个CABasicAnimation对象  
    CABasicAnimation *animation=[CABasicAnimation animation];  
    //设置颜色  
    animation.toValue=(id)[UIColor blueColor].CGColor;  
    //动画时间  
    animation.duration=1;  
    //是否反转变为原来的属性值  
    animation.autoreverses=YES;  
    //把animation添加到图层的layer中，便可以播放动画了。forKey指定要应用此动画的属性  
    [self.view.layer addAnimation:animation forKey:@"backgroundColor"];  
      
}  

2.2 CAKeyframeAnimation

1. path

这是一个 CGPathRef 对象，默认是空的，当我们创建好CAKeyframeAnimation的实例的时候，可以通过制定一个自己定义的path来让 某一个物体按照这个路径进行动画。这个值默认是nil 当其被设定的时候 values 这个属性就被覆盖

2. values

一个数组，提供了一组关键帧的值， 当使用path的 时候 values的值自动被忽略。

-(void)animationOfCAKeyframeAnimation  
{  
    CAKeyframeAnimation *animation=[CAKeyframeAnimation animation];  
    //设置属性值  
    animation.values=[NSArray arrayWithObjects:  
                      (id)self.view.backgroundColor,  
                      (id)[UIColor yellowColor].CGColor,  
                      (id)[UIColor greenColor].CGColor,  
                      (id)[UIColor blueColor].CGColor,nil];  
    animation.duration=3;  
    animation.autoreverses=YES;  
    //把关键帧添加到layer中  
    [self.view.layer addAnimation:animation forKey:@"backgroundColor"];  
}  

-(void)animationOfCAKeyframeAnimationPath  
{  
    //初始化一个View，用来显示动画  
    UIView *redView=[[UIView alloc]initWithFrame:CGRectMake(10, 10, 20, 20)];  
    redView.backgroundColor=[UIColor redColor];  
      
    [self.view addSubview:redView];  
      
    CAKeyframeAnimation *ani=[CAKeyframeAnimation animation];  
    //初始化路径  
    CGMutablePathRef aPath=CGPathCreateMutable();  
    //动画起始点  
    CGPathMoveToPoint(aPath, nil, 20, 20);  
    CGPathAddCurveToPoint(aPath, nil,   
                          160, 30,//控制点  
                          220, 220,//控制点   
                          240, 380);//控制点  
      
    ani.path=aPath;  
    ani.duration=10;  
    //设置为渐出  
    ani.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];  
    //自动旋转方向  
    ani.rotationMode=@"auto";  
      
    [redView.layer addAnimation:ani forKey:@"position"];  
}  

2.3 CATransition

代码来自ios 动画效果CATransition笔记

setType:有四种类型：
    kCATransitionFade                   //交叉淡化过渡
    kCATransitionMoveIn               //移动覆盖原图
    kCATransitionPush                    //新视图将旧视图推出去
    kCATransitionReveal                //底部显出来

-(void) changeUIView2{  
   CATransition *transition = [CATransition animation];  
    transition.delegate = self;  
    transition.duration = 2.0f;  
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];  
    transition.type = kCATransitionPush;  
    transition.type = @"pageCurl"  ;//另一种设置动画效果方法  
    transition.subtype = kCATransitionFromBottom;  
    [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];  
    [self.view.layer addAnimation:transition forKey:@"animation"];  
}  

3. 数学层面学习

Core Animation编程指南
这个是一篇国外文章的翻译版本，想深入学习的可以查看原文

4196_131230103956_1.png
4196_131230104111_1.png
4196_131230104316_1.png

4. 实践出真知

...
别瞅了，赶紧行动起来吧
先做个flipboard练练手...