Android Animation (Part 2)

by KINH HOANG` HON
359 views

Xin chào các bạn, bài tiếp theo trong series về animation của mình đó là FrameAnimation.

Như ở bài trước mình đã nói thì FrameAnimation là 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. Chúng ta cùng đi tìm hiểu về nó. Les’t go…

Với định nghĩa về FrameAnimation bên trên thì chúng ta sẽ hình dung là trước tiên chúng ta cần tạo file xml để định nghĩa các frame.
Bạn có thể tham khảo file numeric_animation.xml của tôi dưới đây:

 <!-- Animation frames are ic_numeric_0.png through ic_numeric_2.png
     files inside the res/drawable/ folder -->
 <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/selected"
    android:oneshot="false">
    <item
        android:drawable="@drawable/ic_numeric_0"
        android:duration="1000" />
    <item
        android:drawable="@drawable/ic_numeric_1"
        android:duration="1000" />
    <item
        android:drawable="@drawable/ic_numeric_2"
        android:duration="1000" />
</animation-list>

syntax:

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

element:
<animation-list>: là thẻ bắt buộc, nó chứa một hoặc nhiều thẻ <item>.
android:oneshot: kiểu giá trị kiểu Boolean. “true” là khi bạn muốn thực hiện 1 lần duy nhất. “false” là khi bạn muốn lặp lại.
<item>: là 1 item trong danh sách, bạn hiểu nó là 1 khung hình khi chạy.
android:drawable: Drawable của bạn.
android:duration: kiểu giá trị Integer, nó là thời lượng hiển thị được tính bằng milliseconds.
Chạy nào, chạy nào…

private lateinit var numericAnimation: AnimationDrawable

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Load the ImageView that will host the animation and
        // set its background to our AnimationDrawable XML resource.
        findViewById<ImageView>(R.id.numeric_image).apply {
            setBackgroundResource(R.drawable.numeric_animation)
            // Get the background, which has been compiled to an AnimationDrawable object.
            numericAnimation = background as AnimationDrawable
            // Start the animation (looped playback by default).
            numericAnimation.start()
        }

    }

Ở đây thì bạn cũng thấy rằng trên màn hình main của tôi sẽ có 1 ImageView. Sau đó tôi sẽ chạy animation với AnimationDrawable đã được định nghĩa trong numeric_animation.xml.

FrameAnimation


Thật đơn giản phải không các bạn? 😀
Nhưng nó có nhược điểm khi bạn sử dụng nhiều ảnh với animation có độ phức tạp cao sẽ làm tăng kích thước của ứng dụng, hay là bạn sẽ mất khá nhiều thời gian để custom lại animation đó cho phù hợp với bài toán của bạn. Để giải quyết vấn đề này, bài tiếp theo tôi sẽ giới thiệu cho các bạn về AnimatedVectorDrawable, các bạn hãy đón chờ nhé 😀

Link tham khảo:

  • https://developer.android.com/guide/topics/graphics/drawable-animation

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.