开发常用动画收集

  1. 云栖社区>
  2. 博客>
  3. 正文

开发常用动画收集

yuanrengu 2014-01-07 14:20:00 浏览580
展开阅读全文

 

一、UIView 动画

       使用iPhone作为开发平台,你可以体验到UIView带来的既另类又有趣的动画功能。UIView动画能够完美地建立起一座连接视图当前状态和未来状态地视觉桥梁。可以产生动画效果的变化包括:

      1、位置变化:在屏幕上移动视图;

      2、大小变化:改变视图框架和边界;

      3、拉伸变化:改变视图内容的延伸区域;

      4、改变透明程度:改变视图的alpha值;

      5、改变状态:隐藏或显示状态;

      6、改变视图顺序:哪个视图显示在前,哪个在后;

      7、旋转:换句话说,就是任何应用到视图上的仿射变换。

       UIView动画是成块运行的,也就是说作为完整的事务一次性运行。发出beginAnimations: context:请求开启一个动画块。commitAnimations结束一个动画块。注意: 把这两个类方法发送给UIView而不是发送给单独的视图。同时在这两个调用之间的块中,添加动画的展现方式并更新视图。你可以使用以下步骤创建UIView动画。

      (1)调用beginAnimations : context方法开启一个动画块;

      (2)调用setAnimationCurve方法定义动画加速和减速方式;

      (3)调用setAnimationDuration方法设定动画时长;

      (4)自定义动画效果;

      (5)调用commitAnimations方法结束你的动画块。

你可以设置动画委托,通知它在你的动画开始或结束的时候调用相应的回调方法。例如:

 

[cpp] view plaincopy
 
  1. [UIView setAnimationDelegate:self];  
  2. [UIView setAnimationDidStopSelector:@selector(doSomething)];  
下面是一些常用的UIView过渡动画:

 

a、下翻页过渡

 

[cpp] view plaincopy
 
  1. CGContextRef context = UIGraphicsGetCurrentContext();  
  2. [UIView beginAnimations:nil context:context];  
  3. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  4. [UIView setAnimationDuration:0.7];  
  5. [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];  
  6. // do something here  
  7.   
  8. [UIView commitAnimations];  
b、上翻页过渡

 

 

[cpp] view plaincopy
 
  1. CGContextRef context = UIGraphicsGetCurrentContext();  
  2. [UIView beginAnimations:nil context:context];  
  3. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  4. [UIView setAnimationDuration:0.7];  
  5. [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];  
  6. // do something here  
  7.   
  8. [UIView commitAnimations];  
c、页面左转过渡

 

 

[cpp] view plaincopy
 
  1. CGContextRef context = UIGraphicsGetCurrentContext();  
  2.     [UIView beginAnimations:nil context:context];  
  3.     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  4.     [UIView setAnimationDuration:0.7];  
  5.     [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.view cache:YES];  
  6.     // do something here  
  7.       
  8.     [UIView commitAnimations];  
d、页面右转过渡

 

 

[cpp] view plaincopy
 
  1. CGContextRef context = UIGraphicsGetCurrentContext();  
  2. [UIView beginAnimations:nil context:context];  
  3. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  4. [UIView setAnimationDuration:0.7];  
  5. [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];  
  6. // do something here  
  7.   
  8. [UIView commitAnimations];  


 

 

二、Core Animation动画

       除了UIView动画以外,Core Animation API可为iPhone应用程序提供高度灵活的动画解决方案。Core Animation Transitions仅在实现中做了几个小小的变动便丰富了UIView动画的内涵。注意:CATransition只针对图层,不针对视图。图层是Core Animation与每个UIView产生联系的工作层面。使用Core Animation时,应该将CATransition应用到视图的默认图层([myView  layer])而不是视图本身。建立的CA动画步骤如下:

      (1)建立CA对象;

      (2)设置它的参数;

      (3)把这个带着参数的过渡添加到图层。

CA动画使用了类型和子类型两个概念。类型指定了过渡的种类,子类型设置了过渡的方向。对类型和子类型应用动画时,它们一起描述了视图应该怎么样完成过渡。

Core Animation是QuartzCore框架的一个组成部分,因此你必须将Quartz Core框架添加到项目中,并在使用这些功能时将<QuartzCore/QuartzCore.h>包含进你的代码中。

下面是一些常用的CA过渡动画:      

a、淡化(fade)

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = kCATransitionFade;  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
b、推挤(push)

 

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = kCATransitionPush;  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
c、揭开(reveal)

 

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = kCATransitionReveal;  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
d、覆盖(moveIn)

 

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = kCATransitionMoveIn;  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
e、立方体翻转(cube)

 

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"cube";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
f、吸收(suckEffect)

 

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"suckEffect";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
g、翻转(oglFlip)

 

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"oglFlip";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
h、水波纹(rippleEffect)

 

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"rippleEffect";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
i、翻页(pageCurl)

 

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"pageCurl";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
j、反翻页(pageUnCurl)

 

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"pageUnCurl";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
k、镜头开(cameraIrisHollowOpen)

 

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"cameraIrisHollowOpen";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
l、镜头关(cameraIrisHollowClose)

 

 

[cpp] view plaincopy
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"cameraIrisHollowClose";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];     

 

 

img_e00999465d1c2c1b02df587a3ec9c13d.jpg
微信公众号: 猿人谷
如果您认为阅读这篇博客让您有些收获,不妨点击一下右下角的【推荐】
如果您希望与我交流互动,欢迎关注微信公众号
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

网友评论

登录后评论
0/500
评论
yuanrengu
+ 关注