Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rotate an Imagewith Animation

The two states of the image

What I Have

I have an arrow image (like the left one). When the user clicks on it, it should rotate 180 degree with an animation and should look like the right one.

What I Have Done

private void rotate(float degree, final int toggleV) {          final RotateAnimation rotateAnim = new RotateAnimation(0.0f, degree,                 RotateAnimation.RELATIVE_TO_SELF, 0.5f,                 RotateAnimation.RELATIVE_TO_SELF, 0.5f);          rotateAnim.setDuration(500);         toggle.startAnimation(rotateAnim);         rotateAnim.setAnimationListener(new Animation.AnimationListener() {              @Override             public void onAnimationStart(Animation animation) {              }              @Override             public void onAnimationEnd(Animation animation) {                   if (toggleV == 1)                     toggle.setImageResource(R.drawable.toggle_up);                 else                     toggle.setImageResource(R.drawable.toggle_down);             }              @Override             public void onAnimationRepeat(Animation animation) {              }         });     } 

The Problem

I see that the animation works fine but there is a little flicker while setting the image. May be because of the time difference when the animation ends and the image is set.

How can I remove this flicker issue? Do you have any better approach to do this?

like image 541
Aritra Roy Avatar asked May 13 '15 08:05

Aritra Roy


People also ask

How do I rotate an image in a GIF?

Use VEED. All you need to do is upload your GIF file, click on the image, and drag to your desired rotation. VEED is a free online software that allows you to edit video files in GIF format as well as MP4, MOV, AVI, WMV, and FLV. You can rotate, invert, and flip your animated GIF or GIF image in a few easy steps.

How do I rotate an image in HTML?

Syntax: transform: rotate(90deg);


2 Answers

First of all, what is you minimum SDK requirement? In case it's at least Android 3.0, you can use the newer animation framework, and animate your Image with something like this:

imageView.animate().rotation(180).start(); 

About the flicker: I wouldn't reset the source image of the ImageView after the rotation, I'd just leave in the original and make sure that the rotation animation fills after the animation, leaving the image rotated. The flicker is most likely caused by the View's relayout/redraw upon changing the source image.

Further visual artifacts (flicker?) may be caused because the original-rotated image and the rotated static image might differ in a few pixels.

like image 158
Zsombor Erdődy-Nagy Avatar answered Sep 29 '22 14:09

Zsombor Erdődy-Nagy


If I were you I'd use ViewPropertyAnimator (available from API 12). Its syntax is more straight forward IMO.
Usage would be:

toggle.animate().rotation(0.5f); 
like image 26
Alex.F Avatar answered Sep 29 '22 12:09

Alex.F