从左到右为 ImageView 设置动画 - 使用 100%p 从右侧剪辑答案

【问题标题】：Animating an ImageView from left to right - clips off the right using 100%p从左到右为 ImageView 设置动画 - 使用 100%p 从右侧剪辑
【发布时间】：2019-12-02 22:25:11
【问题描述】：

我正在制作一个非常基本的动画，它在容器内从左到右为球 ImageView 设置动画。动画效果很好，但是当它动画到 100%p 时，球会从容器视图中切出。

动画的ImageView是一个静态的50dp。

有没有什么办法可以做 100%p-50dp 之类的事情来防止球从容器中掉出来？

<?xml version="1.0" encoding="utf-8"?>
<set
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fillAfter="true"
>
<!--animate the ball-->
    <translate
            android:fromXDelta="0%p"
            android:toXDelta="100%p"
            android:duration="900"
            android:repeatMode="reverse"
            android:repeatCount="infinite"
    />
</set>

【问题讨论】：

标签： android android-layout animation android-animation android-view

【解决方案1】：

有点老套，但就是这样：

<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fillAfter="true"
>
<!--animate the ball-->
<translate
    android:fromXDelta="0"
    android:toXDelta="-100%"
    android:duration="900"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    />
<translate
    android:fromXDelta="0%"
    android:toXDelta="100%p"
    android:duration="900"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    />
</set>

基本上我们所做的就是同时通过父尺寸和自身尺寸来翻译球

【讨论】：

【解决方案2】：

这样声明动画将在内部使用Animation API。如果可能，建议不要使用Animation API。我不确定是否可以仅通过 xml 来实现，这就是为什么我建议使用 Animator API 代替，特别是 ViewPropertyAnimator。


    ball.setOnClickListener {

        val animateToX = if (it.translationX == 0F) container.width - ball.width.toFloat()
        else 0F

        it.animate().translationX(animateToX)

    }

这是输出：

【讨论】：

【解决方案3】：

要在 x 位置（从左到右）平移到特定距离，这里 200f 是平移距离。

val animator = ObjectAnimator.ofFloat(star, View.TRANSLATION_X, 200f)
animator.start()

要显示平滑或缓慢的翻译，请使用持续时间属性（默认持续时间为 300）。

val animator = ObjectAnimator.ofFloat(star, View.TRANSLATION_X, 200f)
animator.duration = 1000
animator.start()

要翻译回相同的位置，请使用 repetCout 和 repeatMode。

val animator = ObjectAnimator.ofFloat(star, View.TRANSLATION_X, 200f)
animator.duration = 1000
animator.repeatCount = 1
animator.repeatMode = ObjectAnimator.REVERSE
animator.start()

【讨论】：

【解决方案4】：

从左到右的动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:duration="800"
        android:fromXDelta="0%p"
        android:toXDelta="75%p" />

</set>

希望对你有所帮助。

【讨论】：