How to make a smooth image rotation in Android

Question

I m using a RotateAnimation to rotate an image that I m using as a custom cyclical spinner in Android   Here s my rotate indefinitely xml file  which I placed in res anim     lt  xml version  1 0  encoding  UTF-8   gt   lt rotate     xmlns android  http   schemas android com apk res android      android fromDegrees  0      android toDegrees  360      android pivotX  50       android pivotY  50       android repeatCount  infinite      android duration  1200    gt        When I apply this to my ImageView using AndroidUtils loadAnimation    it works great     spinner startAnimation       AnimationUtils loadAnimation activity  R anim rotate indefinitely       The one problem is that the image rotation seems to pause at the top of every cycle   In other words  the image rotates 360 degrees  pauses briefly  then rotates 360 degrees again  etc   I suspect that the problem is that the animation is using a default interpolator like android iterpolator   android anim accelerate interpolator   AccelerateInterpolator   but I don t know how to tell it not to interpolate the animation   How can I turn off interpolation  if that is indeed the problem  to make my animation cycle smoothly

User · Accepted Answer

You are right about AccelerateInterpolator; you should use LinearInterpolator instead.

You can use the built-in android.R.anim.linear_interpolator from your animation XML file with android:interpolator="@android:anim/linear_interpolator".

Or you can create your own XML interpolation file in your project, e.g. name it res/anim/linear_interpolator.xml:

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

And add to your animation XML:

android:interpolator="@anim/linear_interpolator"

Special Note: If your rotate animation is inside a set, setting the interpolator does not seem to work. Making the rotate the top element fixes it. (this will save your time.)

User · Answer

This works fine   lt  xml version  1 0  encoding  UTF-8   gt   lt rotate xmlns android  http   schemas android com apk res android      android duration  1600      android fromDegrees  0      android interpolator   android anim linear interpolator      android pivotX  50       android pivotY  50       android repeatCount  infinite      android toDegrees  358    gt    To reverse rotate    lt  xml version  1 0  encoding  UTF-8   gt   lt rotate xmlns android  http   schemas android com apk res android      android duration  1600      android fromDegrees  358      android interpolator   android anim linear interpolator      android pivotX  50       android pivotY  50       android repeatCount  infinite      android toDegrees  0    gt

User · Answer

I had this problem as well  and tried to set the linear interpolator in xml without success  The solution that worked for me was to create the animation as a RotateAnimation in code   RotateAnimation rotate   new RotateAnimation 0  180  Animation RELATIVE TO SELF  0 5f  Animation RELATIVE TO SELF  0 5f   rotate setDuration 5000   rotate setInterpolator new LinearInterpolator      ImageView image   ImageView  findViewById R id imageView    image startAnimation rotate

User · Answer

Try to use more than 360 to avoid restarting    I use 3600 insted of 360 and this works fine for me    lt rotate xmlns android  http   schemas android com apk res android      android fromDegrees  0      android toDegrees  3600      android interpolator   android anim linear interpolator      android repeatCount  infinite      android duration  8000      android pivotX  50       android pivotY  50     gt

User · Answer

ObjectAnimator ofFloat view  View ROTATION  0f  360f  setDuration 300  start      Try this

User · Answer

In Android  if you want to animate an object and make it move an object from location1 to location2  the animation API figures out the intermediate locations  tweening  and then queues onto the main thread the appropriate move operations at the appropriate times using a timer  This works fine except that the main thread is usually used for many other things     painting  opening files  responding to user inputs etc  A queued timer can often be delayed  Well written programs will always try to do as many operations as possible in background  non main  threads however you can   t always avoid using the main thread  Operations that require you to operate on a UI object always have to be done on the main thread  Also  many APIs will funnel operations back to the main thread as a form of thread-safety   Views are all drawn on the same GUI thread which is also used for all user interaction   So if you need to update GUI rapidly or if the rendering takes too much time and affects user experience then use SurfaceView   Example of rotation image   public class MySurfaceView extends SurfaceView implements SurfaceHolder Callback       private DrawThread drawThread       public MySurfaceView Context context            super context           getHolder   addCallback this               Override     public void surfaceChanged SurfaceHolder holder  int format  int width              int height                   Override     public void surfaceCreated SurfaceHolder holder            drawThread   new DrawThread getHolder    getResources             drawThread setRunning true           drawThread start                Override     public void surfaceDestroyed SurfaceHolder holder            boolean retry   true          drawThread setRunning false           while  retry                try                   drawThread join                    retry   false                catch  InterruptedException e                                      class DrawThread extends Thread      private boolean runFlag   false      private SurfaceHolder surfaceHolder      private Bitmap picture      private Matrix matrix      private long prevTime       public DrawThread SurfaceHolder surfaceHolder  Resources resources           this surfaceHolder   surfaceHolder           picture   BitmapFactory decodeResource resources  R drawable icon            matrix   new Matrix            matrix postScale 3 0f  3 0f           matrix postTranslate 100 0f  100 0f            prevTime   System currentTimeMillis               public void setRunning boolean run            runFlag   run              Override     public void run             Canvas canvas          while  runFlag                long now   System currentTimeMillis                long elapsedTime   now - prevTime              if  elapsedTime  gt  30                    prevTime   now                  matrix preRotate 2 0f  picture getWidth     2  picture getHeight     2                             canvas   null              try                   canvas   surfaceHolder lockCanvas null                   synchronized  surfaceHolder                        canvas drawColor Color BLACK                       canvas drawBitmap picture  matrix  null                                                finally                   if  canvas    null                        surfaceHolder unlockCanvasAndPost canvas                                                       activity   public class SurfaceViewActivity extends Activity           Called when the activity is first created          Override     public void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView new MySurfaceView this

