您的位置:首页 > 产品设计 > UI/UE

猫猫学IOS(四十一)UI之核心动画 两行代码搞定3D转场(做android的哭死)

2015-05-08 18:04 656 查看
猫猫分享,必须精品

原创文章,欢迎转载。转载请注明:翟乃玉的博客

地址:http://blog.csdn.net/u013357243?viewmode=contents

源码素材地址:/article/1326217.html

效果:



代码:

其实代码很少,苹果都给封装好了

// 1.创建核心动画
CATransition *ca = [CATransition animation];
// 1.1动画过渡类型
ca.type = @"cube";
// 1.2动画过渡方向
ca.subtype =  kCATransitionFromRight;
// 1.3动画起点(在整体动画的百分比)
//ca.startProgress = 0.5;
//1.3动画终点(在整体动画的百分比)
//ca.endProgress = 0.5;

// 动画时间
ca.duration = 1;

// 2.添加核心动画
[self.iconView.layer addAnimation:ca forKey:nil];


这里有童鞋说不对,说者好多行,猫猫给简化下哈,还剩下三行,但是严格说,ca.type = @”cube”;这一句就搞定了。。

CATransition *ca = [CATransition animation]
ca.type = @"cube";
[self.iconView.layer addAnimation:ca forKey:nil];


CATransition专场动画

仅仅一个type就搞定了这么牛逼的转场动画。猫猫表示以前做的android用个平移动画都想哭。。

注意:

CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点

UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果

属性解析:

type:动画过渡类型

subtype:动画过渡方向

startProgress:动画起点(在整体动画的百分比)

endProgress:动画终点(在整体动画的百分比)

过渡效果

fade     //交叉淡化过渡(不支持过渡方向)
kCATransitionFade push     //新视图把旧视图推出去  kCATransitionPush moveIn   //新视图移到旧视图上面   kCATransitionMoveIn reveal   //将旧视图移开,显示下面的新视图  kCATransitionReveal cube     //立方体翻滚效果
oglFlip  //上下左右翻转效果
suckEffect   //收缩效果,如一块布被抽走(不支持过渡方向)
rippleEffect //滴水效果(不支持过渡方向)
pageCurl     //向上翻页效果
pageUnCurl   //向下翻页效果
cameraIrisHollowOpen  //相机镜头打开效果(不支持过渡方向) cameraIrisHollowClose //相机镜头关上效果(不支持过渡方向)

过渡方向
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromBottom
kCATransitionFromTop

CATransition的使用
CATransition *anim = [CATransition animation];
anim.type = @“cube”; // 动画过渡类型
anim.subtype = kCATransitionFromTop; // 动画过渡方向
anim.duration = 1; // 动画持续1s
// 代理,动画执行完毕后会调用delegate的animationDidStop:finished:
anim.delegate = self;

/*******中间穿插改变layer属性的代码**********/

[layer addAnimation:anim forKey:nil];
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: