首页 > 代码库 > 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,0,150);[UIView commitAnimations];
IO开发之图形动画