Swift 3.0 使用UIview动画和CABasicAnimation做登录页面效果

效果图

qweqweqweqweqwe11.gif

登录页面可能被要求要炫一点,所以有了今天的代码......
直接上代码相信都能看的懂

        let textFild = UITextField()
        textFild.frame = CGRect.init(x: 20, y: -50, width: 200, height: 30)
        textFild.placeholder = "账号"
        textFild.borderStyle = .roundedRect
        self.view.addSubview(textFild)
        UIView.animate(withDuration: 1) {
            textFild.frame = CGRect.init(x: 20, y: 80, width: 200, height: 30)
        }
        login = UIButton.init(frame: CGRect.init(x: 100, y: self.view.bounds.size.height + 10, width: 50, height: 30))
        login?.backgroundColor = UIColor.blue
        login?.setTitle("登录", for: UIControlState.normal)
        login?.addTarget(self, action: #selector(btnClick), for: UIControlEvents.touchUpInside)
        self.view.addSubview(login!)
        
        let textFild1 = UITextField()
        textFild1.frame = CGRect.init(x: -210, y: 160, width: 200, height: 30)
        //        textFild.background = UIColor.orange
        textFild1.placeholder = "密码"
        textFild1.borderStyle = .roundedRect
        self.view.addSubview(textFild1)
        UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
            textFild1.frame = CGRect.init(x: 20, y: 160, width: 200, height: 30)
        }) { (finish) in
            UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0, initialSpringVelocity: 0, options: UIViewAnimationOptions.curveLinear, animations: {
                self.login?.frame = CGRect.init(x: 100, y: 300, width: 50, height: 30)
            }, completion: nil)
            
            
        }

按钮点击事件方法

    func btnClick() {
        let viewLayer:CALayer = (login?.layer)!
        let position:CGPoint = viewLayer.position
        let x:CGPoint = CGPoint.init(x: position.x + 2, y: position.y)
        let y:CGPoint = CGPoint.init(x: position.x - 2, y: position.y)
        let animation:CABasicAnimation = CABasicAnimation.init(keyPath: "position")
        ///设置运动形似
        animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionDefault)
        //设置开始位置
        animation.fromValue = NSValue.init(cgPoint: x)
        animation.toValue = NSValue.init(cgPoint: y)
        //设置自动翻转
        animation.autoreverses = false
        //设置时间
        animation.duration = 1
        //次数
        animation.repeatCount = 3
        
        login?.layer.add(animation, forKey: nil)

    }