效果图
![](https://img.haomeiwen.com/i1791318/52922130b36768aa.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)
}
网友评论