Example of Android implementing cyclic translation animation

  • 2020-06-23 01:52:31
  • OfStack

The implementation USES 1 background image as a loop from left to right translation animation.

1. Implement two animation xml files, one starting at -100%p and one at 0%p. Set the repeat property to loop and repeat.


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">
    <translate android:fromXDelta="0%p" android:toXDelta="100%p"
        android:repeatMode="restart"
        android:interpolator="@android:anim/linear_interpolator"
        android:repeatCount="infinite"
        android:duration="30000" />
</set>


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">
    <translate android:fromXDelta="-100%p" android:toXDelta="0%p"
        android:repeatMode="restart"
        android:interpolator="@android:anim/linear_interpolator"
        android:repeatCount="infinite"
        android:duration="30000" />
</set>

2. Put two one-sample view in the layout of view as the background, and the animation of view corresponds to the two animation above respectively.

        <ImageView
             android:id="@+id/animation_top_left"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:contentDescription="@string/logo"
             android:src="@drawable/home_animation_bg" />
         <ImageView
             android:id="@+id/animation_top_right"  android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:contentDescription="@string/logo"
             android:src="@drawable/home_animation_bg" />


Animation anim = AnimationUtils.loadAnimation(mContext, R.anim.home_animation);
ImageView animationTopRightView = (ImageView)this.findViewById(R.id.animation_top_right);
animationTopRightView.startAnimation(anim);


Animation anim2 = AnimationUtils.loadAnimation(mContext, R.anim.home_animation2);
ImageView animationTopLeftView = (ImageView)this.findViewById(R.id.animation_top_left);
animationTopLeftView.startAnimation(anim2);


Related articles: