备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

开发常用动画收集

2017-05-30 935
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

一、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

 



本文转自夏雪冬日博客园博客，原文链接：http://www.cnblogs.com/heyonggang/p/3508759.html，如需转载请自行联系原作者

文章标签：
C++
iOS开发
API
长征4号
目录
相关文章
w风雨无阻w
|
6月前
|
存储
CocosCreator3.8研究笔记（二十二）CocosCreator 动画系统-动画剪辑和动画组件介绍
CocosCreator3.8研究笔记（二十二）CocosCreator 动画系统-动画剪辑和动画组件介绍
w风雨无阻w
121 0
前端充电宝
|
Web App开发 前端开发 JavaScript
27 个前端动画库让你的交互更加炫酷
很多时候我们在开发前端页面时都会做一些动画效果来提升用户体验度和页面美观度，所以今天就来给大家推荐几个好用的JavaScript动画库，希望对各位小伙伴有所帮助！
前端充电宝
2350 0
一乐乐
|
5月前
|
前端开发 C# 开发工具
Unity快手上手【熟悉unity编辑器，C#脚本控制组件一些属性之类的】
Unity快手上手【熟悉unity编辑器，C#脚本控制组件一些属性之类的】
一乐乐
104 0
w风雨无阻w
|
6月前
|
数据安全/隐私保护
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果（1）
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
w风雨无阻w
56 0
w风雨无阻w
|
6月前
|
数据安全/隐私保护 iOS开发 MacOS
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果（2）
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
w风雨无阻w
60 0
卡尔特斯
|
8月前
|
前端开发 JavaScript
前端动画(动态)图标库收集
前端动画(动态)图标库收集
卡尔特斯
99 0
Crossin的编程教室
|
9月前
|
数据采集 监控 数据可视化
做出酷炫的动态统计图表，不一定要写代码
首先这个名字很长的，就是上面 GDP 图表的作者 Jannchie见齐 基于 D3.js 开发的 将历史数据排名转化为动态柱状图图表 的项目，并在 github 上开源了。
Crossin的编程教室
100 0
祁符建
|
前端开发 JavaScript UED
封装库/工具库中重要概念之动画
前端开发中，动画是一个非常重要的技术特性。它可以提升用户体验，增加页面交互性，并且让网站看起来更加生动活泼。然而，在实现复杂动画时，手写代码往往会变得繁琐且容易出错。因此，前端工具库和封装库的出现为我们提供了便利。在本文中，我们将探讨前端中的封装库和工具库以及它们在实现动画效果方面的作用。
祁符建
74 0
羽翼轻尘
An动画基础之按钮动画与基础代码相结合
An动画基础之按钮动画与基础代码相结合
羽翼轻尘
560 0
An动画基础之按钮动画与基础代码相结合
CodingFire
|
iOS开发
iOS开发 - 柱状图动态展现动画
iOS开发 - 柱状图动态展现动画
CodingFire
127 0
iOS开发 - 柱状图动态展现动画

热门文章

最新文章

  • 1
    疑犯追踪第一季/全集Person Of Interest迅雷下载
  • 2
    【直播系列之一】1篇文章看懂峰值带宽、流量、转码、连麦、截图五大直播计费方式
  • 3
    理解事务的4种隔离级别
  • 4
    阿里云网站域名备案流程全过程讲解(图文)
  • 5
    在服务器的raid1中安装windows server系统（踩坑记录）
  • 6
    如何用Vue实现简易的富文本编辑器，并支持Markdown语法
  • 7
    怎么才能快速提高小程序留存率！
  • 8
    程序员请放下浮躁的心
  • 9
    如何解决域中普通用户只限于10台客户机加入域的数量问题
  • 10
    博客园模板 样式优化
  • 1
    未来技术纵横谈：区块链、物联网与虚拟现实的融合与创新
    34
  • 2
    软件体系结构 - 缓存技术（9）缓存穿透
    30
  • 3
    提升Android应用性能的实用技巧
    32
  • 4
    工具变量法(两阶段最小二乘法2SLS)线性模型分析人均食品消费时间序列数据和回归诊断（下）
    32
  • 5
    软件体系结构 - 缓存技术（8）缓存雪崩
    36
  • 6
    软件体系结构 - 缓存技术（7）Redis持久化方法
    36
  • 7
    Python用KShape对时间序列进行聚类和肘方法确定最优聚类数k可视化
    25
  • 8
    软件体系结构 - 缓存技术（6）淘汰策略
    31
  • 9
    基于R语言股票市场收益的统计可视化分析
    34
  • 10
    软件体系结构 - 数据分片（2）一致性哈希分片
    35

    • 相关电子书

    更多
  • H5动画在移动平台上的性能优化实践
  • 基于浏览器的实时构建探索之路--玄寂
  • 3D动画的菜谱式灯光与云渲染
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）