Penetration Understanding Animation time interpolation Interpolator class

========================================================
Qiujuer
Blog:Blog.csdn.net/qiujuer
Website:Www.qiujuer.net
Open Source Library:Genius-android
Reprint Please specify Source: http://blog.csdn.net/qiujuer/article/details/42430269
========================================================

Order

• A good animation must be done by heart, what is the heart? One of the things I think is that defining the right interpolator is an expression of intentions, which is particularly evident in Google material design.
• A good animation must conform to the actual, an old word is: the stone must be subject to gravity to be elegant, or a stone like feathers in the wind is still floating ah floating that will not be.

What is interpolator about?

Speaking of Interpolator Ah, this is to start from 3 years ago, saying that that year Google, Nokia, Qiujuer three points of the world .... Haha, a joke ~

Interpolator this time interpolation class, its main use in the animation, its main function is to control the change of the target variable value of the corresponding changes.

You can understand that, now Xiao Ming to buy soy sauce, the time is 1 hours to arrive, the mileage is 1 kilometers; now Xiao Ming in the mind lest can not reach, so first ran up, but because of physical exertion so gradually slowed down, and then successfully arrived. In such a process, Xiao Ming gradually slowed down the process of abstraction is the work of interpolator, of course, interpolator can also control Xiao Ming first slowly warm up and then run faster finally reached.

These are all things that interpolator can do, and the same interpolator can control the process of bouncing a ball off the ground and bouncing it down.

The principle of interpolator?

Public interface Interpolator extends Timeinterpolator {}

You can see that this class is an empty class, so where does it operate?

/** * A Time Interpolator defines the rate of change of A animation. This allows animations * to has non-linear motion, such as acceleration and deceleration. */public interface Timeinterpolator {/** * Maps a value representing the elapsed fraction of a animation to a Val UE that represents * the interpolated fraction. This interpolated value was then multiplied by the change in * value of a animation to derive the animated value at th     E Current elapsed animation time. * * @param input A value between 0 and 1.0 indicating our current point * in the animation where 0 Represen TS the start and 1.0 represents * the end * @return the interpolation value.         This value can is more than 1.0 for * interpolators which overshoot their targets, or less than 0 for *     Interpolators that undershoot their targets. */float Getinterpolation (float input);}

Its operation in the inherited interface, there is a method in the inherited interfacefloat getinterpolation (float input);

In this method, the value passed in is a 0.0~1.0 value, and the return value can be less than 0.0 or greater than 1.0.

You can understand this: in the animation time is normal walk, you set the 200ms, now go to 100ms, then according to linear should now be half of the journey is 0.5; now pass this 0.5 to interpolator let Interpolator Tell me where Xiao Ming is when I go half time, and that is the principle of interpolator.

Common classes

Oh my every day ah, can not access Google is trouble, only from the source:

Android official offers is so 10 kinds, is 9 kinds of or 10 kinds of ah, no number wrong. respectively:

1. Acceleratedecelerateinterpolator rate changes at the beginning and end of the animation are slower, accelerating in the middle
2. Accelerateinterpolator at the beginning of the animation the rate change is slow, and then start to accelerate
3. Anticipateinterpolator starts back and then moves forward.
4. Anticipateovershootinterpolator starts back and then dumps a certain value and returns the last value.
5. Bounceinterpolator animation at the end of the play
6. Cycleinterpolator Animation Loop plays a specific number of times, rate changes along the sine curve
7. Decelerateinterpolator in the beginning of the animation and then slowly
8. Linearinterpolator change at constant rate
9. Overshootinterpolator forward a certain value before returning to its original position.
10. Pathinterpolator This is the new I said originally how to remember is 9, this name is can define the path coordinates, and then can follow the path coordinates to run; Note that the coordinates are not XY, but one direction, that is, I can start from 0~1, then bounce back 0.5 and then bounce to 0.7. There are until the end of the 0.3 until the last time. (Say it separately)

Source

Here's a few simple sources.

Linearinterpolator

@HasNativeInterpolatorpublic class Linearinterpolator implements Interpolator, Nativeinterpolatorfactory {    Public Linearinterpolator () {    } public        Linearinterpolator (context context, AttributeSet attrs) {    }        public float getinterpolation (float input) {        return input;    }    /** @hide *    /@Override public    long Createnativeinterpolator () {        return Nativeinterpolatorfactoryhelper.createlinearinterpolator ();    }}

The simplest one is because it is linear, so it returns directly.

Decelerateinterpolator

public class Decelerateinterpolator implements Interpolator, nativeinterpolatorfactory {public decelerateinterpolator () {}/** * Constructor * * @param factor degree to which the animation should is eased. Setting factor to 1.0f produces * an upside-down y=x^2 parabola. Increasing factor above 1.0f makes exaggerates the * ease-out effect (i.e., it starts even faster and ends even    s slower) */public Decelerateinterpolator (float factor) {mfactor = factor; } public Decelerateinterpolator (context context, AttributeSet Attrs) {This (Context.getresources (), Context.gett    Heme (), attrs);        }/** @hide */Public Decelerateinterpolator (Resources res, Theme Theme, AttributeSet attrs) {TypedArray A;        if (theme! = null) {a = Theme.obtainstyledattributes (attrs, r.styleable.decelerateinterpolator, 0, 0); } else {a = Res.obtainattributes (Attrs, R.styleable.decelerateinterpolator);        } mfactor = A.getfloat (R.styleable.decelerateinterpolator_factor, 1.0f);    A.recycle ();        } public float getinterpolation (float input) {float result;        if (Mfactor = = 1.0f) {result = (float) (1.0f-(1.0f-input) * (1.0f-input));        } else {result = (float) (1.0f-math.pow ((1.0f-input), 2 * mfactor));    } return result;    } private float mfactor = 1.0f; /** @hide */@Override public long Createnativeinterpolator () {return nativeinterpolatorfactoryhelper.create    Decelerateinterpolator (Mfactor); }}

