【问题标题】:Android right to left textview sliding animationAndroid从右到左textview滑动动画
【发布时间】:2021-07-05 09:37:17
【问题描述】:

我目前正在构建一个服装店应用程序,我想要实现的一个功能是在主页片段顶部的一种信息横幅。我对使用动画比较陌生,但我很确定这是最好的选择。

我有一个字符串列表,如下所示:

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

我希望为此必须使用两个不同的动画文件,所以我写了以下内容:

居中权

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

不幸的是,我不知道如何真正让它工作,非常感谢一些帮助。

编辑

我使用了视图绑定和将信息存储为LiveData&lt;List&lt;String&gt;&gt; 的视图模型,并且动画的设置在onCreateView 函数中完成。

我的做法是这样的:

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
}

【问题讨论】:

  • 你有没有尝试过?例如,您是否设法让一个 TextView 制作动画?那里有很多教程。
  • 我有,但是,它在 3 秒后滑出屏幕,然后什么也没有发生。没有新的动画或任何东西
  • 一定要确保你在问题中包含你的代码。目前你只是要求我们为你写这一切,这不应该被鼓励。
  • 问题已被编辑,我的实施基本失败^^'

标签: android kotlin animation slide


【解决方案1】:

我找到了一个解决我的问题的方法,这似乎是一个 hacky 解决方案,但到目前为止它确实有效。

首先,创建一个动画资源文件,做你想要的动画

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

接下来,创建一个函数来定义动画和发生的变化

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
}

最后,将动画应用到 TextView

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

【讨论】:

    猜你喜欢
    • 2011-07-06
    • 1970-01-01
    • 2015-07-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多