当前位置: > > > Swift - 使用CATransition制作过渡动画(页面切换转场效果)

Swift - 使用CATransition制作过渡动画(页面切换转场效果)

(本文代码已升级至Swift4)

CATransition 动画主要在过渡时使用,比如两个页面层级改变的时候添加一个转场效果。CATransition 分为两类,一类是公开的动画效果,一类是非公开的动画效果。

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
  • 4楼
    2017-12-19 16:48
    卢梦如

    使用CATransition的『cube』做转场动画为什么UIView上面会有一层黑色的蒙版,能消除掉吗

    站长回复

    这个好像消除不了的。

  • 3楼
    2016-01-26 10:58
    wen

    不同页面之间,通过a标签进行切换,能够做到页面切换效果么?

    站长回复

    a标签指的是html页面里的链接标签吗?如果是html页面间的切换,建议使用js实现切换效果。虽然也可以把每个页面用单独的UIWebView或WKWebView来加载,然后在swift这边做切换动画,但个人觉得不好。

  • 2楼
    2016-01-09 15:13
    我不是张三

    撸主能写一个页面之间切换的吗.

    站长回复

    这个不就是两个View的切换吗?

  • 1楼
    2015-10-20 21:21
    木头人

    提示不能没有touchesBegan 父类可以重行,麻烦博主有修改的时候发一个邮件我好吗 十分感谢

    站长回复

    现在touchesBegan方法参数有变,现已修改。