码迷,mamicode.com
首页 > 其他好文 > 详细

IO开发之图形动画

时间:2014-09-12 18:52:13      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   for   div   sp   cti   

在IOS开发中图形界面的动画一般发生在以下两种情况:

  1.两个uiview视图的切换,有动画效果。

  2.本身视图的位置,大小,或 角度旋转 的动画效果。

一.利用uiview实现切换视图的动画,但是在切换视图的效果中只有四种样式,

  UIViewAnimationTransitionFlipFromLeft,   向左翻转

  UIViewAnimationTransitionFlipFromRight, 向右翻转

      UIViewAnimationTransitionCurlUp,           向上翻页

      UIViewAnimationTransitionCurlDown,       向下翻页

  实现代码demo1:

//开始动画 
[UIView beginAnimations:nil context:NULL];

//设置动画执行时间 
[UIView setAnimationDuration:1.0];

//设置动画的效果和指定的View。这里设置的View必须是变化子视图的父视图。(在父视图的变化过程中改变子视图的内容)
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.viewContainer cache:YES];

//这里写在视图容器里视图变化的过程,整个过程在容器视图的图层变化过程中发生改变
 [self.viewContainer bringSubviewToFront:_second.view];

//提交动画才会有显示动画效果
 [UIView commitAnimations];

  实现代码demo2:

//仅仅用uiview的类方法切换视图
[UIView transitionFromView:view1 toView:view2 duration:1.0 options:UIViewAnimationOptionTransitionCurlUp completion:^(BOOL finished) {
                NSLog(@"animation completion");
                rectoVisible = !rectoVisible;
            }];

 options的值: 

  UIViewAnimationOptionTransitionFlipFromLeft, 左翻页

    UIViewAnimationOptionTransitionFlipFromRight, 右翻页

    UIViewAnimationOptionTransitionCurlUp,上卷曲翻页

    UIViewAnimationOptionTransitionCurlDown,下卷曲翻页

    UIViewAnimationOptionTransitionCrossDissolve , 渐变

    UIViewAnimationOptionTransitionFlipFromTop,上翻页

    UIViewAnimationOptionTransitionFlipFromBottom ,下翻页

 二.利用CAAnimation类完成视图切换的动画,此类可实现的动画效果很多

CAAnimation的type属性系统指定的效果:

  kCATransitionFade, 淡化效果,此效果为默认效果

  kCATransitionMoveIn , 覆盖效果

  kCATransitionPush, 挤出效果

  kCATransitionReveal ,移出效果

字符串效果:

  @"cube" 立方体转换

  @"suckEffect" 吸收效果

  @"oglFlip"翻页效果

  @"rippleEffect"水滴效果  

  @"pageCurl" 向上卷曲翻页

  @"pageUnCurl" 向下卷曲翻页

  @"cameraIrisHollowOpen" 镜头展开效果

  @"cameraIrisHollowClose" 镜头关闭效果

CAAnimation的SubType属性:

  kCATransitionFromLeft,  

  kCATransitionFromBottom,

  kCATransitionFromRight,

  kCATransitionFromTop

具体实现demo:(viewContainer为自定义的视图容器)

//创建对象    
CATransition *animation=[CATransition animation];

//设置动画执行时间   
animation.duration = 1.0;

//动画类型   
animation.type=kCATransitionReveal;

//动画方向
animation.subtype=kCATransitionFromTop;

//设置动画执行速率变化    
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

//切换子视图
 [self.viewContainer bringSubviewToFront:_second.view];

//在容器视图的图层上添加animation
[self.viewContainer.layer addAnimation:animation forKey:@"animation"];

 

三.视图缩小,移动,旋转动画

具体实现demo:

//设置缩小的transform,缩小为原大小的宽0.5倍,高0.8倍
CGAffineTransform scale =CGAffineTransformMakeScale(0.5, 0.8); 

//设置旋转的transform并带入缩小的scale,旋转大小为60度,并转换为弧度制
CGAffineTransform rotate =CGAffineTransformRotate(scale, M_PI * 60/180);

//将transform的变化放到动画中
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];

//设置位移,在x方向移动0,y方向移动150,并结合前两个transform
 view.transform=CGAffineTransformTranslate(rotate,0150);

[UIView commitAnimations];

 

IO开发之图形动画

标签:style   blog   color   io   os   for   div   sp   cti   

原文地址:http://www.cnblogs.com/csdnmc/p/3968838.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!