如何写一个酷炫的注册登录页

这是一篇关于实现一种注册登录页转场动效的文章,基于Swift编程语言和iOS开发平台。首先上效果图


动效.gif

下面就来分析一下这个效果的实现。
转场动画是一个3D旋转,由于3D旋转特性会导致view上的内容同样做出翻转效果,所以要是让整个view转180度的话,字就会变成反的,因此这里我实际做了让整个view转了90度,再让它转回原始位置。在转到90度的时候,我们是无法看到view上的内容的,所以在这个时候进行内容的更改,等它再转回来的时候就会看到内容的变换了。这里贴出核心代码,你只需要把closure闭包中的代码替换掉即可测试效果了。

@IBAction func goRegister(_ sender: UIButton) {
    
    self.viewTransform(closure: {
      
      self.welcomeLabel.isHidden = true
      self.titleImgView.image = UIImage.init(named: "pic_loginhome_signin")
      self.initialView.isHidden = true
      self.registerView.isHidden = false
      self.loginView.isHidden = true
      self.customNaviBar.rightBtnText = "登录"
      self.customNaviBar.rightBtn.removeTarget(self, action: #selector(self.goRegister(_:)), for: .touchUpInside)
      self.customNaviBar.rightBtn.addTarget(self, action: #selector(self.goLogin(_:)), for: .touchUpInside)
    })
  }
  
  @IBAction func goLogin(_ sender: UIButton) {
    
    self.viewTransform(closure: {
      
      self.welcomeLabel.isHidden = true
      self.titleImgView.image = UIImage.init(named: "pic_loginhome_login")
      self.initialView.isHidden = true
      self.loginView.isHidden = false
      self.registerView.isHidden = true
      self.customNaviBar.rightBtnText = "注册"
      self.customNaviBar.rightBtn.removeTarget(self, action: #selector(self.goLogin(_:)), for: .touchUpInside)
      self.customNaviBar.rightBtn.addTarget(self, action: #selector(self.goRegister(_:)), for: .touchUpInside)
    })
  }
  
  func viewTransform(closure: @escaping () -> Void) {
    
    var transform = CATransform3DIdentity
    let angle = CGFloat(-Double.pi/2)
    transform.m34 = -1 / 500
    
    UIView.animate(withDuration: 1, animations: {() -> Void in
      
      self.view.layer.transform = CATransform3DRotate(transform, angle, 0, 1, 0)
    }, completion: {(_ finished: Bool) -> Void in
      
      closure()
      UIView.animate(withDuration: 1, animations: {() -> Void in
        
        self.view.layer.transform = CATransform3DRotate(transform, 0
, 0, 1, 0)
      })
    })
    
  }

你可能感兴趣的:(如何写一个酷炫的注册登录页)