Bài viết sẽ cung cấp các kiến thức cơ bản về Animation trong Android và hướng dẫn các bạn tạo một vài animation đơn giản

Để tránh người dùng nhàm chán khi sử dụng ứng dụng của bạn, bạn nên tạo các Animation (hiệu ứng) cho các đối tượng mà người dùng tương tác, qua đó ứng dụng của bạn sẽ trở nên sinh động hơn, tạo cho người dùng sự thích thú khi sử dụng.

Android framework cung cấp hai hệ thống hình ảnh động: property animation (android.animation) và view animation (android.view.animation). Để làm quen với animation trong Android, ta bắt đầu với view animation cùng với các hiệu ứng phóng to, thu nhỏ, ẩn hiện, quay...

Sử dụng

Bước 1: Tạo file xml trong thư mục res/anim

Ví dụ: res/anim/rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        // Thời gian chờ để bắt đầu chạy  hiệu ứng (milisecond)
        android:startOffset="1000" 

        // View được đặt ở vị trí có góc quay là 10 độ so với ban đầu
        android:fromDegrees="10"

        // Quay tới khi đạt 180 độ so với ban đầu 
        android:toDegrees="180"

        // Điểm đặt làm góc quay. x = y = 0% là vị trí góc trái trên cùng của view
        android:pivotX="0%"
        android:pivotY="0%"
        
        // Thời gian thực hiện hiệu ứng (milisecond)
        android:duration="5000" >
    </rotate>
</set>

Bước 2: Load animation

Gọi hàm startAnimation(animation) cho view mà mình muốn áp dụng:

ImageView image = (ImageView)findViewById(R.id.image_id);
Animation animRotate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate);
image.startAnimation(animRotate );

Một số animation cơ bản

Fade - Hiệu ứng mờ dần, hiện ra

fromAlpha: chỉ số alpha ban đầu (0.0 - 1.0)

toAlpha: chỉ số alpha khi kết thúc hiệu ứng (0.0 - 1.0)

Fade out - Mờ dần (Biến mất)

  <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:duration="2000" >
    </alpha>

Fade in - Hiện ra

   <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="2000" >
    </alpha>

Scale - Kéo dãn (Phóng to, thu nhỏ)

fromXScale: tỉ lệ chiều cao ban đầu

toXScale: tỉ lệ chiều cao kết thúc

fromYScale: tỉ lệ chiều rộng ban đầu

toXScale: tỉ lệ chiều rộng kết thúc

Phóng to

   <scale
        android:startOffset="3000"
        android:fromXScale="1.0"
        android:toXScale="2.0"
        android:fromYScale="1.0"
        android:toYScale="2.0"
        android:duration="3000" >
    </scale>

Thu nhỏ

  <scale
        android:fromXScale="1.0"
        android:toXScale="0.5"
        android:fromYScale="1.0"
        android:toYScale="0.5"
        android:duration="3000" >
    </scale>

Translate - Di chuyển

 <translate
      android:fromXDelta="0%"
      android:toXDelta="100%"
      android:fromYDelta="0%"
      android:toYDelta="100%"
      android:duration="5000" >
  </translate>

Kết hợp các animation

Khi muốn chạy 2 hiệu ứng liên tiếp thì ta có thể tạo ra 2 file xml khác nhau, và startAnimation cùng lúc với view đó hoặc kết hợp 2 hiệu ứng trong 1 file xml bằng thẻ set

Ví dụ: Kết hợp 2 animation bằng thẻ set

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_interpolator" >
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0"
        android:duration="4000" >
    </alpha>
    <rotate
        android:startOffset="0"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="4000" >
    </rotate>
</set>

Video demo các hiệu ứng: https://www.youtube.com/watch?v=k1qTffZ5OMs

Qua bài viết này hi vọng bạn sẽ có những hiểu biết cơ bản về Animation trong Android và tự xây dựng cho mình những animation để làm ứng dụng của bạn thú vị hơn nhé.

Chào thân ái và quyết thắng!

Bài viết gốc: https://viblo.asia/p/cach-tao-anh-dong-hay-cac-hieu-ung-trong-android-android-animations-zoZVRgYQGmg5