TransitionButton 使用教程

TransitionButton 使用教程

TransitionButtonUIButton sublass for loading and transition animation.项目地址:https://gitcode.com/gh_mirrors/tr/TransitionButton

项目介绍

TransitionButton 是一个用于 iOS 和 Android 的 UIButton 子类，提供了加载和过渡动画功能。它允许开发者在按钮点击时启动动画，并在任务完成后停止动画，支持多种动画风格，如正常恢复、扩展覆盖屏幕和抖动动画。

项目快速启动

iOS 平台

1. 安装 Carthage：

   brew install carthage
   

2. 添加到 Cartfile：

   github "aladinway/TransitionButton"
   

3. 构建框架：

   carthage update --platform iOS
   

4. 导入框架： 在 Xcode 中，将 Carthage/Build/iOS/TransitionButton.framework 拖到你的项目目标的“General”设置标签下的“Embedded Binaries”部分。

5. 使用示例：

   import TransitionButton
   
   class ViewController: UIViewController {
       @IBOutlet weak var transitionButton: TransitionButton!
   
       override func viewDidLoad() {
           super.viewDidLoad()
           transitionButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
       }
   
       @objc func buttonTapped() {
           transitionButton.startAnimation()
           DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
               self.transitionButton.stopAnimation(animationStyle: .expand, revertAfterDelay: 1) {
                   self.performSegue(withIdentifier: "nextScreen", sender: self)
               }
           }
       }
   }
   

Android 平台

1. 添加依赖：

   implementation 'com.github.aladinway:transitionbutton:1.0.0'
   

2. 布局文件：

   <com.github.aladinway.transitionbutton.TransitionButton
       android:id="@+id/transition_button"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Login"
       app:defaultColor="@color/colorAppAccent"
       app:loaderColor="@android:color/white"
       android:textColor="@android:color/white" />
   

3. 代码示例：

   public class MainActivity extends AppCompatActivity {
       private TransitionButton transitionButton;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           transitionButton = findViewById(R.id.transition_button);
           transitionButton.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                   transitionButton.startAnimation();
                   new Handler().postDelayed(new Runnable() {
                       @Override
                       public void run() {
                           boolean isSuccessful = true;
                           if (isSuccessful) {
                               transitionButton.stopAnimation(TransitionButton.StopAnimationStyle.EXPAND, new TransitionButton.OnAnimationStopEndListener() {
                                   @Override
                                   public void onAnimationStopEnd() {
                                       Intent intent = new Intent(MainActivity.this, NextActivity.class);
                                       startActivity(intent);
                                   }
                               });
                           } else {
                               transitionButton.stopAnimation(TransitionButton.StopAnimationStyle.SHAKE, null);
                           }
                       }
                   }, 2000);
               }
           });
       }
   }
   

应用案例和最佳实践

登录按钮动画

在登录界面，使用 TransitionButton 可以提升用户体验。当用户点击登录按钮时，按钮开始加载动画，表示正在处理登录请求。如果登录成功，按钮扩展并过渡到主屏幕；如果登录失败，按钮抖动以提示错误。

提交表单按钮

在表单提交场景中，TransitionButton 可以显示加载状态，告知用户表单正在被处理。完成后，根据处理结果选择合适的动画风格，如扩展动画表示成功，抖动动画表示失败。

典型生态项目

iOS 生态

• SwiftUI：TransitionButton 可以与 SwiftUI 结合，通过 UIViewRepresentable 包装后在 SwiftUI 中使用。
• RxSwift：结合 RxSwift

TransitionButtonUIButton sublass for loading and transition animation.项目地址:https://gitcode.com/gh_mirrors/tr/TransitionButton