Android动画：如何使背景连续移动？

Question

我想做的是水平移动背景并使其无限重复。

我尝试使用ImageSwitcher和动画来实现此效果，但无法成功。这是我目前的代码：

public class MainActivity extends AppCompatActivity implements ViewSwitcher.ViewFactory {

    private Animation animSlide;
    private ImageSwitcher image;
    private ImageView imagePop;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        image = (ImageSwitcher) findViewById(R.id.image_switcher);

        image.setFactory(this);
        image.setImageResource(R.drawable.zc06);
        Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
        in.setDuration(10000);
        Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
        out.setDuration(10000);
        image.setInAnimation(in);
        image.setOutAnimation(out);
        Timer timer = new Timer();
        timer.scheduleAtFixedRate(new TimerTask() {

            @Override
            public void run() {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        image.setImageResource(R.drawable.zc06);
                    }
                });
            }

        }, 0, 10000);

        Animation mZoomInAnimation = AnimationUtils.loadAnimation(this, R.anim.zoom_in);

        Animation mZoomOutAnimation = AnimationUtils.loadAnimation(this, R.anim.zoom_out);
        imagePop.startAnimation(mZoomInAnimation);
        imagePop.startAnimation(mZoomOutAnimation);

    }

    @Override
    public View makeView() {
        ImageView myView = new ImageView(getApplicationContext());
        return myView;
    }
}

- Praveen Pandey

---

为什么你在使用视图动画？你真的不应该再使用它们了... 相反，应该使用新的动画 API。无论如何，你可以通过在布局中拥有两个 ImageView 并使用 ValueAnimator 来平移它们来轻松创建这样的动画。请参见我的答案以获取更多信息。 - Xaver Kapeller

Answer 1

为什么不尝试自己动画背景而不使用ViewSwitcher？你只需要一个简单的ValueAnimator：

首先在布局中添加两个相同的ImageViews，并将相同的背景图像设置给它们：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/background_one"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background"/>

    <ImageView
        android:id="@+id/background_two"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background"/>

</FrameLayout>

然后使用 ValueAnimator 来动画化它们的 translationX 属性，但是将它们的偏移量设置为它们的宽度：

然后使用 ValueAnimator 来动画化它们的 translationX 属性，但是将它们的偏移量设置为它们的宽度：

final ImageView backgroundOne = (ImageView) findViewById(R.id.background_one);
final ImageView backgroundTwo = (ImageView) findViewById(R.id.background_two);

final ValueAnimator animator = ValueAnimator.ofFloat(0.0f, 1.0f);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());
animator.setDuration(10000L);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        final float progress = (float) animation.getAnimatedValue();
        final float width = backgroundOne.getWidth();
        final float translationX = width * progress;
        backgroundOne.setTranslationX(translationX);
        backgroundTwo.setTranslationX(translationX - width);
    }
});
animator.start();

这将导致一种连续动画，无限重复背景，并且应该看起来像这样:

- Xaver Kapeller

---

如果你想要减慢动画速度，增加持续时间即可！ :-) - Sipty

您可以通过更改ValueAnimator.ofFloat(0.0f, -1.0f)和backgroundTwo.setTranslation(translation + width)来反转动画。 - Samuel Robert

工作得非常好，谢谢！+1 - Ely Dantas

Answer 2

你可以使用AndroidScrollingImageView库，只需定义速度和可绘制的源即可。

<com.q42.android.scrollingimageview.ScrollingImageView
    android:id="@+id/scrolling_background"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    scrolling_image_view:speed="1dp"
    scrolling_image_view:src="@drawable/scrolling_background" />

编辑:

如@Cliff Burton所提到的，如果您想要垂直滚动，可以将视图旋转90度。

- Mohamed Ibrahim

---

这个有没有办法垂直滚动？ - Cliff Burton

@CliffBurton 我之前没有尝试过，但你可以试着玩一下，也许你可以在XML代码中添加方向，或者也许有一种方法可以在Java代码中实现，但这些只是猜测。 - Mohamed Ibrahim

我刚刚意识到，如果你想垂直滚动，可以将视图旋转90度...如果你愿意，你可以用这个解决方案更新你的答案 ;) - Cliff Burton

@CliffBurton 怎样将视图旋转90度？ - bhanu kaushik

@bhanukaushik 我在xml布局中的ScrollingImageView视图设置android:rotation="90"参数，成功将视图旋转。 - Cliff Burton

滚动图片视图：无法通过程序设置图像。 - Midhilaj