iOS动画效果和实现

动画效果提供了状态或页面转换时流畅的用户体验,在iOS系统中,咱们不需要自己编写绘制动画的代码,Core Animation提供了丰富的api来实现你需要的动画效果。

UIKit只用UIView来展示动画,动画支持UIView下面的这些属性改变:

1、commitAnimations方式使用UIView动画

[cpp] view plain copy

  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
  5. [button setTitle:@"改变" forState:UIControlStateNormal];
  6. button.frame = CGRectMake(10, 10, 60, 40);
  7. [button addTarget:self action:@selector(changeUIView) forControlEvents:UIControlEventTouchUpInside];
  8. [self.view addSubview:button];
  9. }
  10. - (void)changeUIView{
  11. [UIView beginAnimations:@"animation" context:nil];
  12. [UIView setAnimationDuration:1.0f];
  13. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
  14. [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];
  15. [UIView commitAnimations];
  16. }

下面是点击改变后的效果(两种):

动画的常量有一下四种

[cpp] view plain copy

  1. UIViewAnimationTransitionNone,
  2. UIViewAnimationTransitionFlipFromLeft,
  3. UIViewAnimationTransitionFlipFromRight,
  4. UIViewAnimationTransitionCurlUp,
  5. UIViewAnimationTransitionCurlDown,

1.2 交换本视图控制器中2个view位置

[self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];

先添加两个view ,一个redview  一个yellowview

[cpp] view plain copy

  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. UIView *redView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
  5. redView.backgroundColor = [UIColor redColor];
  6. [self.view addSubview:redView];
  7. UIView *yellowView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
  8. yellowView.backgroundColor = [UIColor yellowColor];
  9. [self.view addSubview:yellowView];
  10. UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
  11. [button setTitle:@"改变" forState:UIControlStateNormal];
  12. button.frame = CGRectMake(10, 10, 300, 40);
  13. [button addTarget:self action:@selector(changeUIView) forControlEvents:UIControlEventTouchUpInside];
  14. [self.view addSubview:button];
  15. UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
  16. [button1 setTitle:@"改变1" forState:UIControlStateNormal];
  17. button1.frame = CGRectMake(10, 60, 300, 40);
  18. [button1 addTarget:self action:@selector(changeUIView1) forControlEvents:UIControlEventTouchUpInside];
  19. [self.view addSubview:button1];
  20. }

[cpp] view plain copy

  1. - (void)changeUIView1{
  2. [UIView beginAnimations:@"animation" context:nil];
  3. [UIView setAnimationDuration:1.0f];
  4. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
  5. [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];
  6. //  交换本视图控制器中2个view位置
  7. [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
  8. [UIView commitAnimations];
  9. }

这样看起来就像两页一样了。

1.3 、   [UIView setAnimationDidStopSelector:@selector(animationFinish:)];

在commitAnimations消息之前,可以设置动画完成后的回调,设置方法是:

[UIView setAnimationDidStopSelector:@selector(animationFinish:)];

2、使用:CATransition

[cpp] view plain copy

  1. - (void)changeUIView2{
  2. CATransition *transition = [CATransition animation];
  3. transition.duration = 2.0f;
  4. transition.type = kCATransitionPush;
  5. transition.subtype = kCATransitionFromTop;
  6. [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
  7. [self.view.layer addAnimation:transition forKey:@"animation"];
  8. }

transition.type 的类型可以有

淡化、推挤、揭开、覆盖

NSString * const kCATransitionFade;

NSString * const kCATransitionMoveIn;

NSString * const kCATransitionPush;

NSString * const kCATransitionReveal;

这四种,

transition.subtype

也有四种

NSString * const kCATransitionFromRight;

NSString * const kCATransitionFromLeft;

NSString * const kCATransitionFromTop;

NSString * const kCATransitionFromBottom;

2.2 私有的类型的动画类型:

立方体、吸收、翻转、波纹、翻页、反翻页、镜头开、镜头关

[cpp] view plain copy

  1. animation.type = @"cube"
  2. animation.type = @"suckEffect";
  3. animation.type = @"oglFlip";//不管subType is "fromLeft" or "fromRight",official只有一种效果
  4. animation.type = @"rippleEffect";
  5. animation.type = @"pageCurl";
  6. animation.type = @"pageUnCurl"
  7. animation.type = @"cameraIrisHollowOpen ";
  8. animation.type = @"cameraIrisHollowClose ";

下图是第一个cube立方体的效果:

2.3 CATransition的 startProgress  endProgress属性

这两个属性是float类型的。
可以控制动画进行的过程,可以让动画停留在某个动画点上,值在0.0到1.0之间。endProgress要大于等于startProgress。

比如上面的立方体转到,可以设置endProgress= 0.5,让动画停留在转动一般的位置。

上面这些私有的动画效果,在实际应用中要谨慎使用。因为在app store审核时可能会以为这些动画效果而拒绝通过。

3、UIView的 + (void)animateWithDuration

:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

方法。

这个方法是在iOS4.0之后才支持的。

比 1 里的UIView的方法简洁方便使用。

DidView里添加moveView。

[cpp] view plain copy

  1. moveView = [[UIView alloc] initWithFrame:CGRectMake(10, 180, 200, 40)];
  2. moveView.backgroundColor = [UIColor blackColor];
  3. [self.view addSubview:moveView];

[cpp] view plain copy

  1. - (void)changeUIView3{
  2. [UIView animateWithDuration:3 animations:^(void){
  3. moveView.frame = CGRectMake(10, 270, 200, 40);
  4. }completion:^(BOOL finished){
  5. UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, 40, 40)];
  6. label.backgroundColor = [UIColor blackColor];
  7. [self.view addSubview:label];
  8. }];
  9. }

