…
Xin chào các bạn, ở bài trước mình có giới thiệu cho các bạn về Lottie và cách sử dụng Lottie cho Android.
Trong bài này mình sẽ giới thiệu cho các bạn về Animation Listener và Custom Animator với Lottie.
Animation Listener
Có rất nhiều trường hợp khi sử dụng Lottie mà chúng ta cần phải xử lý các công việc khác nữa. Dưới đây là một vài trường hợp cụ thể:
- Mở một màn hình mới sau khi kết thúc chạy animation với Lottie.
- Cập nhật giá trị trong khi đang chạy animation với Lottie.
- Điều chỉnh tốc độ hay thời gian chạy của animation.
Listener được mô tả như sau:
loading_animation.addAnimatorUpdateListener { valueAnimator ->
//do something
}Tham số valueAnimator bên trên thực chất nó là tham số số trong ValueAnimator Class ở Android SDK. Nó cung cấp cho bạn biết về trạng thái hiện tại và thời gian hiện tại của animation.
Bây giờ, tôi sẽ có 1 bài toán nho nhỏ như sau: ở bài trước tôi sử dụng loading với Lottie, bài này tôi sẽ thực hiện khi loading thì sẽ thực hiện cùng ProgressBar và set giá trị của progress đó hiển thị trên màn hình.
Tôi sẽ thiết kế layout như sau:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="@+id/progress_horizontal"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:max="100"
android:progress="0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.9" />
<TextView
android:id="@+id/progress_number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/progress_horizontal"
app:layout_constraintWidth_percent="0.9"
tools:text="0/100" />
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/loading_animation"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>Sau đó, tôi sẽ thực hiện lấy giá trị và set cho ProgressBar như dưới đây:
package techover.lottie
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
loading_animation.setAnimation("trail-loading.json")
loading_animation.loop(true)
loading_animation.speed = 0.5f
loading_animation.addAnimatorUpdateListener { valueAnimator ->
val progress = (valueAnimator.animatedValue as Float * 100).toInt()
progress_horizontal.progress = progress
progress_number.text = "$progress / 100"
}
loading_animation.playAnimation()
}
}Custom Animator
Để kết hợp Lottie vào ứng dụng để có những hình ảnh mượt mà, sinh động thì thật đơn giản phải không nào? 😉
Nhưng sẽ có nhiều trường hợp việc kết hợp cũng trở nên quan ngại phần nào: ví dụ như kết hợp Lottie khi download, khi scroll position hay cử chỉ… Vì vậy chúng ta phải Custom Animator để cho phù hợp với từng bài toán.
Ví dụ sau sẽ giúp các bạn hình dung dễ hơn:
//Custom animation speed or duration.
val animator = ValueAnimator.ofFloat(0f, 2f)
animator.addUpdateListener { valueAnimator: ValueAnimator ->
loading_animation.speed = valueAnimator.animatedValue as Float
}
animator.start()Ở đây, mình đã thực hiện điều chỉnh tốc độ của loading chạy từ 0 -> 2 bằng việc sử dụng Animator.
Bài tiếp theo mình sẽ giới thiệu làm cách nào để điều chỉnh các thuộc tính động, sẽ có nhiều cái thú vị đấy, hãy đón đọc bài viết của mình bạn nhé.
Cảm ơn các bạn đã dành thời gian đọc bài của mình. Rất mong nhận được sự góp ý từ các bạn ^^