TransitionButton
概念
来源:Dribbble
预览
- 展开动画:
- 震动动画:
示例
要运行示例项目,克隆仓库,然后打开工作区TransitionButton.xcworkspace
,使用iOS Example
方案运行。
安装
CocoaPods
CocoaPods 是 Cocoa 项目的依赖管理器。您可以使用以下命令安装它
$ gem install cocoapods
要使用 CocoaPods 在您的 Xcode 项目中集成 TransitionButton,请在您的 Podfile
中指定它
use_frameworks!
pod 'TransitionButton'
然后,运行以下命令
$ pod install
Carthage
Carthage 是一个去中心化的依赖管理器,它构建您的依赖并为您提供二进制框架。
您可以使用以下命令使用 Homebrew 安装 Carthage
$ brew update
$ brew install carthage
要使用 Carthage 在您的 Xcode 项目中集成 TransitionButton,请在您的 Cartfile
中指定它
github "aladinway/TransitionButton"
运行 carthage update
以构建框架,然后在应用程序目标的“通用”设置选项卡的“已嵌入的二进制文件”部分,从磁盘上的 Carthage/Build 文件夹中将构建的 TransitionButton.framework
拖放到其中。
使用方法
TransitionButton
是 UIButton
的子类。除了提供 UIButton
的所有功能外,TransitionButton
还有两个主要方法
-
startAnimation()
: 使用加载指示器启动按钮动画,应在开始任务(例如,在对登录信息进行网络调用之前)之前调用。 -
stopAnimation(animationStyle: StopAnimationStyle, revertAfterDelay delay: TimeInterval, completion: (() -> Void)?)
: 停止按钮动画。animationStyle
: 停止动画的样式。revertAfterDelay
: 延迟后将其恢复到原始状态,以便提供自定义过渡的机会。completion
: 一个完成块,在动画完成后被调用,可能有助于过渡到另一个视图控制器,例如从登录屏幕切换到主页。
对于停止动画参数 StopAnimationStyle
有三种样式
StopAnimationStyle.normal
: 仅将按钮恢复到原始状态。StopAnimationStyle.expand
: 扩展按钮并覆盖整个屏幕,用于过渡动画。StopAnimationStyle.shake
: 将按钮恢复到原始状态并执行 shake 动画,用于反映发生了错误。
示例
import TransitionButton // 1: First import the TransitionButton library
import UIKit
class FirstViewController: UIViewController {
let button = TransitionButton(frame: CGRect(x: 100, y: 100, width: 100, height: 40)) // please use Autolayout in real project
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(button)
button.backgroundColor = .red
button.setTitle("button", for: .normal)
button.cornerRadius = 20
button.spinnerColor = .white
button.addTarget(self, action: #selector(buttonAction(_:)), for: .touchUpInside)
}
@IBAction func buttonAction(_ button: TransitionButton) {
button.startAnimation() // 2: Then start the animation when the user tap the button
let qualityOfServiceClass = DispatchQoS.QoSClass.background
let backgroundQueue = DispatchQueue.global(qos: qualityOfServiceClass)
backgroundQueue.async(execute: {
sleep(3) // 3: Do your networking task or background work here.
DispatchQueue.main.async(execute: { () -> Void in
// 4: Stop the animation, here you have three options for the `animationStyle` property:
// .expand: useful when the task has been compeletd successfully and you want to expand the button and transit to another view controller in the completion callback
// .shake: when you want to reflect to the user that the task did not complete successfly
// .normal
button.stopAnimation(animationStyle: .expand, completion: {
let secondVC = UIViewController()
self.present(secondVC, animated: true, completion: nil)
})
})
})
}
}
在使用展开动画时,非常重要的一点是,您需要使用自定义淡入淡出动画来从第一个视图控制器切换到第二个视图控制器,以覆盖原生滑动动画。您可以调用CustomTransitionViewController
,它是UIViewController
的子类,提供内建的淡入淡出动画,以下是第二个视图控制器应有的外观:
import TransitionButton
class SecondViewController: CustomTransitionViewController {
}
完成。
作者
许可证
TransitionButton 在MIT许可证下可用。有关更多信息,请参阅LICENSE文件。