备案控制台
开发者社区 开发与运维 文章 正文

开发常用动画收集

2014-01-07 819
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一、UIView 动画        使用iPhone作为开发平台，你可以体验到UIView带来的既另类又有趣的动画功能。UIView动画能够完美地建立起一座连接视图当前状态和未来状态地视觉桥梁。

 

一、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 plain copy
 
  1. [UIView setAnimationDelegate:self];  
  2. [UIView setAnimationDidStopSelector:@selector(doSomething)];  
下面是一些常用的UIView过渡动画：

 

a、下翻页过渡

 

[cpp]  view plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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 plain copy
 
  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"];     

 

参考： http://blog.csdn.net/zyx586/article/details/8841857

 

 

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

文章标签：
C++
yuanrengu
目录
相关文章
w风雨无阻w
|
9月前
|
存储
CocosCreator3.8研究笔记（二十二）CocosCreator 动画系统-动画剪辑和动画组件介绍
CocosCreator3.8研究笔记（二十二）CocosCreator 动画系统-动画剪辑和动画组件介绍
w风雨无阻w
170 0
陌陌谣
|
2月前
|
监控 Dart
Dart编程技术分享：构建响应式屏幕监控软件界面
本文介绍了使用Dart和Flutter构建响应式屏幕监控软件的方法。首先，创建Dart项目并建立基本的Flutter应用结构，包括`MonitorScreen` widget。接着，引入HTTP库以获取服务器状态数据，并实现实时显示在界面上。最后，展示了如何在获取数据后自动提交到指定网址。通过这个教程，读者可以学习到构建监控界面及数据交互的基本步骤，为不同领域的监控需求提供便利。
陌陌谣
95 1
w风雨无阻w
|
9月前
|
数据安全/隐私保护
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果（1）
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
w风雨无阻w
82 0
w风雨无阻w
|
9月前
|
数据安全/隐私保护 iOS开发 MacOS
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果（2）
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
w风雨无阻w
87 0
w风雨无阻w
|
9月前
CocosCreator3.8研究笔记（二十三）CocosCreator 动画系统-动画编辑器相关功能面板说明
CocosCreator3.8研究笔记（二十三）CocosCreator 动画系统-动画编辑器相关功能面板说明
w风雨无阻w
106 0
卡尔特斯
|
11月前
|
前端开发 JavaScript
前端动画(动态)图标库收集
前端动画(动态)图标库收集
卡尔特斯
112 0
Crossin的编程教室
|
12月前
|
数据采集 监控 数据可视化
做出酷炫的动态统计图表，不一定要写代码
首先这个名字很长的，就是上面 GDP 图表的作者 Jannchie见齐 基于 D3.js 开发的 将历史数据排名转化为动态柱状图图表 的项目，并在 github 上开源了。
Crossin的编程教室
113 0
祁符建
|
前端开发 JavaScript UED
封装库/工具库中重要概念之动画
前端开发中，动画是一个非常重要的技术特性。它可以提升用户体验，增加页面交互性，并且让网站看起来更加生动活泼。然而，在实现复杂动画时，手写代码往往会变得繁琐且容易出错。因此，前端工具库和封装库的出现为我们提供了便利。在本文中，我们将探讨前端中的封装库和工具库以及它们在实现动画效果方面的作用。
祁符建
81 0
羽翼轻尘
An动画基础之按钮动画与基础代码相结合
An动画基础之按钮动画与基础代码相结合
羽翼轻尘
662 0
An动画基础之按钮动画与基础代码相结合
CodingFire
|
iOS开发
iOS开发 - 柱状图动态展现动画
iOS开发 - 柱状图动态展现动画
CodingFire
138 0
iOS开发 - 柱状图动态展现动画