Interpolator Interpolator for android Animation

Keywords: Java xml Android less

Interpolator time interpolation class defines the speed of animation transformation. Acceleration, deceleration and repetition of alpha/scale/translate/rotate animation can be achieved. The Interpolator class is actually an empty interface inherited from TimeInterpolator, which allows animation to perform non-linear motion transformation, such as acceleration and speed limit. There is only one method float in the interface. getInterpolation(float input) method. The incoming value is a value of 0.0 to 1.0, and the return value can be less than 0.0 or greater than 1.0.






Common inheritance classes


  1. Accelerate Decelerate Interpolator================================= Animation starts and ends at a slower rate change, accelerating in the middle.
  2. Accelerate Interpolator================================================= where the animation starts, the rate changes slowly and then starts to accelerate.  
  3. AnticipateInterpolator ============================================== Starts backward and then flings forward.
  4. Anticipate Overshoot Interpolator================================ Starts backward and then throws forward a certain value and returns the final value.
  5. BounceInterpolator=============================================== pops up at the end of the animation.
  6. Cycle Interpolator========================================== The number of times the animation is played in a loop, and the rate changes along the sinusoidal curve.
  7. Decelerate Interpolator================================================== Fast and slow at the beginning of the animation.
  8. Linear Interpolator================================================ changes at a constant rate.
  9. Overshoot Interpolator================================================= Throw forward a certain value and return to the original position.
  10. Path Interpolator================================================================= New, that is, you can define the path coordinates and then run according to the path coordinates; note that the coordinates are not XY, but one-way, that is, I can bounce back from 0 to 1, then 0.5 to 0.7 to 0.3, until the end of the time.

Several commonly used interpolator source codes:

Linear Interpolator Linear Interpolator, which returns the input value directly.

  1. /** 
  2.  * An interpolator where the rate of change is constant 
  3.  * 
  4.  */  
  5. @HasNativeInterpolator  
  6. public class LinearInterpolator implements Interpolator, NativeInterpolatorFactory {  
  7.   
  8.     public LinearInterpolator() {  
  9.     }  
  10.       
  11.     public LinearInterpolator(Context context, AttributeSet attrs) {  
  12.     }  
  13.       
  14.     public float getInterpolation(float input) {  
  15.         return input;  
  16.     }  
  17.   
  18.     /** @hide */  
  19.     @Override  
  20.     public long createNativeInterpolator() {  
  21.         return NativeInterpolatorFactoryHelper.createLinearInterpolator();  
  22.     }  
  23. }  




DecelerateInterpolator

Animation attributes can be set by XML, and mFactor variables can be set by XML. The default value is 1.0; the larger the value, the faster it changes; the result is that it starts faster, and the result is slower. getInterpolation(float) describes a parabolic equation in a junior high school.



  1. /** 
  2.  * An interpolator where the rate of change starts out quickly and 
  3.  * and then decelerates. 
  4.  * 
  5.  */  
  6. @HasNativeInterpolator  
  7. public class DecelerateInterpolator implements Interpolator, NativeInterpolatorFactory {  
  8.     public DecelerateInterpolator() {  
  9.     }  
  10.   
  11.     /** 
  12.      * Constructor 
  13.      * 
  14.      * @param factor Degree to which the animation should be eased. Setting factor to 1.0f produces 
  15.      *        an upside-down y=x^2 parabola. Increasing factor above 1.0f makes exaggerates the 
  16.      *        ease-out effect (i.e., it starts even faster and ends evens slower) 
  17.      */  
  18.     public DecelerateInterpolator(float factor) {  
  19.         mFactor = factor;  
  20.     }  
  21.   
  22.     public DecelerateInterpolator(Context context, AttributeSet attrs) {  
  23.         this(context.getResources(), context.getTheme(), attrs);  
  24.     }  
  25.   
  26.     /** @hide */  
  27.     public DecelerateInterpolator(Resources res, Theme theme, AttributeSet attrs) {  
  28.         TypedArray a;  
  29.         if (theme != null) {  
  30.             a = theme.obtainStyledAttributes(attrs, R.styleable.DecelerateInterpolator, 00);  
  31.         } else {  
  32.             a = res.obtainAttributes(attrs, R.styleable.DecelerateInterpolator);  
  33.         }  
  34.   
  35.         mFactor = a.getFloat(R.styleable.DecelerateInterpolator_factor, 1.0f);  
  36.   
  37.         a.recycle();  
  38.     }  
  39.   
  40.     public float getInterpolation(float input) {  
  41.         float result;  
  42.         if (mFactor == 1.0f) {  
  43.             result = (float)(1.0f - (1.0f - input) * (1.0f - input));  
  44.         } else {  
  45.             result = (float)(1.0f - Math.pow((1.0f - input), 2 * mFactor));  
  46.         }  
  47.         return result;  
  48.     }  
  49.   
  50.     private float mFactor = 1.0f;  
  51.   
  52.     /** @hide */  
  53.     @Override  
  54.     public long createNativeInterpolator() {  
  55.         return NativeInterpolatorFactoryHelper.createDecelerateInterpolator(mFactor);  
  56.     }  
  57. }  






