Giới thiệu về Animation trong Android

Animation trong Android có thể được định nghĩa theo một trong hai loại của Animation

1 Phân loại animation.

1.1 Properties Animation

Là Animation được tạo bằng cách thay đổi các giá trị của thuộc tính của các đối tượng trong một khoảng thời gian đã được định sẵn bằng Animation

1.2 View Animation

Với view animation bạn có thể tạo ra hai loại animation là:

• Tween animation: Khởi tạo một animation bằng cách thực hiện một loạt các thay đổi trên một hình ảnh duy nhất với Animation.
• Frame animation: Khởi tạo một animation bằng cách sử dụng một chuỗi các hình ảnh được hiển thị theo một thứ tự nhất định với AnimationDrawable

2 Chi tiết từng loại animation

2.1 Properties Animation

• Như đã trình bày ở trên animation này được tạo ra bằng cách thay đổi giá trị các thuộc tính của một đối tượng trong một khoảng thời gian đã định sẵn bằng Animator việc thay đổi này có thể được định nghĩa ở trong file xml nằm trong thư mục res/animator/filename.xml với cú pháp:

<set
  android:ordering=["together" | "sequentially"]>

    <objectAnimator
        android:propertyName="string"
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["repeat" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <animator
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["repeat" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <set>
        ...
    </set>
</set>

• Resource được biên dịch sẽ trỏ đến ValueAnimator, ObjectAnimator hoặc AnimatorSet.
• Với các tập tin định nghĩa này phải được viết với một phần tử gốc duy nhất là <set>, <objectAnimator>hoặc <valueAnimator> như ví dụ ở trên phần tử gốc được đặt là <set> bạn cũng có thể khai báo các thành phần khác trong thẻ <set> này hoặc có thể là các thẻ <set> khác bên trong nó.
• <set>: Ở trên các bạn có thể thấy trong thẻ <set> có khai báo android:ordering=["together" | "sequentially"]> giá trị này sẽ chỉ định thứ tự của animation trong set với together nghĩa là thực hiện cùng lúc còn sequentially nghĩa là thực hiện tuần tự.
• <objectAnimator>: Thực hiện việc animates một hoặc nhiều thuộc tính cụ thể của một đối tượng trong một khoảng thời gian nhất định nó đại diện cho ObjectAnimator. Thành phần này có các thuộc tính chính là: + android:propertyName="string" (bắt buộc phải có) Khai báo thuộc tính để thực hiện animation ví dụ như alpha hay backgroundColor. Sử dụng bằng cách gọi loadAnimator()sau đó set đối tượng cho nó bằng setTarget(). + android:duration="int" Thời gian của animation (tính bằng mili giây và có giá trị mặc định là 300mili giây). + android:valueFrom="float | int | color" Giá trị bắt đầu của các thuộc tính trong animation đó, mặc định sẽ được lấy thông qua phương thức get, màu sắc ở đây được khai báo ở dạng mã hexa. + android:valueTo="float | int | color"Giá trị của các thuộc tính ở cuối thời điểm mà animation thực hiện xong, giá trị này là bắt buộc phải chỉ định. + android:startOffset="int" Thời gian delay (độ trễ) khi phương thức start() được gọi, đơn vị là mili giây. + android:repeatCount="int" Chỉ định rằng animation này sẽ được lặp lại mấy lần, giá trị mặc định sẽ là 0 (không lặp lại) lưu ý là khi đặt là 1 thì animation sẽ được thực hiện lại 1 lần nghĩa là tất cả animation sẽ chạy 2 lần. + android:repeatMode=["repeat" | "reverse"] Chế độ lặp lại của animation repeat thì animation lặp lại sẽ như ban đầu còn reverse thì animation sẽ có hiệu ứng ngược lại. + android:valueType=["intType" | "floatType"]/> Chỉ định loại giá trị của các thuộc tính có thể là kiểu Int hoặc Float.
• <animator> Thực hiện animation trong một khoảng thời gian xác định, đại diện cho ValueAnimator với các thuộc tính chính tương tự với <objectAnimator> ở trên. Cuối cùng để khởi chạy Animation đã được định nghĩa này bạn cần chuyển resource xml này vào đối tượng AnimatorSet và sau đó set đối tượng sẽ thực thi animation này bằng phương thức setTarget():

val set: AnimatorSet = AnimatorInflater.loadAnimator(myContext, R.animator.property_animator)
    .apply {
        setTarget(myObject)
        start()
    }

2.2 View animation.

• View animation framework này hỗ trợ cả hai loại animation là tween animation và frame animation như đã trình bày ở trên, cả hai loại này đều có thể được định nghĩa trong file xml.

2.2.1 Tween animation

• Là một animation được định nghĩa trong XML thực hiện các chuyển đổi như xoay, mờ dần, di chuyển và kéo dài trên một đồ họa. Animation này được định nghĩa trong thư mục res/anim/filename.xml resource khai báo trong file này sẽ được trỏ đến Animation với cú pháp là:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:shareInterpolator=["true" | "false"] >
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />
    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />
    <set>
        ...
    </set>
</set>

• Các tập tin phải có một phần tử gốc duy nhất: hoặc là <alpha>, <scale>, <translate>, <rotate>, hoặc <set> tương tự như trên ta có thể lồng phần tử <set> bên trong một phần tử khác.
• Các thuộc tính chính của tween animation này là: + <alpha>: Hoạt ảnh mờ dần hoặc đậm dần đại diện cho AplhaAnimation với các giá trị android:fromAlpha giá trị bắt đầu đến android:toAlpha giá trị kết thúc, ở đây 0,0 được coi là trong suốt và 1,0 là mờ. + <scale>: Hoạt ảnh thay đổi kích thước với vị trí xác định là trung tâm của hình ảnh và từ đó phát triển ra ngoài hoặc ngược lại là vào trong với các thuộc tính android:fromXScale android:fromYScale đến các giá trị android:toXScale, android:toYScale hoặc ta cũng có thể neo các giá trị X,Y không cho nó thay đổi trong quá trình scale này với android:pivotX(cố định trục X), android:pivotY(cố định trục Y) + <translate>: Chuyển động dọc hoặc ngang của hoạt ảnh hỗ trợ các giá trị từ -100 đến 100 với đơn vị tính là %. Ta xác định vị trí bắt đầu và kết thúc cho hoạt ảnh bằng cách set các cặp thuộc tính chỉ định giá trị X,Y cho hoạt ảnh với android:fromXDelta, android:fromYDelta đến giá trị kết thúc animation là android:toXDelta, android:toYDelta + <rotate>: Hoạt ảnh chỉ định xoay, ta có thể chỉ định giá trị bắt đầu cũng như kết thúc của hoạt ảnh với android:fromDegrees, android:toDegrees và giống với các thuộc tính ở trên ta cũng có thể cố định các giá trị X,Y với các thuộc tính android:pivotX, + <rotate>: Hoạt ảnh chỉ định xoay, ta có thể chỉ định giá trị bắt đầu cũng như kết thúc của hoạt ảnh với android:fromDegrees, android:toDegrees và giống với các thuộc tính ở trên ta cũng có thể cố định các giá trị X,Y với các thuộc tính android:pivotX, android:pivotY
• Ngoài ra ta còn có Interpolators mình sẽ giới thiệu qua ở đây, Interpolators là một công cụ sửa đổi hoạt ảnh được xác định trong XML có ảnh hưởng đến tốc độ thay đổi trong hoạt ảnh. Điều này cho phép các hiệu ứng hoạt ảnh hiện tại của bạn được tăng tốc, giảm tốc, lặp lại, bật lên, v.v. Tất cả các Interpolators có sẵn trong Android là các lớp con của lớp Interpolator. Đối với mỗi lớp Interpolators, Android bao gồm một bộ các resource mà bạn có thể tham chiếu đến để áp dụng Interpolators vào hoạt ảnh bằng android:interpolator. Bảng sau chỉ định tài nguyên sẽ sử dụng cho mỗi bộ nội suy. Để sử dụng Interpolators các bạn khai báo:

<set android:interpolator="@android:anim/accelerate_interpolator">
    ...
</set>

• Ngoài ra các bạn cũng có thể custom Interpolators cho riêng bạn thay vì sử dụng sẵn như ở trên bằng cách khai báo một file trong resource/anim sau đó khai báo các giá trị mà bạn mong muốn trong file xml mà bạn vừa tạo. Ví dụ:

<?xml version="1.0" encoding="utf-8"?>
<InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android"
    android:attribute_name="value"
    />

• Các thành phần chính trong Interpolators có thể kể đến là:

<accelerateDecelerateInterpolator>: Tốc độ thay đổi bắt đầu và kết thúc chậm nhưng tăng tốc qua giữa.

<accelerateInterpolator>: Tốc độ thay đổi bắt đầu chậm, sau đó tăng tốc.

<anticipateInterpolator>: Bắt đầu một khoảng lùi lại sau đó bay về phía trước.

<anticipateOvershootInterpolator> Bắt đầu lùi lại, bay về phía trước và vượt qua giá trị đích, sau đó lùi lại giá trị đích.

<bounceInterpolator>: Sau khi đến vị trí giá trị cuối thì quay lại giá trị ban đầu

<cycleInterpolator>: Lặp lại hoạt ảnh động theo một số chu kỳ xác định. Tốc độ thay đổi theo mô hình hình sin.

<decelerateInterpolator>: Hoạt ảnh có tốc độ thay đổi bắt đầu nhanh chóng, sau đó giảm tốc.

<linearInterpolator>: Tốc độ thay đổi hoạt ảnh là không đổi(tuyến tính).

• Ngoài ra còn một số nữa các bạn có thể tự tìm hiểu thêm. Ví dụ bạn tạo file my_overshoot_interpolator:

<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:tension="7.0"
    />

Sau đó các bạn sử dụng bằng cách:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@anim/my_overshoot_interpolator"
    //Định nghĩa animation như bình thường />

2.2.2 FrameAnimation

• Là animation định nghĩa một chuỗi các hình ảnh theo thứ tự để tạo nên hoạt ảnh, vị trí của file này được đặt tại res/drawable/filename.xml với cú pháp:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource_name"
        android:duration="integer" />
</animation-list>

• Các thuộc tính gồm có: + <animation-list>: Là thẻ gốc chứa một hoặc nhiều các <item> và là thẻ bắt buộc phải khai báo. + <item>: Là một item trong list, có thể hiểu đây là một khung hình trong hoạt ảnh.
• Ví dụ bạn tạo file rocket.xml:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

• Sau đó các bạn sử dụng file này bằngc cách:

val rocketImage: ImageView = findViewById(R.id.rocket_image)
rocketImage.setBackgroundResource(R.drawable.rocket_thrust)

val rocketAnimation = rocketImage.background
if (rocketAnimation is Animatable) {
    rocketAnimation.start()
}

3. Tổng kết.

• Trên đây mình vừa trình bày sơ lược về animation trong android và cách sử dụng các bạn có thể tham khảo và tìm hiểu thêm.
• Nguồn: https://developer.android.com/guide