Penetration comprehension Animation time interpolation Interpolator class, interpolator

Penetration comprehension Animation time interpolation Interpolator class, interpolator

========================================================== ======================
Author: qiujuer
Blog: blog.csdn.net/qiujuer
Website: www.qiujuer.net
Open-source Library: Genius-Android
Reprinted please indicate the source: http://blog.csdn.net/qiujuer/article/details/42430269
========================================================== ======================

Collation

• A good animation must be made with your heart. What is your mind? One of them I think defining an appropriate Interpolator is a kind of hard work; this is especially evident in google material design.
• A good animation must conform to the actual situation. The old saying is: the rock must fall under the gravity to be elegant, otherwise, it would be impossible for a stone to float in the wind like a feather.

What is Interpolator?

Speaking of Interpolator, I want to talk about it three years ago, saying that Google, Nokia, and Qiujuer were three different places in the world. Haha, just kidding me ~

Interpolator, a time interpolation class, is mainly used in animation. Its function is to control the change value of the target variable for corresponding changes.

As you can understand, now James buys soy sauce. It takes one hour to arrive, and the mileage is one kilometer. Now James is afraid that it cannot be reached, so he ran it first, but because of physical strength consumption, it gradually slowed down and then arrived successfully. In such a process, the process that James gradually slows down is abstracted into the work of Interpolator. Of course, Interpolator can also control Xiao Ming to warm up slowly and then run faster and finally reach.

These are the work that Interpolator can do. Similarly, Interpolator can control the process of dropping a ball onto the ground and gradually decreasing it. These are all controllable.

How does Interpolator work?

public interface Interpolator extends TimeInterpolator {}

We can see that this class is an empty class, so where is its operation?

/** * A time interpolator defines the rate of change of an animation. This allows animations * to have non-linear motion, such as acceleration and deceleration. */public interface TimeInterpolator {    /**     * Maps a value representing the elapsed fraction of an animation to a value that represents     * the interpolated fraction. This interpolated value is then multiplied by the change in     * value of an animation to derive the animated value at the current elapsed animation time.     *     * @param input A value between 0 and 1.0 indicating our current point     *        in the animation where 0 represents the start and 1.0 represents     *        the end     * @return The interpolation value. This value can be 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 is in the inherited interface, and there is a method float getInterpolation (float input) in the inherited interface );

In this method, the input value is 0.0 ~ The value of 1.0. the return value can be smaller than 0.0 or greater than 1.0.

You can understand this as follows:In Animation, the time is normal. You set it to 200 ms, and now it has reached 0.5 ms. in linear terms, it should be half the distance, that is; now let's pass the 0.5 to Interpolator and let Interpolator tell me where James is at half the time. This is the principle of Interpolator.

Common classes

Oh, my daily experience. If I cannot access Google, it is a problem. I can only access the source code:

There are 10 official Android products, 9 or 10. There is no data error. They are:

Source code

Here are a few simple source codes.

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 that it returns directly because it is linear.

DecelerateInterpolator

public class DecelerateInterpolator implements Interpolator, NativeInterpolatorFactory {    public DecelerateInterpolator() {    }    /**     * Constructor     *     * @param factor Degree to which the animation should be 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 evens slower)     */    public DecelerateInterpolator(float factor) {        mFactor = factor;    }    public DecelerateInterpolator(Context context, AttributeSet attrs) {        this(context.getResources(), context.getTheme(), 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.createDecelerateInterpolator(mFactor);    }}

It can be seen from this that it is not a simple class, it is a class that can be set through XML, the mFactor variable can be set through XML, and its value is 1.0 by default; the larger the value, the faster the change. The result is faster at the beginning, and the result is slower, like a person who starts to run quickly, but what we get is that the subsequent journey will take more time.

In 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.0f - Math.pow((1.0f - input), 2 * mFactor));        }        return result;    }

It describes a parabolic equation in Junior High School (that is, junior high school), y = x ^ 2. I don't know how to get it. That's it. If you understand it, OK.

Because of the length of the article, let's talk about other things.

Animated table

I believe this image has seen a lot of it some time ago? Some time ago, when material design was just launched, many people said this, but it seems that they all talk about graphs, but they didn't talk about how to implement it.

Implementation

Here we provide benefits. At the beginning, I found the C ++ version:

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 is 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;}

Parameter meaning:

• T-current time in the animation
• B-start value
• C-end value
• D-total animation time

Let's look at the first three items in the first line of Java:

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;}}

Even though Java is available, how can we use this? How can we keep up with Interpolator?

A simple method:First, set the total time of d to a fixed value of 1.0, set the start value of B to 0.0, set the end value to 1.0, and then treat t as the float getInterpolation (float input) in Interpolator; input value, can it be used now? Right?

Example

/** * Created by Qiujuer on 2015/1/5. */public class InSineInterpolator implements Interpolator{    public static float  easeIn(float t,float b , float c, float 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 that the use is exactly the same as that of Android. Of course, this is only a Case. You can encapsulate it at will, provided that you do not change the main part.

Well, it's finished. It's three hours since I wiped it, and I couldn't beat LOL again.

Finally, we provide the following benefits:

Animation Interpolator.zip

Hope everyone can make an animation that they are satisfied!

-- Learning Open Source for open source; a beginner's mentality is shared with you!

========================================================== ======================
Author: qiujuer
Blog: blog.csdn.net/qiujuer
Website: www.qiujuer.net
Open-source Library: Genius-Android
Reprinted please indicate the source: http://blog.csdn.net/qiujuer/article/details/42430269
========================================================== ======================