Swift - 使用CATransition制作过渡动画(页面切换转场效果)
作者:hangge | 2015-06-25 10:07
(本文代码已升级至Swift4)
1,公开动画效果:
- kCATransitionFade:翻页
- kCATransitionMoveIn:弹出
- kCATransitionPush:推出
- kCATransitionReveal:移除
2,非公开动画效果:
- "cube":立方体
- "suckEffect":吸收
- "oglFlip":翻转
- "rippleEffect":波纹
- "pageCurl":卷页
- "cameraIrisHollowOpen":镜头开
- "cameraIrisHollowClose":镜头关
3,动画方向类型:
- kCATransitionFromRight:从右侧开始实现过渡动画
- kCATransitionFromLeft:从左侧开始实现过渡动画
- kCATransitionFromTop:从顶部开始实现过渡动画
- kCATransitionFromBottom:从底部开始实现过渡动画
4,下面通过一个样例演示:
页面上添加两个分别是红色,蓝色的 UIView。当点击屏幕的时候,这两个 UIView 层级切换,同时会有从左向右推出的效果。

import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let redView:UIView = UIView(frame: CGRect(x:20, y:20, width:280, height:400))
redView.backgroundColor = UIColor.red
self.view.insertSubview(redView, at: 0)
let blueView:UIView = UIView(frame: CGRect(x:20, y:20, width: 280, height:400))
blueView.backgroundColor = UIColor.blue
self.view.insertSubview(blueView, at: 1)
}
//点击切换两个红蓝视图
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
let transition = CATransition()
transition.duration = 3.0
transition.type = kCATransitionPush //推送类型
transition.subtype = kCATransitionFromLeft //从左侧
self.view.exchangeSubview(at: 1, withSubviewAt: 0)
self.view.layer.add(transition, forKey: nil)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
全部评论(4)
使用CATransition的『cube』做转场动画为什么UIView上面会有一层黑色的蒙版,能消除掉吗
站长回复:这个好像消除不了的。
不同页面之间,通过a标签进行切换,能够做到页面切换效果么?
站长回复:a标签指的是html页面里的链接标签吗?如果是html页面间的切换,建议使用js实现切换效果。虽然也可以把每个页面用单独的UIWebView或WKWebView来加载,然后在swift这边做切换动画,但个人觉得不好。
撸主能写一个页面之间切换的吗.
站长回复:这个不就是两个View的切换吗?
提示不能没有touchesBegan 父类可以重行,麻烦博主有修改的时候发一个邮件我好吗 十分感谢
站长回复:现在touchesBegan方法参数有变,现已修改。