Animation analysis_html/css_WEB-ITnose

Animation is under the package of View. We can also know from the principle of Animation that Animation has no effect without View. Why do you say this?

The animation principle of Animation

Let’s look at a simple Animation animation, AlphaAnimation:

public class AlphaAnimation extends Animation {    private float mFromAlpha;    private float mToAlpha;    /** * Constructor used when an AlphaAnimation is loaded from a resource. * * @param context Application context to use * @param attrs Attribute set from which to read values */    public AlphaAnimation(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray a =            context.obtainStyledAttributes(attrs, com.android.internal.R.styleable.AlphaAnimation);        mFromAlpha = a.getFloat(com.android.internal.R.styleable.AlphaAnimation_fromAlpha, 1.0f);        mToAlpha = a.getFloat(com.android.internal.R.styleable.AlphaAnimation_toAlpha, 1.0f);        a.recycle();    }    /** * Constructor to use when building an AlphaAnimation from code * * @param fromAlpha Starting alpha value for the animation, where 1.0 means * fully opaque and 0.0 means fully transparent. * @param toAlpha Ending alpha value for the animation. */    public AlphaAnimation(float fromAlpha, float toAlpha) {        mFromAlpha = fromAlpha;        mToAlpha = toAlpha;    }    /** * Changes the alpha property of the supplied {@link Transformation} */    @Override    protected void applyTransformation(float interpolatedTime, Transformation t) {        final float alpha = mFromAlpha;        t.setAlpha(alpha + ((mToAlpha - alpha) * interpolatedTime));    }    @Override    public boolean willChangeTransformationMatrix() {        return false;    }    @Override    public boolean willChangeBounds() {        return false;    }    /** * @hide */    @Override    public boolean hasAlpha() {        return true;    }}

The code is very simple, and its core code is In

@Overrideprotected void applyTransformation(float interpolatedTime, Transformation t) {    final float alpha = mFromAlpha;    t.setAlpha(alpha + ((mToAlpha - alpha) * interpolatedTime));}

, by continuously changing the alpha value through interpolatedTime, we can see the animation effect of a View's transparency change! So the question is, who is calling the applyTransformation method? Follow up the code and see that applyTransformation is called in

public boolean getTransformation(long currentTime, Transformation outTransformation){}

. Don’t think about it, getTransformation must be triggered in the startAnimation of View!
Isn’t that right?

public void startAnimation(Animation animation) {        animation.setStartTime(Animation.START_ON_FIRST_FRAME);        setAnimation(animation);        invalidateParentCaches();        invalidate(true);    }

The View is redrawn here, so the boolean draw(Canvas canvas, ViewGroup parent, long drawingTime) method of View will be executed. Why is draw instead of onDraw? Let’s see Here is a comment

    /**     * This method is called by ViewGroup.drawChild() to have each child view draw itself.     * This draw() method is an implementation detail and is not intended to be overridden or     * to be called from anywhere else other than ViewGroup.drawChild().     */

and in the draw() method there is

final Animation a = getAnimation();if (a != null) {    more = drawAnimation(parent, drawingTime, a, scalingRequired);    concatMatrix = a.willChangeTransformationMatrix();    if (concatMatrix) {        mPrivateFlags3 |= PFLAG3_VIEW_IS_ANIMATING_TRANSFORM;    }    transformToApply = parent.getChildTransformation();}

so Animation has to execute getTransformation. This is the implementation principle of Animation.

But this doesn’t seem to mean much to us. Indeed, because we are not the creators of Animation, we you only need to know how to use it, so let’s warm up!

Using Animation

Using Animation is very simple. Four Animation animation effects have been defined for us in Android: AlphaAnimation, RotateAnimation, ScaleAnimation, and TranslateAnimation
Take AlphaAnimation as an example to quickly Explain how to use it:

AlphaAnimation animation = new AlphaAnimation（1,0）;animation.setDuration(2000) ;animation.setRepeat(2) ;view.startAnimation(animation);

ok, the animation of one View is realized, and the other three animation effects are similar, very simple! I won’t repeat it here. Let’s focus on how to define an Animation effect yourself, or illustrate it through a case.

Realize the animation effect of a button magnification. The magnification here cannot be stretched. If it can be stretched, it would be meaningless, because the system has already defined one for us, and ScaleAnimation can achieve it;

The first step, inherit Animation,
The second step, rewrite the applyTransformation method
The third step, gone!

So the code is as follows:

/** * Created by moon.zhong on 2015/4/23. */public class ScaleAnimation extends Animation {    private View mTarget ;    private int mOriginWidth ;    private int mTargetWidth;    private ViewGroup.LayoutParams mParams ;    public ScaleAnimation(int mTargetWidth, View target) {        this.mTarget = target;        this.mOriginWidth = mTarget.getMeasuredWidth();        this.mTargetWidth = mTargetWidth;        if (mOriginWidth == 0 ){            mTarget.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {                @Override                public boolean onPreDraw() {                    mTarget.getViewTreeObserver().removeOnPreDrawListener(this);                    mOriginWidth = mTarget.getMeasuredWidth() ;                    return false;                }            });        }        mParams = target.getLayoutParams() ;    }    @Override    protected void applyTransformation(float interpolatedTime, Transformation t) {        /*interpolatedTime * 变化范围 * 0~1 * */        mParams.width = (int) (mOriginWidth + (mTargetWidth - mOriginWidth)*interpolatedTime) ;        mTarget.setLayoutParams(mParams);    }}

Use the code:

public void startAnimation(View view){        final float density =  getResources().getDisplayMetrics().density;        int width = (int) (300 * density);        ScaleAnimation animation = new ScaleAnimation(width,mTargetView) ;        animation.setDuration(2000);        mTargetView.startAnimation(animation);    }

Rendering:

Here’s another stretch rendering comparison:

Summary:

Overall it’s very simple. Here I just defined a simple animation. In the same way, defining a more complex animation is the same operation, but the code in applyTransformation is a little more written.
The main knowledge points of this blog are:
1. The application scenarios of Animation, acting in View;
2. The use of system Animation

AlphaAnimation animation = new AlphaAnimation（1,0）;animation.setDuration(2000) ;animation.setRepeat(2) ;View.startAnimation(animation);

This form, of course, also has the form of reading xml, which is not mentioned here
3. Custom Animation
Rewrite the applyTransformation method

Demo source code
http://download .csdn.net/detail/jxxfzgy/8634819