User · Answer

No matter what I tried  I couldn t get this to work right using code  and setRotation  for smooth rotation animation   What I ended up doing was making the degree changes so small  that the small pauses are unnoticeable  If you don t need to do too many rotations  the time to execute this loop is negligible   The effect is a smooth rotation           float lastDegree   0 0f          float increment   4 0f          long moveDuration   10          for int a   0  a  lt  150  a                          rAnim   new RotateAnimation lastDegree   increment    float a    Animation RELATIVE TO SELF  0 5f  Animation RELATIVE TO SELF  0 5f               rAnim setDuration moveDuration               rAnim setStartOffset moveDuration   a               lastDegree    increment    float a                 AnimationSet  animation  addAnimation rAnim

User · Answer

Rotation Object programmatically      clockwise rotation          public void rotate Clockwise View view            ObjectAnimator rotate   ObjectAnimator ofFloat view   rotation   180f  0f             rotate setRepeatCount 10           rotate setDuration 500           rotate start               AntiClockwise rotation     public void rotate AntiClockwise View view            ObjectAnimator rotate   ObjectAnimator ofFloat view   rotation   0f  180f             rotate setRepeatCount 10           rotate setDuration 500           rotate start             view is object of your ImageView or other widgets   rotate setRepeatCount 10   use to repeat your rotation   500 is your animation time duration

User · Answer

In Kotlin    ivBall setOnClickListener View OnClickListener                  Animate using XML                val rotateAnimation   AnimationUtils loadAnimation activity  R anim rotate indefinitely                 OR using Code             val rotateAnimation   RotateAnimation                      0f  359f                      Animation RELATIVE TO SELF  0 5f                      Animation RELATIVE TO SELF  0 5f                            rotateAnimation duration   300             rotateAnimation repeatCount   2                Either way you can add Listener like this             rotateAnimation setAnimationListener object   Animation AnimationListener                    override fun onAnimationStart animation  Animation                                        override fun onAnimationRepeat animation  Animation                                        override fun onAnimationEnd animation  Animation                          val rand   Random                       val ballHit   rand nextInt 50    1                     Toast makeText context   ballHit       ballHit  Toast LENGTH SHORT  show                                                 ivBall startAnimation rotateAnimation

User · Answer

Pruning the  lt set gt -Element that wrapped the  lt rotate gt -Element solves the problem   Thanks to Shalafi   So your Rotation ccw xml should loook like this    lt  xml version  1 0  encoding  utf-8   gt    lt rotate     xmlns android  http   schemas android com apk res android      android fromDegrees  0      android toDegrees  -360      android pivotX  50       android pivotY  50       android duration  2000      android fillAfter  false      android startOffset  0      android repeatCount  infinite      android interpolator   android anim linear interpolator        gt

User · Answer

Is it possible that because you go from 0 to 360  you spend a little bit more time at 0 360 than you are expecting  Perhaps set toDegrees to 359 or 358

User · Answer

If you are using a set Animation like me you should add the interpolation inside the set tag    lt set xmlns android  http   schemas android com apk res android  android interpolator   android anim linear interpolator  gt     lt rotate     android duration  5000      android fromDegrees  0      android pivotX  50       android pivotY  50       android repeatCount  infinite      android startOffset  0      android toDegrees  360    gt     lt alpha     android duration  200      android fromAlpha  0 7      android repeatCount  infinite      android repeatMode  reverse      android toAlpha  1 0    gt    lt  set gt    That Worked for me

User · Answer

Maybe  something like this will help   Runnable runnable   new Runnable          Override     public void run             imageView animate   rotationBy 360  withEndAction this  setDuration 3000  setInterpolator new LinearInterpolator    start              imageView animate   rotationBy 360  withEndAction runnable  setDuration 3000  setInterpolator new LinearInterpolator    start      By the way  you can rotate by more than 360 like   imageView animate   rotationBy 10000

User · Answer

Try using toDegrees  359  since 360   and 0   are the same

User · Answer

As hanry has mentioned above putting liner iterpolator is fine  But if rotation is inside a set you must put android shareInterpolator  false  to make it smooth    lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android    android shareInterpolator  false     gt   lt rotate     android interpolator   android anim linear interpolator      android duration  300      android fillAfter  true      android repeatCount  10      android repeatMode  restart      android fromDegrees  0      android toDegrees  360      android pivotX  50       android pivotY  50     gt   lt scale xmlns android  http   schemas android com apk res android      android interpolator   android anim linear interpolator      android duration  3000      android fillAfter  true      android pivotX  50       android pivotY  50       android fromXScale  1 0      android fromYScale  1 0      android toXScale  0      android toYScale  0    gt   lt  set gt    If Sharedinterpolator being not false  the above code gives glitches

User · Answer

private fun rotateTheView view  View   startAngle  Float  endAngle  Float        val rotate   ObjectAnimator ofFloat view   rotation   startAngle  endAngle        rotate setRepeatCount 10       rotate duration   400     rotate start

[android] How to make a smooth image rotation in Android?

Examples related to android

Examples related to animation

Examples related to view