This time I will use the open source project ShapeLoadingView on github to learn ObjectAnimator and animatorSet.
Code structure directory:
package com.mingle.widget;import android.annotation.TargetApi;import android.content.Context;import android.content.res.TypedArray;import android.os.Build;import android.text.TextUtils;import android.util.AttributeSet;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.animation.AccelerateInterpolator;import android.view.animation.DecelerateInterpolator;import android.widget.FrameLayout;import android.widget.ImageView;import android.widget.TextView;import com.mingle.shapeloading.R;import com.nineoldandroids.animation.Animator;import com.nineoldandroids.animation.AnimatorSet;import com.nineoldandroids.animation.ObjectAnimator;/** * Created by zzz40500 on 15/4/6. */public class LoadingView extends FrameLayout { private static final int ANIMATION_DURATION = 500; private static float mDistance = 200; private ShapeLoadingView mShapeLoadingView; private ImageView mIndicationIm; private TextView mLoadTextView; private int mTextAppearance; private String mLoadText; public LoadingView(Context context) { super(context); } public LoadingView(Context context, AttributeSet attrs) { //构造函数 super(context, attrs, 0); init(context, attrs); } private void init(Context context, AttributeSet attrs) { //这里是通过自定义属性来显示字符串 TypedArray typedArray = context .obtainStyledAttributes(attrs, R.styleable.LoadingView); mLoadText = typedArray.getString(R.styleable.LoadingView_loadingText); mTextAppearance = typedArray.getResourceId(R.styleable.LoadingView_loadingTextAppearance, -1); typedArray.recycle(); } public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) { //构造函数 super(context, attrs, defStyleAttr); init(context, attrs); } //这里定义了一个针对LL版本的构造函数，我这可能因为sdk版本这里会报错，如果报错注释掉就行了 @TargetApi(Build.VERSION_CODES.LOLLIPOP) public LoadingView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); init(context, attrs); } //dp和像素的转换 public int dip2px(float dipValue) { final float scale = getContext().getResources().getDisplayMetrics().density; return (int) (dipValue * scale + 0.5f); } //引入布局 @Override protected void onFinishInflate() { super.onFinishInflate(); View view = LayoutInflater.from(getContext()).inflate(R.layout.load_view, null); mDistance = dip2px(54f); LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); layoutParams.gravity = Gravity.CENTER; mShapeLoadingView = (ShapeLoadingView) view.findViewById(R.id.shapeLoadingView); mIndicationIm = (ImageView) view.findViewById(R.id.indication); mLoadTextView = (TextView) view.findViewById(R.id.promptTV); if (mTextAppearance != -1) { mLoadTextView.setTextAppearance(getContext(), mTextAppearance); } setLoadingText(mLoadText); //显示绘画布局 addView(view, layoutParams); //这里是设计一个延时 每隔900调用一次跌落，相当于900ms是一次动画的周期 this.postDelayed(new Runnable() { @Override public void run() { freeFall(); } }, 900); } public void setLoadingText(CharSequence loadingText) { if (TextUtils.isEmpty(loadingText)) { mLoadTextView.setVisibility(GONE); } else { mLoadTextView.setVisibility(VISIBLE); } mLoadTextView.setText(loadingText); } /** * 上抛，上抛是动画的核心，上抛是两个组合动作：1，图形进行旋转；2，图形向上平移，同时还有下面阴影部分随着图形位置变化 * 进行的跟随变化。这里使用了ObjectAnimator来控制每个动画的动作，最后使用AnimatorSet将三个部分组合在一起。 * 看一下具体的动作 */ public void upThrow() { //mShapeLoadingView就是LoadingView里面绘制的图形买第一个objectAnimator控制它进行平移 //使用objectAnimator.ofFloat及参数translationY来进行纵向的平移 ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(mShapeLoadingView, "translationY", mDistance, 0); //动画下部的阴影这里使用ofFloat及参数scaleX来进行X轴的缩放，02f-1是缩放比例 阴影在20%到100%之间变化 ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(mIndicationIm, "scaleX", 0.2f, 1); //这段是对图形做一个旋转的动作 ObjectAnimator objectAnimator1 = null; switch (mShapeLoadingView.getShape()) { case SHAPE_RECT: objectAnimator1 = ObjectAnimator.ofFloat(mShapeLoadingView, "rotation", 0, -120); break; case SHAPE_CIRCLE: objectAnimator1 = ObjectAnimator.ofFloat(mShapeLoadingView, "rotation", 0, 180); break; case SHAPE_TRIANGLE: objectAnimator1 = ObjectAnimator.ofFloat(mShapeLoadingView, "rotation", 0, 180); break; } //设置animation的持续时间，通过setDuration. objectAnimator.setDuration(ANIMATION_DURATION); objectAnimator1.setDuration(ANIMATION_DURATION); //设置一个减速插值器 objectAnimator.setInterpolator(new DecelerateInterpolator(factor)); objectAnimator1.setInterpolator(new DecelerateInterpolator(factor)); AnimatorSet animatorSet = new AnimatorSet(); animatorSet.setDuration(ANIMATION_DURATION); //animatorSet的方法playtogther让三个动画同时运行 animatorSet.playTogether(objectAnimator, objectAnimator1, scaleIndication); animatorSet.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { freeFall(); } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); animatorSet.start(); } public float factor = 1.2f; /** * 下落 */ public void freeFall() { //主要的点和上抛一致不讲了 ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(mShapeLoadingView, "translationY", 0, mDistance); ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(mIndicationIm, "scaleX", 1, 0.2f); objectAnimator.setDuration(ANIMATION_DURATION); objectAnimator.setInterpolator(new AccelerateInterpolator(factor)); AnimatorSet animatorSet = new AnimatorSet(); animatorSet.setDuration(ANIMATION_DURATION); animatorSet.playTogether(objectAnimator, scaleIndication); animatorSet.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { //下落到底端改变图形 mShapeLoadingView.changeShape(); upThrow(); } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); animatorSet.start(); }}package com.mingle.widget;import android.annotation.TargetApi;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Path;import android.os.Build;import android.util.AttributeSet;import android.view.View;import com.mingle.shapeloading.R;/** * Created by zzz40500 on 15/4/4. */public class ShapeLoadingView extends View { private static final float genhao3 = 1.7320508075689f; private static final float mTriangle2Circle =0.25555555f; private Shape mShape = Shape.SHAPE_CIRCLE; /** * 用贝赛尔曲线画圆 */ private float mMagicNumber = 0.55228475f; public ShapeLoadingView(Context context) { super(context); init(); } public ShapeLoadingView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public ShapeLoadingView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @TargetApi(Build.VERSION_CODES.LOLLIPOP) public ShapeLoadingView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); init(); } private void init() { mPaint = new Paint(); mPaint.setColor(getResources().getColor(R.color.triangle)); mPaint.setAntiAlias(true); //看到网上说这个FILL_AND_STROKE有去锯齿的作用 mPaint.setStyle(Paint.Style.FILL_AND_STROKE); setBackgroundColor(getResources().getColor(R.color.view_bg)); } public boolean mIsLoading = false; private Paint mPaint; private float mControlX = 0; private float mControlY = 0; private float mAnimPercent; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //绘制三个图形的三角形方框圆形的位置，作者在这里标记动画可以优化，估计会有后续修改 if(getVisibility()==GONE){ return; } // FIXME: 15/6/15 动画待优化 switch (mShape) { case SHAPE_TRIANGLE: if (mIsLoading) { mAnimPercent += 0.1611113; // triangle to circle Path path = new Path(); path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f)); if (mAnimPercent >= 1) { mShape = Shape.SHAPE_CIRCLE; mIsLoading = false; mAnimPercent=1; } float controlX = mControlX - relativeXFromView(mAnimPercent* mTriangle2Circle) * genhao3; float controlY = mControlY - relativeYFromView(mAnimPercent* mTriangle2Circle); path.quadTo(relativeXFromView(1) - controlX, controlY, relativeXFromView(0.5f + genhao3 / 4), relativeYFromView(0.75f)); path.quadTo(relativeXFromView(0.5f), relativeYFromView(0.75f + 2 * mAnimPercent* mTriangle2Circle), relativeXFromView(0.5f - genhao3 / 4), relativeYFromView(0.75f)); path.quadTo(controlX, controlY, relativeXFromView(0.5f), relativeYFromView(0f)); path.close(); canvas.drawPath(path, mPaint); invalidate(); } else { Path path = new Path(); mPaint.setColor(getResources().getColor(R.color.triangle)); path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f)); path.lineTo(relativeXFromView(1), relativeYFromView(genhao3 / 2f)); path.lineTo(relativeXFromView(0), relativeYFromView(genhao3/2f)); mControlX = relativeXFromView(0.5f - genhao3 / 8.0f); mControlY = relativeYFromView(3 / 8.0f); mAnimPercent = 0; path.close(); canvas.drawPath(path, mPaint); } break; case SHAPE_CIRCLE: if (mIsLoading) { float magicNumber = mMagicNumber + mAnimPercent; mAnimPercent += 0.12; if (magicNumber + mAnimPercent >= 1.9f) { mShape = Shape.SHAPE_RECT; mIsLoading = false; } Path path = new Path(); path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f)); path.cubicTo(relativeXFromView(0.5f + magicNumber / 2), relativeYFromView(0f), relativeXFromView(1), relativeYFromView(0.5f - magicNumber / 2), relativeXFromView(1f), relativeYFromView(0.5f)); path.cubicTo( relativeXFromView(1), relativeXFromView(0.5f + magicNumber / 2), relativeXFromView(0.5f + magicNumber / 2), relativeYFromView(1f), relativeXFromView(0.5f), relativeYFromView(1f)); path.cubicTo(relativeXFromView(0.5f - magicNumber / 2), relativeXFromView(1f), relativeXFromView(0), relativeYFromView(0.5f + magicNumber / 2), relativeXFromView(0f), relativeYFromView(0.5f)); path.cubicTo(relativeXFromView(0f), relativeXFromView(0.5f - magicNumber / 2), relativeXFromView(0.5f - magicNumber / 2), relativeYFromView(0), relativeXFromView(0.5f), relativeYFromView(0f)); path.close(); canvas.drawPath(path, mPaint); invalidate(); } else { mPaint.setColor(getResources().getColor(R.color.circle)); Path path = new Path(); float magicNumber = mMagicNumber; path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f)); path.cubicTo(relativeXFromView(0.5f + magicNumber / 2), 0, relativeXFromView(1), relativeYFromView(magicNumber / 2), relativeXFromView(1f), relativeYFromView(0.5f)); path.cubicTo( relativeXFromView(1), relativeXFromView(0.5f + magicNumber / 2), relativeXFromView(0.5f + magicNumber / 2), relativeYFromView(1f), relativeXFromView(0.5f), relativeYFromView(1f)); path.cubicTo(relativeXFromView(0.5f - magicNumber / 2), relativeXFromView(1f), relativeXFromView(0), relativeYFromView(0.5f + magicNumber / 2), relativeXFromView(0f), relativeYFromView(0.5f)); path.cubicTo(relativeXFromView(0f), relativeXFromView(0.5f - magicNumber / 2), relativeXFromView(0.5f - magicNumber / 2), relativeYFromView(0), relativeXFromView(0.5f), relativeYFromView(0f)); mAnimPercent = 0; path.close(); canvas.drawPath(path, mPaint); } break; case SHAPE_RECT: if (mIsLoading) { mAnimPercent += 0.15; if (mAnimPercent >= 1) { mShape = Shape.SHAPE_TRIANGLE; mIsLoading = false; mAnimPercent = 1; } Path path = new Path(); path.moveTo(relativeXFromView(0.5f * mAnimPercent), 0); path.lineTo(relativeYFromView(1 - 0.5f * mAnimPercent), 0); float distanceX = (mControlX) * mAnimPercent; float distanceY = (relativeYFromView(1f) - mControlY) * mAnimPercent; path.lineTo(relativeXFromView(1f) - distanceX, relativeYFromView(1f) - distanceY); path.lineTo(relativeXFromView(0f) + distanceX, relativeYFromView(1f) - distanceY); path.close(); canvas.drawPath(path, mPaint); invalidate(); } else { mPaint.setColor(getResources().getColor(R.color.rect)); mControlX = relativeXFromView(0.5f - genhao3 / 4); mControlY = relativeYFromView(0.75f); Path path = new Path(); path.moveTo(relativeXFromView(0f), relativeYFromView(0f)); path.lineTo(relativeXFromView(1f), relativeYFromView(0f)); path.lineTo(relativeXFromView(1f), relativeYFromView(1f)); path.lineTo(relativeXFromView(0f), relativeYFromView(1f)); path.close(); mAnimPercent = 0; canvas.drawPath(path, mPaint); } break; } } private float relativeXFromView(float percent) { return getWidth() * percent; } private float relativeYFromView(float percent) { return getHeight() * percent; } public void changeShape() { mIsLoading = true; invalidate(); public enum Shape { SHAPE_TRIANGLE, SHAPE_RECT, SHAPE_CIRCLE } @Override public void setVisibility(int visibility) { super.setVisibility(visibility); if(visibility==VISIBLE){ invalidate(); } } public Shape getShape() { return mShape; }}Two main things we learned about this open source project
1. Use path to draw graphics
2. ObjectAnimation&AnimatorSet
After reading this project, can you use these two knowledge points to make an animation you like?
just do it.
Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