Version implementation of C++:

  1. float Elastic::easeIn (float t, float b , float c, float d) {  
  2.  <span style="white-space:pre">   </span>if (t==0) return b;  if ((t/=d)==1) return b+c;    
  3.  <span style="white-space:pre">   </span>float p=d*.3f;  
  4.  <span style="white-space:pre">   </span>float a=c;   
  5.  <span style="white-space:pre">   </span>float s=p/4;  
  6.  <span style="white-space:pre">   </span>float postFix =a*pow(2,10*(t-=1)); // this is a fix, again, with post-increment operators  
  7.  <span style="white-space:pre">   </span>return -(postFix * sin((t*d-s)*(2*PI)/p )) + b;  
  8. }  
  9.    
  10. float Elastic::easeOut(float t,float b , float c, float d) {  
  11.  if (t==0) return b;  if ((t/=d)==1) return b+c;    
  12.  float p=d*.3f;  
  13.  float a=c;   
  14.  float s=p/4;  
  15.  return (a*pow(2,-10*t) * sin( (t*d-s)*(2*PI)/p ) + c + b);   
  16. }  
  17.    
  18. float Elastic::easeInOut(float t,float b , float c, float d) {  
  19.  if (t==0) return b;  if ((t/=d/2)==2) return b+c;   
  20.  float p=d*(.3f*1.5f);  
  21.  float a=c;   
  22.  float s=p/4;  
  23.    
  24.  if (t < 1) {  
  25.  float postFix =a*pow(2,10*(t-=1)); // postIncrement is evil  
  26.  return -.5f*(postFix* sin( (t*d-s)*(2*PI)/p )) + b;  
  27.  }   
  28.  float postFix =  a*pow(2,-10*(t-=1)); // postIncrement is evil  
  29.  return postFix * sin( (t*d-s)*(2*PI)/p )*.5f + c + b;  
  30. }  
Meaning of the parameter:

  • t - Current time in animation
  • b - Start Value
  • c - End Value
  • d - Total time of animation
Look at the first three lines of Java:

  1. public class Sine {  
  2.       
  3.     public static float  easeIn(float t,float b , float c, float d) {  
  4.         return -c * (float)Math.cos(t/d * (Math.PI/2)) + c + b;  
  5.     }  
  6.       
  7.     public static float  easeOut(float t,float b , float c, float d) {  
  8.         return c * (float)Math.sin(t/d * (Math.PI/2)) + b;    
  9.     }  
  10.       
  11.     public static float  easeInOut(float t,float b , float c, float d) {  
  12.         return -c/2 * ((float)Math.cos(Math.PI*t/d) - 1) + b;  
  13.     }  
  14.       
  15. }  
