首页 > 代码库 > IO开发之图形动画

IO开发之图形动画

在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开发之图形动画