CODEWITHSUNDEEP
android
VCODE
VCODE

Reputation: 700

How to animate an image from right to left, and left to right of the screen

I am trying to figure out how to animate an image from left to right, and then from right to left.

For example imagine the following image:

enter image description here

At full resolution, the width of the image would exceed the width of the screen. So initially, only the left side of the image should be visible, but as the animation is running, slowly the right side becomes visible, eg.:

enter image description here

Once the right side of the image was fully uncovered, the animation starts in reverse:

enter image description here

Any ideas how to achieve this?
Android APIs or any techniques would be of great help.

Upvotes: 1

Views: 1138

Answers (2)

Peppinhood
Peppinhood

Reputation: 39

Try with TranslateAnimation:

First, you have to know how big is the view:

ImageView picture = findViewById(R.id.picture); int pictureWidth = picture.getWidth();

    private void animation(View view, float pictureWidth) {
            
            Animation offSet = new TranslateAnimation(0, - moveTo, 0, 0);
            offSet.setInterpolator(new AccelerateDecelerateInterpolator()); // just to make a smooth movement
            offSet.setDuration(durationInMillis);

    }

The code above will move to the left showing the right side of the image, you can add something similar to reverse the movement.

There are for sure better and more complete solutions, this is just (I think) the easier.

Upvotes: 2

AdisAlagic
AdisAlagic

Reputation: 538

Using ObjectAnimator.

Well, I didn't really know, how to size image in without cropping, so I made view's width 1000dp.

Here is solution:

        ImageView imageView = findViewById(R.id.imageView);
        imageView.post(() -> {
            Point point = new Point();
            getWindowManager().getDefaultDisplay().getSize(point);
            float width = imageView.getMeasuredWidth();
            ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView, "translationX", 0, -(width - point.x));
            objectAnimator.setRepeatMode(ValueAnimator.REVERSE);
            objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
            objectAnimator.setDuration(10000);
            objectAnimator.start();
        });

Let me explain. First, I get size of device.

Point point = new Point();
getWindowManager().getDefaultDisplay().getSize(point);

Then, I get width of view and creating ObjectAnimator

float width = imageView.getMeasuredWidth();
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView, "translationX", 0, -(width - point.x));

First argument is a view, that will be animated. Second argument tells objectAnimator what method (in this case setter) to use. We use translationX, so objectAnimator use setTranslationX(). All other arguments tells objectAnimator from where to where it should animate.

We substracting point.x from width for animation stops when edge of image is shown. Else, imageView will slide to the left until image disappears.

For example:

ObjectAnimator.ofFloat(imageView, "translationX", 0, 200, 100, 300);

says that image should go by axis X to the point 0, then 200, then 100 and in the end 300.

objectAnimator.setRepeatMode(ValueAnimator.REVERSE);

tells that after animation done, do it again, but in reverse.

objectAnimator.setRepeatCount(ValueAnimator.INFINITE);

tells that animation must repeat itself infinitely.

objectAnimator.setDuration(10000);

Duration of the animation in milliseconds.

Upvotes: 2

Related Questions