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

Question

我正在制作一个非常基本的动画，该动画在容器内从左到右为球 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>

Answer 1

从左到右动画

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

希望对您有所帮助。

Answer 2

有点老套，但就是这样：

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

基本上我们所做的是同时根据父级大小和自身大小平移球

Answer 3

像这样声明动画将在内部使用 Animation API. It's suggested to refrain from using Animation API if possible. I'm not sure whether it's possible to achieve that using by xml only, that's why I would suggest using Animator API instead, particularly ViewPropertyAnimator。


    ball.setOnClickListener {

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

        it.animate().translationX(animateToX)

    }

这是输出：

Answer 4

在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()

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

Animating an ImageView from left to right - clips off the right using 100%p

animation

android

android-animation

android-layout

android-view