Cách tạo ảnh động, hay các hiệu ứng trong Android (Android Animations)

Như chúng ta đã biết, ngày nay có rất nhiều các ứng dụng Androi, những ứng dụng này thường được viết để đáp ứng nhu cầu giải trí của con người. Chính vì vậy để tránh nhàm chán khi sử dụng, chúng ta nên tạo các hiệu ứng cho các đối tượng mà người dùng tương tác, qua đó ứng dụng của chúng ta sẽ trở nên sinh động hơn, tạo cho người dùng sự thích thú khi sử dụng.

Android cung cấp một loạt các API áp dụng hiệu ứng động vào các yếu tố giao diện người dùng và vẽ tùy chỉnh 2D và 3D. Android framework cung cấp hai hệ thống hình ảnh động: property animation (android.animation) và view animation (android.view.animation). Hai hệ thống này rất được người sử dụng yêu thích, vì nó linh động, dễ sử dụng và cung cấp nhiều tùy chọn cho người lập trình. Ngoài ra, bạn có thể sử dụng Drawable, Canvas hay OpenGl...

Để 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...

Đầu tiên, để định nghĩa một animation, bạn phải tạo file xml trong thư mục res/anim. VD: 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"
        android:fromDegrees="0"
        android:toDegrees="180"
        android:pivotX="0%"
        android:pivotY="0%"
        android:duration="5000" >
    </rotate>
</set>

Như trong nội dung của file rotate.xml, ta thấy phải định nghĩa các giá trị cho chuyển động mà mình muốn tạo ra.

android:startOffset="1000" thời chờ để bắt đầu chạy  hiệu ứng. (1000  1000 milisecond)

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

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

android:pivotX="0%"
android:pivotY="0%" điểm làm góc quay. x = y = 0% là vị trí trên cùng bên trái của view.

android:duration="5000" khoảng thời gian thực hiện hiệu ứng hay chuyển động quay.

Để sử dụng hiệu ứng đó, ta phải load animation và 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 animFade = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate);
image.startAnimation(animFade);

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 viết ngay cả 2 hiệu ứng trong 1 file xml.

Với cách viết 2 file xml thì ta làm tương tự như trên với file xml có tên khác. Viết cả 2 hiệu ứng cùng lúc vào trong 1 file xml:

<?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>

Đối với việc viết tất cả các hiệu ứng vào trong file 1 file xml thì tất cả hiệu ứng sẽ chạy cùng một lúc hoặc sau một khoảng thời gian đã định trước (được cài đặt với thông số android:startOffset) và hiệu ứng chỉ dừng lại khi chạy xong. Hơn nữa, khi startAnimation với một view nào đó, thì view đó sẽ thay đổi trạng thái lần lượt theo giá trị cài đặt bắt đầu của mỗi hiệu ứng. VD: Khi ta cài đặt 2 hiệu ứng rotate với vị trí ban đầu đều lệch 10 độ so với vị trí ban đầu thì khi chạy, view sẽ bị lệch 20 độ so với vị trí cũ.

    <rotate
        android:fromDegrees="10"
        android:pivotX="0%"
        android:pivotY="0%"
        android:duration="4000" >
    </rotate>
    <rotate
        android:startOffset="1000"
        android:fromDegrees="10"
        android:pivotX="0%"
        android:pivotY="0%"
        android:duration="4000" >
    </rotate>

Với animation như trên thì view sẽ lệch 20 độ so với vị trí ban đầu, với tâm quay là góc trên cùng bên trái, mặc dù hiệu ứng thứ 2 chạy sau 1s nhưng giá trị khởi tạo của nó vẫn được chay ngay khi bắt đầu hiệu ứng với file xml này. Chính vì vậy nên ta cần phải lưu ý khi sử dụng cách này.

Dưới đây là một số ví dụ về các hiệu ứng đơn giản: 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>

Fade out and Rotate - Vừa quay vừa biến mất

    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0"
        android:duration="4000" >
    </alpha>
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="4000" >
    </rotate>

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

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

    <Scale
        android:startOffset="3000"
        android:fromXScale="1.0"
        android:toXScale="2.0"
        android:fromYScale="1.0"
        android:toYScale="2.0"
        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>

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

Tham khảo tại: http://developer.android.com/guide/topics/resources/animation-resource.html http://developer.android.com/guide/topics/graphics/overview.html http://www.tutorialspoint.com/android/android_animations.htm