It can be seen that it is not a simple class, it is a class that can be set through XML, through XML can be set in which the Mfactor variable, its value is 1.0 by default;The larger the value, the faster it changes, and the result is that it starts more quickly, and the result is more slowly, as a person starts running fast, but in exchange for the back of the journey will take more time to walk slowly.

In the method

    public float getinterpolation (float input) {        float result;        if (Mfactor = = 1.0f) {            result = (float) (1.0f-(1.0f-input) * (1.0f-input));        } else {            result = (float) (1.0 F-math.pow ((1.0f-input), 2 * mfactor));        }        return result;    }

It describes a parabolic equation of a primary school (say, Junior high school bar), y = x^2 I do not know how to get up, so it is OK, meaning understand.

Since the space is said to be so two, the following talk about other things.

Animation table

Does this picture believe that you have seen a lot in the previous period? Some time ago material design just came out when a lot of people say this ah, but it seems to be said that the picture, but did not say how it achieved it.

Realize

Here is the benefit, which is the version of C + + that I found at the beginning:

Float Elastic::easein (float t,float B, float C, float d) {if (t==0) return B;   if ((T/=d) ==1) return b+c; float p=d*.3f;  float A=c; float S=P/4; Float PostFix =a*pow (2,10* (t-=1)); This was a fix, again, with post-increment operators return-(PostFix * sin ((t*d-s) * (2*PI)/p)) + B;}  Float Elastic::easeout (float t,float B, float C, float d) {if (t==0) return B;   if ((T/=d) ==1) return b+c; float p=d*.3f;  float A=c; float S=P/4; Return (A*POW (2,-10*t) * sin ((t*d-s) * (2*PI)/p) + C + B);  } float Elastic::easeinout (float t,float B, float C, float d) {if (t==0) return B;  if ((T/=D/2) ==2) return b+c; Float p=d* (. 3f*1.5f);  float A=c;  float S=P/4;  if (T < 1) {float PostFix =a*pow (2,10* (t-=1));//Postincrement is evil return-.5f* (postfix* sin ((t*d-s) * (2*PI)/p)) + b; } Float PostFix = A*pow (2,-10* (t-=1)); Postincrement is evil return PostFix * sin ((t*d-s) * (2*PI)/p) *.5f + C + b;}

the meaning of the parameter:

• T-the current time in an animation
• b – Start value
• C – End Value
• D – Total time of animation

Take a look at the top three of Java's first line:

public class Sine {public static float  easeIn (float t,float B, float C, float d) {return-c * (float) math.cos (T/D * ( MATH.PI/2)) + C + b;} public static float  EaseOut (float t,float B, float C, float d) {return c * (float) Math.sin (t/d * (MATH.PI/2)) + B;} public static float  easeinout (float t,float B, float C, float d) {RETURN-C/2 * ((float) math.cos (math.pi*t/d)-1) + b;}}

Although Java also has, but say this how to use Ah, with the above interpolator how to link up ah?

an easy way to do this: first set the D total time to a fixed value of 1.0, set the start value of B to 0.0 to set the end value to 1.0, and then the T as the above Interpolator float getinterpolation (float input); Can I use it? Is that right?

Give me a case.

/** * Created by Qiujuer on 2015/1/5. */public class Insineinterpolator implements interpolator{public    static float  easeIn (float t,float B, float C, f Loat d) {        return-c * (float) math.cos (t/d * (MATH.PI/2)) + C + B;    }    @Override Public    float getinterpolation (float input) {        return easeIn (input, 0, 1, 1);}    }

Use

        Animatorset        manimatorset = new Animatorset ();        Manimatorset.playtogether (Apaintx, Apainty, Aradius, abackground);        Manimatorset.setinterpolator (New Insineinterpolator ());        Manimatorset.start ();

It can be seen using the same as the above Android, of course, this is just a case, the specific use of you can be packaged, if you do not change the main part.

OK, finished, wipe again three hours later, my LOL again can't fight.

Finally, the benefits, the full implementation of the class:

Animation Interpolator.zip

I hope everyone can make their own satisfaction with the animation!

--open source of learning, for open source, beginner's mentality, with June mutual encouragement!

========================================================
Qiujuer
Blog:Blog.csdn.net/qiujuer
Website:Www.qiujuer.net
Open Source Library:Genius-android
Reprint Please specify Source: http://blog.csdn.net/qiujuer/article/details/42430269
========================================================

Penetration Understanding Animation time interpolation Interpolator class