Swift动画 —— 登陆页面动画（二）

最新推荐文章于 2024-06-21 16:07:44 发布

原创

最新推荐文章于 2024-06-21 16:07:44 发布 · 412 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swift #动画

下面是想要实现的动画效果：
在这里插入图片描述
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),