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 物件的各種屬性，以更改液體按鈕的外觀和行為。

演算法

• 為主要活動建立一個新類，擴充套件 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，當用戶成功支付時，基本上會觸發一個對勾標記，然後在螢幕上顯示五彩紙屑。