Android 中的液体按钮

Android 应用程序界面通常包含液体按钮。这种特殊的设计展示了流畅的动画，当用户与之交互时，会给人一种按钮不断变形和改变形状的印象。

为了创造生动而引人入胜的用户体验，现代应用程序设计经常融入这些按钮。令人兴奋的是，当点击或滑动液体按钮时，它们会以流畅的动画做出响应，这使得交互变得非常愉快。

在社交媒体平台上，一个普遍的功能是心形的“喜欢”按钮。一旦按下，按钮就会发出流畅的动画，给人一种它在某些应用程序（如 Twitter 或 Instagram）上“生长”或“脉动”的错觉。与该按钮的交互创造了一种娱乐性的视觉效果，从而增强了用户参与度。

Java 中液体按钮的重要性

从消息传递和社交媒体到生产力工具和游戏，可以在各种应用程序中发现液体按钮。它们在重复或经常性任务出现的情况下体现出其价值，并且通过使交互感觉更直观和更具吸引力来改善整体用户体验。

对于那些寻求能够让用户感到愉悦的创新设计元素的人来说，液体按钮绝对值得探索。这些视觉上引人注目的元素为任何 Android 应用程序设计增添了趣味性，同时确保用户交互保持参与度。如果您对用户体验或应用程序设计感兴趣，请考虑深入了解液体按钮的世界！

使用 Java 实现液体按钮

现在您已经了解了液体按钮是什么，实现液体按钮是一个很酷的功能，您应该自己尝试一下。让我们看看执行相同操作的步骤。

在您的项目上工作时，您应该从添加 Lottie 动画库开始。将 Lottie 动画库添加到您的 Android 项目是集成 Lottie 动画的第一步。添加依赖项后，务必同步您的项目，以便在您的应用程序中下载并访问该库。

如果您希望调整您的应用程序。只需将下面概述的依赖项插入到您的应用程序级 build.gradle 文件中 -

implementation 'com.airbnb.android:lottie:4.0.0'

  • 按照第一步操作，您可以继续为您的按钮创建液体动画。这可以通过 Adobe After Effects 或 LottieFiles.com 等在线动画编辑器来完成。

使用 LottieFiles 网站或 Adobe After Effects 的 Bodymovin 插件，将您的动画导出为 Lottie 文件。将文件弹出到应用程序的“res/raw”目录中。

  • 接下来，在您的 XML 布局文件中，创建一个 LottieAnimationView 元素以展示流畅的动画，并确保正确设置 app:lottie_rawRes 属性以表示您的 Lottie 文件的资源 ID。

<com.airbnb.lottie.LottieAnimationView
   android:id="@+id/my_liquid_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:lottie_rawRes="@raw/my_liquid_animation" />

  • 通过创建一个新的 LottieAnimationView 对象并在您的活动或片段代码中将其动画源设置为您的 Lottie 动画文件，在 Java 代码中加载您的动画

LottieAnimationView button = findViewById(R.id.my_liquid_button);
button.setAnimation(R.raw.my_liquid_animation);

  • 为了确保我们按钮的交互性，我们建议集成一个 OnClickListener。此操作将在按下按钮时启动液体动画功能。

button.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
      button.playAnimation();
   }
});

  • 您还可以自定义 LottieAnimationView 对象的各种属性，以更改液体按钮的外观和行为。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

算法

  • 为主要活动创建一个新类，扩展 AppCompatActivity。

  • 覆盖 onCreate 方法。

  • 使用适当的布局文件设置活动的 content view。

  • 使用 findViewById 查找液体按钮视图并将其分配给一个变量。

  • 使用 setAnimation 为液体按钮设置动画，并指定动画文件。

  • 为液体按钮设置一个 OnClickListener 并定义所需的行为。

Android 液体按钮的示例代码库

让我们看一下在 Android 中创建液体按钮的简单代码库。

示例

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import com.airbnb.lottie.LottieAnimationView;

public class MainActivity extends AppCompatActivity {

   private LottieAnimationView liquidButton;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      liquidButton = findViewById(R.id.liquid_button);
      liquidButton.setAnimation(R.raw.payment_success);

      liquidButton.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View view) {
            liquidButton.setAnimation(R.raw.tick_mark);
            liquidButton.playAnimation();

            // Show confetti animation
            LottieAnimationView confetti = findViewById(R.id.confetti_animation);
            confetti.setAnimation(R.raw.confetti);
            confetti.playAnimation();
         }
      });
   }
}

该代码引入了“液体按钮”，当支付成功时，它会向用户提供视觉反馈。液体按钮由布局中 ID 为 liquid_button 的 LottieAnimationView 元素表示。

最初，液体按钮设置为显示表示支付成功的动画 (payment_success.json)。当用户点击液体按钮时，动画将更改为显示对勾标记 (tick_mark.json)。然后播放对勾标记动画，表示支付成功。

除了液体按钮之外，布局中还包含五彩纸屑动画，由另一个 ID 为 confetti_animation 的 LottieAnimationView 元素表示。

结论

您现在知道了 Android 中液体按钮的用途以及如何自己创建一个。上面提供的示例代码使用 Java 语言，表示用户成功支付的液体按钮。它使用 LottieAnimationView，当用户成功支付时，基本上会触发一个对勾标记，然后在屏幕上显示五彩纸屑。

更新于: 2023-07-28

160 次查看

开启您的 职业生涯

通过完成课程获得认证

开始
广告