How To Create A Looping Animation By Continuous Translating An Image?

By using a repeating image like this, is it possible to create animation like this?

Solution 1:

I figured it out MainActivity.java:

publicclassMainActivityextendsActivity {

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        finalintscreenWidth= getScreenDimensions(this).x;
        finalintwaveImgWidth= getResources().getDrawable(R.drawable.wave).getIntrinsicWidth();
        intanimatedViewWidth=0;
        while (animatedViewWidth < screenWidth) {
            animatedViewWidth += waveImgWidth;
        }
        animatedViewWidth += waveImgWidth;


        ViewanimatedView= findViewById(R.id.animated_view);
        FrameLayout.LayoutParamslayoutParams= (FrameLayout.LayoutParams) animatedView.getLayoutParams();
        layoutParams.width = animatedViewWidth;
        animatedView.setLayoutParams(layoutParams);


        AnimationwaveAnimation=newTranslateAnimation(0, -waveImgWidth, 0, 0);
        waveAnimation.setInterpolator(newLinearInterpolator());
        waveAnimation.setRepeatCount(Animation.INFINITE);
        waveAnimation.setDuration(2500);

        animatedView.startAnimation(waveAnimation);
    }

    publicstatic Point getScreenDimensions(Context context) {
        intwidth= context.getResources().getDisplayMetrics().widthPixels;
        intheight= context.getResources().getDisplayMetrics().heightPixels;
        returnnewPoint(width, height);
    }

}

activity_main.xml:

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent" ><Viewandroid:id="@+id/animated_view"android:layout_width="match_parent"android:layout_height="74dp"android:background="@drawable/wave_repeating_bg" /></FrameLayout>

wave_repeating_bg.xml:

<?xml version="1.0" encoding="utf-8"?><bitmapxmlns:android="http://schemas.android.com/apk/res/android"android:src="@drawable/wave"android:tileMode="repeat" />

drawable-xxhdpi/wave.jpg:

Solution 2:

bottom to top infinite animation i implement this way. it's too easy just use two image and animated one after another.

Inside MainActivity.java

        imageView_background1 = (ImageView) findViewById(R.id.imageView_background1);
        imageView_background1.setVisibility(View.GONE);
        imageView_background1.setVisibility(View.VISIBLE);
        AnimationmAnimation=newTranslateAnimation(
                TranslateAnimation.ABSOLUTE, 0f,
                TranslateAnimation.ABSOLUTE, 0f,
                TranslateAnimation.RELATIVE_TO_PARENT, 0f,
                TranslateAnimation.RELATIVE_TO_PARENT, -1f);
        mAnimation.setDuration(10000);
        mAnimation.setRepeatCount(-1);
        mAnimation.setRepeatMode(Animation.INFINITE);
        mAnimation.setInterpolator(newLinearInterpolator());
        imageView_background1.setAnimation(mAnimation);

        imageView_background2 = (ImageView) findViewById(R.id.imageView_background2);
        imageView_background2.setVisibility(View.VISIBLE);
        AnimationmAnimation1=newTranslateAnimation(
                TranslateAnimation.ABSOLUTE, 0f,
                TranslateAnimation.ABSOLUTE, 0f,
                TranslateAnimation.RELATIVE_TO_SELF, 1f,
                TranslateAnimation.RELATIVE_TO_SELF, 0f);
        mAnimation1.setDuration(10000);
        mAnimation1.setRepeatCount(-1);
        mAnimation1.setRepeatMode(Animation.INFINITE);
        mAnimation1.setInterpolator(newLinearInterpolator());
        imageView_background2.setAnimation(mAnimation1);

Inside activity_main.xml (use same image both imageview)

<?xml version="1.0" encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@drawable/ic_splash_background"><ImageViewandroid:id="@+id/imageView_background1"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@drawable/ic_splash_categories" /><ImageViewandroid:id="@+id/imageView_background2"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@drawable/ic_splash_categories" /></FrameLayout>