Android Onboarding Hop Animation

Bạn có một tính năng tuyệt vời trong ứng dụng của mình, yêu cầu người dùng của bạn vuốt chế độ xem lên để mở. Nhưng người dùng của bạn KHÔNG sử dụng nó. TẠI SAO?! Tất nhiên, vì họ không nhận thức được tính năng tuyệt vời đó. Hãy giúp họ khám phá tính năng đó.

Hop tính năng của bạn

Nó rất trực quan vì người dùng cần vuốt nó để sử dụng nó. Hy vọng bài viêt này sẽ giúp bạn cải thiện phần chức năng để mọi người biết rằng phần chức năng đó có nhiều thứ để hiển thị.

Thử Xem Nào

Tôi sẽ bắt đầu thử "Hop" một TextView đơn giản để xem việc triển khai Animation đơn giản như thế nào. Nó thường được áp dụng cho các view hiển thị .

One Hop

val animation = textViewHop
    .animate()
    .translationYBy(-40f)
    .setDuration(200)

animation.withEndAction {
    textViewHop.animate().translationYBy(40f).duration = 200
}

Nhờ phương thức <withEndAction>, tôi có thể làm chuyển động view theo hướng ngược lại của hình ảnh động đầu tiên. Nếu bạn cố gắng thực hiện với AnimatorListener, Animation thứ hai của bạn cũng sẽ tự kích hoạt và chế độ xem bạn đang cố gắng tạo hiệu ứng animation ra khỏi màn hình.

Cách để lặp lại nó

Bây giờ chúng ta có hình ảnh động cơ bản. Làm thế nào chúng ta sẽ lặp lại chính nó?

Java

animationHandler.post(new Runnable(){
  @Override
  public void run(){
      //Hop animation
      animationHandler.postDelayed(this, 1000);
  }
});

Kotlin

animationHandler.post(object : Runnable {
  override fun run() {
    // Hop animation   
    animationHandler.postDelayed(this, 1000)
  }
})

Phức tạp hơn một tí cho Kotlin

private val animationHandler = Handler()
private lateinit var animationRunnable: Runnable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    animationRunnable = Runnable { animationFunction() }
    animationHandler.post(animationRunnable)
}
private fun animationFunction() {
    val animation = textViewHop
        .animate()
        .translationYBy(-40f)
        .setDuration(200)
    animation.withEndAction {
        textViewHop.animate().translationYBy(40f).duration = 200
    }
    animationHandler.postDelayed(animationRunnable, 1000)
}

Trên đây là mẫu đơn giản đủ để chạy được thôi nhé. Bạn cũng có thể truyền nó dưới dạng tham số cho phương thức animationFactor.

Kết quả:

Và trên đây là kết quả. Cảm ơn các bạn đã theo dõi