TKSubmitTransition 开源项目教程

TKSubmitTransition 开源项目教程

TKSubmitTransitionAnimated UIButton of Loading Animation and Transition Animation. Inspired by https://dribbble.com/shots/1945593-Login-Home-Screen项目地址:https://gitcode.com/gh_mirrors/tk/TKSubmitTransition

项目介绍

TKSubmitTransition 是一个用于实现加载动画和过渡动画的 Swift 库，灵感来源于 Dribbble。该项目提供了一个自定义的 UIButton，可以在点击后显示加载动画，并在加载完成后过渡到下一个 UIViewController。

项目快速启动

安装

使用 Cocoapods

# Swift 5
pod 'TKSubmitTransition', :git => 'https://github.com/entotsu/TKSubmitTransition.git'

# Swift 4
pod 'TKSubmitTransition', :git => 'https://github.com/entotsu/TKSubmitTransition.git', :branch => 'swift4'

# Swift 3
pod 'TKSubmitTransition', :git => 'https://github.com/entotsu/TKSubmitTransition.git', :tag => '2.0'

# Swift 2 & Below
pod 'TKSubmitTransition', '~> 0.2'

手动安装

将 SubmitTransition/Classes 目录下的所有文件拖到你的项目中。

使用

在 Storyboard 中使用

1. 在 Storyboard 中拖入一个 UIButton。
2. 在 Identity Inspector 中将自定义类设置为 TKSubmitTransition。
3. 通过 Storyboard 设置按钮的属性。
4. 在你的视图控制器中创建一个 IBOutlet。

代码中使用

import SubmitTransition

class YourViewController: UIViewController {
    var btn: TKTransitionSubmitButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        btn = TKTransitionSubmitButton(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width - 64, height: 44))
        btn.center = self.view.center
        btn.frame.bottom = self.view.frame.height - 60
        btn.setTitle("Sign in", for: .normal)
        btn.titleLabel?.font = UIFont.systemFont(ofSize: 17)
        btn.addTarget(self, action: #selector(didPressButton), for: .touchUpInside)
        self.view.addSubview(btn)
    }

    @objc func didPressButton() {
        btn.startLoadingAnimation()
        // 模拟加载完成后过渡到下一个视图控制器
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            self.btn.startFinishAnimation {
                let nextViewController = NextViewController()
                nextViewController.transitioningDelegate = self
                self.present(nextViewController, animated: true, completion: nil)
            }
        }
    }
}

extension YourViewController: UIViewControllerTransitioningDelegate {
    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        return TKFadeInAnimator()
    }
}

应用案例和最佳实践

应用案例

1. 登录页面：在用户点击登录按钮后，显示加载动画，加载完成后过渡到主页面。
2. 表单提交：在用户提交表单后，显示加载动画，加载完成后显示提交成功的提示。

最佳实践

1. 动画时长：确保加载动画的时长与实际加载时间相匹配，避免用户等待时间过长。
2. 过渡效果：选择合适的过渡效果，使界面切换更加平滑。
3. 错误处理：在加载失败时，提供友好的错误提示，并允许用户重新尝试。

典型生态项目

TKSubmitTransition 可以与其他 UI 动画库和过渡效果库结合使用，例如：

1. Hero：一个用于实现流畅过渡效果的库。
2. NVActivityIndicatorView：一个包含多种加载指示器的库。

通过结合这些库，可以进一步增强应用的用户体验和视觉效果。

TKSubmitTransitionAnimated UIButton of Loading Animation and Transition Animation. Inspired by https://dribbble.com/shots/1945593-Login-Home-Screen项目地址:https://gitcode.com/gh_mirrors/tk/TKSubmitTransition