วิธีสร้างแอนิเมชั่นระลอกคลื่นในแอพ Android ของฉัน

ก่อนเข้าสู่โค้ด เราควรรู้ว่า ripple animation ใน Android คืออะไร แอนิเมชั่น Ripple ก็เหมือนกับโมเมนตัมของคลื่น ใน Android จะปรากฏในมุมมองเช่น Textview ปุ่ม ฯลฯ โดยใช้แอตทริบิวต์พื้นหลัง

ตัวอย่างนี้สาธิตวิธีผสานรวมแอนิเมชั่นระลอกคลื่นเพื่อดู

ขั้นตอนที่ 1 − สร้างโครงการใหม่ใน Android Studio ไปที่ไฟล์ ⇒ โครงการใหม่และกรอกรายละเอียดที่จำเป็นทั้งหมดเพื่อสร้างโครงการใหม่

ขั้นตอนที่ 2 − เพิ่มรหัสต่อไปนี้ใน res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
   xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:app="https://schemas.android.com/apk/res-auto"
   xmlns:tools="https://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">
   <Button
      android:id="@+id/result"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Result Data"
      android:background="@drawable/rippple"
      android:textSize="20sp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

ในโค้ดด้านบนนี้ เราได้เพิ่มปุ่มที่มีพื้นหลังเป็นคลื่น

ขั้นตอนที่ 3 − สร้างไฟล์ drawable เป็น ripple.xml และเพิ่มรหัสต่อไปนี้

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:tools="https://schemas.android.com/tools"
   android:color="#f816a463"
   tools:targetApi="lollipop">
   <item android:id="@android:id/mask">
      <shape android:shape="rectangle">
         <solid android:color="#f816a463" />
      </shape>
   </item>
</ripple>

มาลองเรียกใช้แอปพลิเคชันของคุณกัน ฉันคิดว่าคุณได้เชื่อมต่ออุปกรณ์มือถือ Android จริงกับคอมพิวเตอร์ของคุณ ในการรันแอพจาก android studio ให้เปิดไฟล์กิจกรรมของโปรเจ็กต์แล้วคลิกไอคอน Run จากแถบเครื่องมือ

เลือกอุปกรณ์มือถือของคุณเป็นตัวเลือก จากนั้นตรวจสอบอุปกรณ์มือถือของคุณซึ่งจะแสดงหน้าจอเริ่มต้นของคุณ

ตอนนี้คลิกที่ข้อมูลผลลัพธ์ มันจะแสดงผลดังที่แสดงด้านล่าง -