下面是想要实现的动画效果:
Logo的动画做完了,接下来要做中间画线的动画以及中间Button的浮现动画
同样的,在这里声明loginButton属性和所需要的button大小属性。
private let loginButtonSize = CGSize(width: 60, height: 60)
var loginButton: UIButton!
在setupUI里面设置好loginButton的大小、位置、border、cornerRadius、title等属性并添加到为view的subview。
loginButton = UIButton(type: .custom)
loginButton.frame = CGRect(x: view.frame.width/2 - loginButtonSize.width/2,
y: view.frame.height/2 - loginButtonSize.height/2,
width: loginButtonSize.width,
height: loginButtonSize.height)
loginButton.center = view.center
loginButton.layer.borderColor = UIColor.brown.cgColor
loginButton.layer.borderWidth = 1
loginButton.layer.cornerRadius = loginButtonSize.width / 2
loginButton.setTitle("Open", for: .normal)
loginButton.setTitleColor(.brown, for: .normal)
loginButton.setTitleColor(UIColor.brown.withAlphaComponent(0.5), for: .highlighted)
loginButton.alpha = 0
view.addSubview(loginButton)
接下来就需要先画线,用UIBezierPath来画出所期望的线。
let path = UIBezierPath()
// Start at center left of screen
path.move(to: CGPoint(x: 0, y: view.center.y))
// Add line to the left side -10 px of login button
path.addLine(to: CGPoint(x: loginButton.center.x - loginButtonSize.width - 10,
y: view.center.y))
// Add arc that go to -10 px bottom of login button
path.addArc(withCenter: loginButton.center,
radius: loginButtonSize.height/2 + 10,
startAngle: CGFloat(Double.pi),