Although there are Java, but how to use this ah, with the above Interpolator how to connect ah?

A simple method: first, set the total time of d to a fixed value of 1.0, the start value of b to 0.0, and the end value to 1.0, then t as float get Interpolation (float input) in the above Interpolator; pass in the value, then you can not use it.

Take a Case.

  1. /** 
  2.  * Created by Qiujuer on 2015/1/5. 
  3.  */  
  4. public class InSineInterpolator implements Interpolator{  
  5.     public static float  easeIn(float t,float b , float c, float d) {  
  6.         return -c * (float)Math.cos(t/d * (Math.PI/2)) + c + b;  
  7.     }  
  8.   
  9.     @Override  
  10.     public float getInterpolation(float input) {  
  11.         return easeIn(input, 011);  
  12.     }  
  13. }  

Use

  1. //AnimatorSet  
  2. mAnimatorSet = new AnimatorSet();  
  3. mAnimatorSet.playTogether(aPaintX, aPaintY, aRadius, aBackground);  
  4. mAnimatorSet.setInterpolator(new InSineInterpolator());  
  5. mAnimatorSet.start();  
It can be seen that the use of Android is exactly the same as that of Android. Of course, this is only a Case. You can encapsulate it freely in the specific use, provided that you don't change the main part.

[java] view plain copy
 print?
  1. /** 
  2.  * An interpolator where the rate of change starts out quickly and 
  3.  * and then decelerates. 
  4.  * 
  5.  */  
  6. @HasNativeInterpolator  
  7. public class DecelerateInterpolator implements Interpolator, NativeInterpolatorFactory {  
  8.     public DecelerateInterpolator() {  
  9.     }  
  10.   
  11.     /** 
  12.      * Constructor 
  13.      * 
  14.      * @param factor Degree to which the animation should be eased. Setting factor to 1.0f produces 
  15.      *        an upside-down y=x^2 parabola. Increasing factor above 1.0f makes exaggerates the 
  16.      *        ease-out effect (i.e., it starts even faster and ends evens slower) 
  17.      */  
  18.     public DecelerateInterpolator(float factor) {  
  19.         mFactor = factor;  
  20.     }  
  21.   
  22.     public DecelerateInterpolator(Context context, AttributeSet attrs) {  
  23.         this(context.getResources(), context.getTheme(), attrs);  
  24.     }  
  25.   
  26.     /** @hide */  
  27.     public DecelerateInterpolator(Resources res, Theme theme, AttributeSet attrs) {  
  28.         TypedArray a;  
  29.         if (theme != null) {  
  30.             a = theme.obtainStyledAttributes(attrs, R.styleable.DecelerateInterpolator, 0, 0);  
  31.         } else {  
  32.             a = res.obtainAttributes(attrs, R.styleable.DecelerateInterpolator);  
  33.         }  
  34.   
  35.         mFactor = a.getFloat(R.styleable.DecelerateInterpolator_factor, 1.0f);  
  36.   
  37.         a.recycle();  
  38.     }  
  39.   
  40.     public float getInterpolation(float input) {  
  41.         float result;  
  42.         if (mFactor == 1.0f) {  
  43.             result = (float)(1.0f - (1.0f - input) * (1.0f - input));  
  44.         } else {  
  45.             result = (float)(1.0f - Math.pow((1.0f - input), 2 * mFactor));  
  46.         }  
  47.         return result;  
  48.     }  
  49.   
  50.     private float mFactor = 1.0f;  
  51.   
  52.     /** @hide */  
  53.     @Override  
  54.     public long createNativeInterpolator() {  
  55.         return NativeInterpolatorFactoryHelper.createDecelerateInterpolator(mFactor);  
  56.     }  
  57. }  

Posted by Barand on Sun, 24 Mar 2019 15:27:30 -0700