然后用UIView animateWithDuration动画移动,移动动画完毕后添加一个Label。

3.2、 animateWithDuration的嵌套使用

[cpp] view plain copy

  1. - (void)changeUIView3{
  2. [UIView animateWithDuration:2
  3. delay:0
  4. options:UIViewAnimationOptionCurveEaseOut animations:^(void){
  5. moveView.alpha = 0.0;
  6. }completion:^(BOOL finished){
  7. [UIView animateWithDuration:1
  8. delay:1.0
  9. options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat
  10. animations:^(void){
  11. [UIView setAnimationRepeatCount:2.5];
  12. moveView.alpha = 1.0;
  13. }completion:^(BOOL finished){
  14. }];
  15. }];
  16. }

这个嵌套的效果是先把view变成透明,在从透明变成不透明,重复2.5次透明到不透明的效果。

文中例子的代码:AnimateDemo

时间: 2024-10-20 14:59:54

iOS动画效果和实现的相关文章

IOS动画效果的实现

对于动画的使用,其实一直以来就不是很熟悉,因为平时使用的也少,使用也只是简单的使用.其实关于动画,一直在IOS中广泛存在.有时我们在调用某个方法时,经常会有一个参数Animation,填入BOOL参数,选择是否需要动画效果. 今天我就浅谈一下几种基本动画的实现. 首先为了测试动画效果,我随便声明了一个View. self.animationView = [[UIView alloc] initWithFrame:CGRectMake(50 , 100 , 100, 50)]; self.anim

ios 动画效果CATransition笔记

初学ios开发,很多概念还不清楚,所以只有边学边做例子.又怕学了后面忘了前面,因此用自己的博客来纪录自己的学习历程,也是对自己学习不要懈怠做个监督. 刚学ios做动画效果.因为ios封装得很好,实现ios的漂亮动画效果也很简单,却因为我自己的粗心落了一个字母 导致纠结了一天,这个教训必须记住,同时也懂得了调试技能在编程里地位也是非常重要的存在. 实现ios动画有两种方法:一种UIView层面的,一种是使用CATransition. [objc] view plaincopy - (void)vi

ios 动画效果

转载:http://www.cnblogs.com/ludashi/p/4160208.html 一.封装动画方法 1.用CATransition实现动画的封装方法如下,每句代码是何意思,请看注释之. 1 #pragma CATransition动画实现 2 - (void) transitionWithType:(NSString *) type WithSubtype:(NSString *) subtype ForView : (UIView *) view 3 { 4 //创建CATra

iOS动画和第三方插件学习网址

1.iOS动画效果 动画效果: https://dribbble.com/search?q=animation http://capptivate.co 网页动画十二原则: http://fortawesome.github.io/Font-Awesome/ 2.iOS开发中的第三方插件 ReaciveCocoa: http://blog.csdn.net/abc649395594/article/details/46123379  http://limboy.me/ios/2013/12/27

IOS动画(Core Animation)总结 (参考多方文章)

一.简介 iOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide. Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架.Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作.你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果.Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加

iOS动画入门一

一 动画介绍 在iOS中动画实现技术主要是:Core Animation. Core Animation负责所有的滚动.旋转.缩小和放大以及所有的iOS动画效果.其中UIKit类通常都有animated:参数部分,它可以允许是否使用动画. 本文将介绍UIView动画的实现方式,有基础方法和block方法. 二 实现方法 1 基础动画 [UIView beginAnimations:nil context:nil]; //动画开始 //Code... [UIView commitAnimation

(转)iOS动画Core Animation

文章转载:http://blog.sina.com.cn/s/blog_7b9d64af0101b8nh.html 在iOS中动画实现技术主要是:Core Animation. Core Animation负责所有的滚动.旋转.缩小和放大以及所有的iOS动画效果.其中UIKit类通常都有animated:参数部分,它可以允许是否使用动画. Core Animation主要是使用 我们知道每个UIView都关联到一个CALayer对象,CALayer是Core Animation中的图层. Cor

iOS点击查看大图的动画效果

对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了

iOS开发 QQ粘性动画效果

QQ(iOS)客户端的粘性动画效果 时间 2016-02-17 16:50:00  博客园精华区 原文  http://www.cnblogs.com/ziyi--caolu/p/5195615.html 主题 iOS开发 qq的app中要是有新的联系人发消息过来,相应联系人的cell右边会有一个红色的圆圈表示消息条数.如果去触碰那个圆圈,可以发现它竟然会跟着手指的移动而移动. 在一定范围内,手指离开屏幕,会发现红色圆圈会自动弹性的回到原来的位置.而如果超出一定距离,这个圆圈会做一个销毁的动画,