页面动态切换

简介: 例子:动态的切换Animating the Transitions 1.用到上一节的例子MySecondViewController,在MySecondViewControlle.m文件中加入下面红色代码:   -(IBAction) buttonClicked: (id) sender...

 

例子:动态的切换Animating the Transitions

1.用到上一节的例子MySecondViewController,在MySecondViewControlle.m文件中加入下面红色代码:

 

-(IBAction) buttonClicked: (id) sender{
//---add the view of the view controller to the current View---
viewController = [[HelloWorldViewController alloc]
initWithNibName:@“HelloWorldViewController”
bundle:nil];
[UIView beginAnimations:@“flipping view” context:nil];

 

-(IBAction) buttonClicked: (id) sender{

//---add the view of the view controller to the current View---

viewController = [[HelloWorldViewController alloc]

initWithNibName:@“HelloWorldViewController”

bundle:nil];

[UIView beginAnimations:@“flipping view” context:nil];

 

[UIView setAnimationDuration:1];

[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft

forView:self.view cache:YES];

[self.view addSubview:viewController.view];

[UIView commitAnimations];

}

2.在HelloWorldViewController.m文件中,加入下面的红色代码:

 

-(IBAction) btnClicked:(id) sender{

[UIView beginAnimations:@“flipping view” context:nil];

[UIView setAnimationDuration:1];

[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];

[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight

forView:self.view.superview cache:YES];

[self.view removeFromSuperview];

[UIView commitAnimations];

}

3.保存,C+R,运行点击Ok按钮,看看我们界面的切换的变化.如图:

4-25.png      4-26.png

嘿嘿,怎么样?是要比上一节生硬的切换好玩吧!

这个是怎么样实现的呢?原理解释:

这是由UIView类里面的beginAnimation:方法来现实的,就是这句

[UIView beginAnimations:@“flipping view” context:nil];

并且用setAnimationDuration:方法来制定动态的时间:(这里我们定义的是1秒钟,都是以秒为单位)

[UIView setAnimationDuration:1];

再用到setAnimationCurve:方法来设置动画的旋转曲度变化

[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

我们可以根据后面的常量定义来修改动画的样式:

 

UIViewAnimationCurveEaseInOut — 慢慢的开始,快速的过程,最后完成时刻又慢慢的结束

UIViewAnimationCurveEaseIn — 慢慢的开始,直接加速到结束

 

UIViewAnimationCurveEaseOut — 快速的开始,然后慢慢的结束

UIViewAnimationCurveLinear — 匀速变化

大家可以自己修改后,多试试看,so easy!

通过setAnimationTransition:方法可以定义在动画的类型

 

 

 

[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft

forView:self.view cache:YES];

看上面这句,主要是定义你动画的样式的,比如右进左出啊,这些

cache:参数定义是否将当前页面定义为一副图画进行动画操作,下面的这些常数可以定义我们动画的样式:

 

UIViewAnimationTransitionNone — 没有过渡

UIViewAnimationTransitionFlipFromLeft —翻转一个视图从左向右

UIViewAnimationTransitionFlipFromRight — 翻转一个视图从右到左

UIViewAnimationTransitionCurlUp — 从上卷动

UIViewAnimationTransitionCurlDown — 从下卷动

在这个动画的结尾,需要用到commitAnimations:方法

[UIView commitAnimations];

HelloWorldViewController中动画的显示与在MySecondViewControlle中的类似,除了在父子页面的定义,就是说是哪个是父窗口,哪个是子窗口self.view.superview:

 

[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight

forView:self.view.superview cache:YES];

 

来源:http://www.mecil9.com/archives/123.aspx


 

在iPhone中动画过度非常简单.

 

首先获取当前的图形上下文:

Java代码    收藏代码
  1. CGContextRef context = UIGraphicsGetCurrentContext();  

 

接着设置一些动画属性用于开始动画:

 

Java代码    收藏代码
  1. [UIView beginAnimations:nil context:context];  
  2. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  3. [UIView setAnimationDuration:1.0];  

 

然后设置想要过度的对象的最终状态.

 

Java代码    收藏代码
  1. [big setFrame:SMALLRECT];  
  2. [big setAlpha:0.5];  
  3. [little setFrame:BIGRECT];  
  4. [little setAlpha:1.0];  

 

最后提交动画,这样一个动画就会自动生成了

 

Java代码    收藏代码
  1. [UIView commitAnimations];  

 

其中,setAnimationCurve是设置动画的方式,他有下面集中方式:

 

  • UIViewAnimationCurveEaseInOut  //开始和结束时动画效果比较慢
  • UIViewAnimationCurveEaseIn       //开始动画效果比较慢
  • UIViewAnimationCurveEaseOut     //结束动画效果比较慢
  • UIViewAnimationCurveLinear         //平滑的动画效果
而,setAnimationDuration则是设置动画的持续时间.
 
下面是两个UIView之间的动画过度
Iphone代码    收藏代码
  1.        // Start Animation Block  
  2. //CGContextRef context = UIGraphicsGetCurrentContext();  
  3. CGContextRef context = nil;  
  4. [UIView beginAnimations:nil context:context];  
  5. [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft forView:[self superview] cache:YES];  
  6. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  7. [UIView setAnimationDuration:1.0];  
  8.   
  9. // Animations  
  10. [[self superview] exchangeSubviewAtIndex:0 withSubviewAtIndex:1];  
  11.   
  12. // Commit Animation Block  
  13. [UIView commitAnimations];  
 
页面之间的过度主要依靠 UIView setAnimationTransition: forView: cache: 这个方法以及 exchangeSubviewAtIndex: withSubviewAtIndex:
前者通过UIView静态方法设置过度的动画种类,后者实现真正的过度函数掉用.种类有如下五种:

 

Iphone代码    收藏代码
  1. typedef enum {  
  2.     UIViewAnimationTransitionNone,  
  3.     UIViewAnimationTransitionFlipFromLeft,  
  4.     UIViewAnimationTransitionFlipFromRight,  
  5.     UIViewAnimationTransitionCurlUp,  
  6.     UIViewAnimationTransitionCurlDown,  
  7. } UIViewAnimationTransition;  
 

 

除了这种简单的动画方式外,其实还有一种利用QuartzCore来做过度动画.不同的地方在于,这个过度动画作用于层,换句话说,他动画直接做用于整个UIView,而不像UIView的动画,可以作用于UIView局部或本身.当UIView作用与本身时,实际上也就相当于是对层的动画了.

 

Iphone代码    收藏代码
  1. CATransition *animation = [CATransition animation];  
  2. [animation setDelegate:self];  
  3. [animation setDuration:1.0f];  
  4. [animation setTimingFunction:UIViewAnimationCurveEaseInOut];  
  5. [animation setType: kCATransitionMoveIn];  
  6. [animation setSubtype: kCATransitionFromBottom];  
  7.   
  8.   
  9. [[self superview] exchangeSubviewAtIndex:0 withSubviewAtIndex:1];  
  10. [[[self superview] layer] addAnimation:animation forKey:@"transitionViewAnimation"];      

 

setDuration:和UIView中的动画效果一样,持续时间.

setTimingFunction:是动画的种类,和UIView一样,比如匀速动画,快速开始结束等.

setType:是指定动画的类型,他有:

 

  1. kCATransitionFade (淡入淡出来补给动画)
  2. kCATransitionMoveIn(从一个方向覆盖的方式来补给动画)
  3. kCATransitionPush(推送的方式来补给动画)
  4. kCATransitionReveal(一个试图展现出另外另外一个试图的方式)
当除了第一种方式外(淡入淡出),可以通过setSubType:来制定动画的方向(因为这些动画都是直接着用于层的,所以相当于只有试图间的切换过渡).动画方向有4个:
  1. kCATransitionFromRight
  2. kCATransitionFromLeft
  3. kCATransitionFromTop
  4. kCATransitionFromBottom
 
除此之外,还存在一些未公开的动画方式,这些方式有些不能在模拟器中看到效果,但是真机可行.
Iphone代码    收藏代码
  1. // Curl the image up or down. This runs only on the iPhone and will not  
  2.     // produce any effect from the simulator  
  3.     CATransition *animation = [CATransition animation];  
  4.     [animation setDelegate:self];  
  5.     [animation setDuration:1.0f];  
  6.     [animation setTimingFunction:UIViewAnimationCurveEaseInOut];  
  7.     [animation setType:(notCurled ? @"pageCurl" : @"pageUncurl")];  
  8.       
  9.     /*  
  10.         mapCurl, mapUncurl  
  11.         pageCurl, pageUncurl  
  12.         suckEffect, spewEffect,  
  13.         cameraIris, cameraIrisHollowOpen, cameraIrisHollowClose  
  14.         genieEffect, unGenieEffect,  
  15.         rippleEffect,  
  16.         twist,  
  17.         tubey,  
  18.         swirl,  
  19.         charminUltra  
  20.         zoomIn, zoomOut  
  21.         oglFlip  
  22.      */  
  23.       
  24.     //让他不给删除掉  
  25.     [animation setRemovedOnCompletion:NO];  
  26.     [animation setFillMode: @"extended"];  
  27.     [animation setRemovedOnCompletion: NO];  
  28.       
  29.     notCurled = !notCurled;  
  30.       
  31.     [[[self.view viewWithTag:TOP_LAYER_VIEW] layer] addAnimation:animation forKey:@"pageFlipAnimation"];  
 

 来源:http://mislay.iteye.com/blog/724824


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

目录
相关文章
|
Java iOS开发
自定义状态切换按钮
最近在做一个项目,一个界面的按钮UI给画成了这样(默认状态是蓝色的然后触摸后变成灰色的) UI效果 然后本着给低版本系统APP适配的职业素养(其实是不想画这种按钮),想让UI兄弟给将图标改成整个按钮效果的图片,可是。
983 0
|
数据安全/隐私保护
uniapp动态切换显示不同内容组件
通过点击注册或是登录按钮切换不同的组件.默认显示登陆界面,登录字样加粗显示,登录页面显示手机号密码登录.
uniapp动态切换显示不同内容组件
|
存储 缓存 前端开发
前端的单页面模式和多页面模式
前端的单页面模式和多页面模式
483 0
前端的单页面模式和多页面模式
|
数据可视化
UEditor 之查询当前编辑区域的状态是源码模式还是可视化模式
在使用百度的编辑器的时候,遇到了这样的一个问题:     解决方法是 使用了两个命令:
767 0
|
JavaScript
fastadmin 自定义 按钮 动态切换数据 TAB切换
fastadmin 自定义 按钮 动态切换数据 TAB切换
331 0
|
.NET C# 开发框架
C#页面之间跳转功能的小结
在两个ASP.NET页面之间传递值 引言   ASP.NET提供了卓越的事件驱动编程模型,让开发者简化了应用程序的总体设计,但是这个也造成了它固有的一些问题,例如,使用传统的ASP里,我们可以通过使用POST方法很容易地实现页面间传递值,同样的事情,在使用事件驱动编程模型的ASP.NET就不是那么容易了,当然了,我们仍然有一些方法可以实现同样的功能。
1444 0
|
JSON 小程序 JavaScript
小程序卡片切换效果组件wxCardSwiper
小程序卡片切换效果组件wxCardSwiper
581 0
|
XML Android开发 数据格式
【PageLayout】非常简单的一键切换加载-空数据-错误页,支持自定义
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/82594706 项目中我们经常会用到的加载数据,加载完数据后显示内容,如果没有数据显示一个空白页,这是如果网络错误了显示一个网络错误页,自定义一个PageLayout。
1185 0

热门文章

最新文章

相关实验场景

更多