Android 從右到左 textview 滑動 animation

Question

我目前正在構建一個服裝店應用程序，我想要實現的一個功能是沿着主頁片段頂部的一種信息橫幅。 我對使用動畫比較陌生，但我很確定這是最好的選擇。

我有一個字符串列表，如下所示：

val information = listOf("Information 1", "Information 2", "Information 3")

我想做的是讓每個字符串從右到中心滑入片段（需要 2 秒），在中心停留 3 秒，然后在 2 秒內滑出屏幕向左，同時下一個信息正在滑動重要的一點是我希望這會永遠重復（只要你留在 Home 片段上）。

它看起來像這樣：

1) Left side of screen -> |                  Information 1                  | <- Right side of screen
2) Left side of screen -> | Information 1                     Information 2 | <- Right side of screen
3) Left side of screen -> |                  Information 2                  | <- Right side of screen

我希望為此必須使用兩個不同的 animation 文件，所以我寫了以下內容：

居中權

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:startOffset="3000">

    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%p"
        android:duration="2000"/>
</set>

中心向左

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:startOffset="3000">

    <translate
        android:fromXDelta="0%p"
        android:toXDelta="-100%p"
        android:duration="2000"/>
</set>

不幸的是，我不知道如何真正讓它工作，並且非常感謝一些幫助。

編輯

我使用了視圖綁定和視圖 model，它將信息存儲為LiveData<List<String>> ，並且動畫的設置在onCreateView function 中完成。

我這樣做的方式是這樣的：

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                          savedInstanceState: Bundle?): View? {
    binding = FragmentHomeBinding.inflate(inflater, container, false)

    homeViewModel.setBannerInformation(listOf(
        "Information 1", 
        "Information 2", 
        "Information 3"
    ))

    homeViewModel.bannerInformation.observe(viewLifecycleOwner, { informationList ->
        val rightToCenter = AnimationUtils.loadAnimation(binding.bannerInformation.context, R.anim.banner_information_animation_right_to_center)
        val centerToLeft = AnimationUtils.loadAnimation(binding.bannerInformation.context, R.anim.banner_information_animation_center_to_left)

        binding.bannerInformation.text = informationList.first()
        binding.bannerInformation.startAnimation(rightToCenter)
        binding.bannerInformation.startAnimation(centerToLeft)
    })

    return binding.root
}

Answer 1

我找到了一個解決我的問題的方法，這似乎是一個 hacky 解決方案，但到目前為止它有效。

首先，創建一個 animation 資源文件來執行您想要的 animation

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%p"
        android:duration="2000"/>

    <translate
        android:startOffset="3500"
        android:fromXDelta="0%p"
        android:toXDelta="-100%p"
        android:duration="2000"/>
</set>

接下來，創建一個 function 將定義 animation 並發生更改

private fun animateInformationBanner(information: List<String>, start: Int = 0) : Animation {
    var index = start
    val animation = AnimationUtils.loadAnimation(binding.bannerInformation.context, R.anim.banner_information_animation)
    animation.setAnimationListener(object: Animation.AnimationListener {
        override fun onAnimationStart(animation: Animation?) {
            binding.bannerInformation.text = information[index % information.size]
        }

        override fun onAnimationEnd(animation: Animation?) {
            index++
            binding.bannerInformation.text = null
            binding.bannerInformation.startAnimation(animation)
        }

        override fun onAnimationRepeat(animation: Animation?) {
            TODO("Not yet implemented")
        }
    })

    return animation
}

最后，將 animation 應用到 TextView

homeViewModel.bannerInformation.observe(viewLifecycleOwner, { informationList ->
    binding.bannerInformation.startAnimation(animateInformationBanner(informationList))
})