页面动态切换

 

例子:动态的切换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按钮,看看我们界面的切换的变化.如图:

      

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

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

这是由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中动画过度非常简单.

 

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

CGContextRef context = UIGraphicsGetCurrentContext();

 

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

 

[UIView beginAnimations:nil context:context];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:1.0];

 

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

 

[big setFrame:SMALLRECT];
[big setAlpha:0.5];
[little setFrame:BIGRECT];
[little setAlpha:1.0];

 

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

 

[UIView commitAnimations];

 

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

 

• UIViewAnimationCurveEaseInOut  //开始和结束时动画效果比较慢
• UIViewAnimationCurveEaseIn       //开始动画效果比较慢
• UIViewAnimationCurveEaseOut     //结束动画效果比较慢
• UIViewAnimationCurveLinear         //平滑的动画效果

而,setAnimationDuration则是设置动画的持续时间.

 

下面是两个UIView之间的动画过度

       // Start Animation Block
//CGContextRef context = UIGraphicsGetCurrentContext();
CGContextRef context = nil;
[UIView beginAnimations:nil context:context];
[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft forView:[self superview] cache:YES];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:1.0];

// Animations
[[self superview] exchangeSubviewAtIndex:0 withSubviewAtIndex:1];

// Commit Animation Block
[UIView commitAnimations];

 

页面之间的过度主要依靠UIView setAnimationTransition: forView: cache: 这个方法以及 exchangeSubviewAtIndex:withSubviewAtIndex:

前者通过UIView静态方法设置过度的动画种类,后者实现真正的过度函数掉用.种类有如下五种:

 

typedef enum {
    UIViewAnimationTransitionNone,
    UIViewAnimationTransitionFlipFromLeft,
    UIViewAnimationTransitionFlipFromRight,
    UIViewAnimationTransitionCurlUp,
    UIViewAnimationTransitionCurlDown,
} UIViewAnimationTransition;

 

 

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

 

CATransition *animation = [CATransition animation];
[animation setDelegate:self];
[animation setDuration:1.0f];
[animation setTimingFunction:UIViewAnimationCurveEaseInOut];
[animation setType: kCATransitionMoveIn];
[animation setSubtype: kCATransitionFromBottom];


[[self superview] exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
[[[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

 

除此之外,还存在一些未公开的动画方式,这些方式有些不能在模拟器中看到效果,但是真机可行.

// Curl the image up or down. This runs only on the iPhone and will not
    // produce any effect from the simulator
    CATransition *animation = [CATransition animation];
    [animation setDelegate:self];
    [animation setDuration:1.0f];
    [animation setTimingFunction:UIViewAnimationCurveEaseInOut];
    [animation setType:(notCurled ? @"pageCurl" : @"pageUncurl")];

    /*
        mapCurl, mapUncurl
        pageCurl, pageUncurl
        suckEffect, spewEffect,
        cameraIris, cameraIrisHollowOpen, cameraIrisHollowClose
        genieEffect, unGenieEffect,
        rippleEffect,
        twist,
        tubey,
        swirl,
        charminUltra
        zoomIn, zoomOut
        oglFlip
     */

    //让他不给删除掉
    [animation setRemovedOnCompletion:NO];
    [animation setFillMode: @"extended"];
    [animation setRemovedOnCompletion: NO];

    notCurled = !notCurled;

    [[[self.view viewWithTag:TOP_LAYER_VIEW] layer] addAnimation:animation forKey:@"pageFlipAnimation"];

 

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