Android实现跳动的小球加载动画效果

先来看看效果图

跳动的小球做这个动画,需掌握:

     1、属性动画

     2、Path类、Canvas类

     3、贝塞尔曲线

     4、SurfaceView用法

     5、自定义attr属性

     6 、架构: 状态模式,控制器

     7 、自由落体,抛物线等概念

不多说了,直接上码
1.DancingView.java

public class DancingView extends SurfaceView implements SurfaceHolder.Callback {public static final int STATE_DOWN = 1;//向下状态public static final int STATE_UP = 2;//向上状态public static final int DEFAULT_POINT_RADIUS = 10;public static final int DEFAULT_BALL_RADIUS = 13;public static final int DEFAULT_LINE_WIDTH = 200;public static final int DEFAULT_LINE_HEIGHT = 2;public static final int DEFAULT_LINE_COLOR = Color.parseColor（"#FF9800"）;public static final int DEFAULT_POINT_COLOR = Color.parseColor（"#9C27B0"）;public static final int DEFAULT_BALL_COLOR = Color.parseColor（"#FF4081"）;public static final int DEFAULT_DOWN_DURATION = 600;//mspublic static final int DEFAULT_UP_DURATION = 600;//mspublic static final int DEFAULT_FREEDOWN_DURATION = 1000;//mspublic static final int MAX_OFFSET_Y = 50;//水平下降最大偏移距离public int PONIT_RADIUS = DEFAULT_POINT_RADIUS;//小球半径public int BALL_RADIUS = DEFAULT_BALL_RADIUS;//小球半径private Paint mPaint;private Path mPath;private int mLineColor;private int mPonitColor;private int mBallColor;private int mLineWidth;private int mLineHeight;private float mDownDistance;private float mUpDistance;private float freeBallDistance;private ValueAnimator mDownController;//下落控制器private ValueAnimator mUpController;//上弹控制器private ValueAnimator mFreeDownController;//自由落体控制器private AnimatorSet animatorSet;private int state;private boolean ismUpControllerDied = false;private boolean isAnimationShowing = false;private boolean isBounced = false;private boolean isBallFreeUp = false;public DancingView（Context context） {super（context）;init（context, null）;}public DancingView（Context context, AttributeSet attrs） {super（context, attrs）;init（context, attrs）;}public DancingView（Context context, AttributeSet attrs, int defStyleAttr） {super（context, attrs, defStyleAttr）;init（context, attrs）;}private void init（Context context, AttributeSet attrs） {initAttributes（context, attrs）;mPaint = new Paint（）;mPaint.setAntiAlias（true）;mPaint.setStrokeWidth（mLineHeight）;mPaint.setStrokeCap（Paint.Cap.ROUND）;mPath = new Path（）;getHolder（）.addCallback（this）;initController（）;}private void initAttributes（Context context, AttributeSet attrs） {TypedArray typeArray = context.obtainStyledAttributes（attrs, R.styleable.DancingView）;mLineColor = typeArray.getColor（R.styleable.DancingView_lineColor, DEFAULT_LINE_COLOR）;mLineWidth = typeArray.getDimensionPixelOffset（R.styleable.DancingView_lineWidth, DEFAULT_LINE_WIDTH）;mLineHeight = typeArray.getDimensionPixelOffset（R.styleable.DancingView_lineHeight, DEFAULT_LINE_HEIGHT）;mPonitColor = typeArray.getColor（R.styleable.DancingView_pointColor, DEFAULT_POINT_COLOR）;mBallColor = typeArray.getColor（R.styleable.DancingView_ballColor, DEFAULT_BALL_COLOR）;typeArray.recycle（）;}private void initController（） {mDownController = ValueAnimator.ofFloat（0, 1）;mDownController.setDuration（DEFAULT_DOWN_DURATION）;mDownController.setInterpolator（new DecelerateInterpolator（））;mDownController.addUpdateListener（new ValueAnimator.AnimatorUpdateListener（） {@Overridepublic void onAnimationUpdate（ValueAnimator animation） {mDownDistance = MAX_OFFSET_Y * （float） animation.getAnimatedValue（）;postInvalidate（）;}}）;mDownController.addListener（new Animator.AnimatorListener（） {@Overridepublic void onAnimationStart（Animator animation） {state = STATE_DOWN;}@Overridepublic void onAnimationEnd（Animator animation） {}@Overridepublic void onAnimationCancel（Animator animation） {}@Overridepublic void onAnimationRepeat（Animator animation） {}}）;mUpController = ValueAnimator.ofFloat（0, 1）;mUpController.setDuration（DEFAULT_UP_DURATION）;mUpController.setInterpolator（new DancingInterpolator（））;mUpController.addUpdateListener（new ValueAnimator.AnimatorUpdateListener（） {@Overridepublic void onAnimationUpdate（ValueAnimator animation） {mUpDistance = MAX_OFFSET_Y * （float） animation.getAnimatedValue（）;if （mUpDistance >= MAX_OFFSET_Y） {//进入自由落体状态isBounced = true;if （！mFreeDownController.isRunning（） && ！mFreeDownController.isStarted（） && ！isBallFreeUp） {mFreeDownController.start（）;}}postInvalidate（）;}}）;mUpController.addListener（new Animator.AnimatorListener（） {@Overridepublic void onAnimationStart（Animator animation） {state = STATE_UP;}@Overridepublic void onAnimationEnd（Animator animation） {ismUpControllerDied = true;}@Overridepublic void onAnimationCancel（Animator animation） {}@Overridepublic void onAnimationRepeat（Animator animation） {}}）;mFreeDownController = ValueAnimator.ofFloat（0, 8f）;mFreeDownController.setDuration（DEFAULT_FREEDOWN_DURATION）;mFreeDownController.setInterpolator（new DecelerateInterpolator（））;mFreeDownController.addUpdateListener（new ValueAnimator.AnimatorUpdateListener（） {@Overridepublic void onAnimationUpdate（ValueAnimator animation） {//该公式解决上升减速 和 下降加速float t = （float） animation.getAnimatedValue（）;freeBallDistance = 40 * t - 5 * t * t;if （ismUpControllerDied） {//往上抛,到临界点postInvalidate（）;}}}）;mFreeDownController.addListener（new Animator.AnimatorListener（） {@Overridepublic void onAnimationStart（Animator animation） {isBallFreeUp = true;}@Overridepublic void onAnimationEnd（Animator animation） {isAnimationShowing = false;//循环第二次startAnimations（）;}@Overridepublic void onAnimationCancel（Animator animation） {}@Overridepublic void onAnimationRepeat（Animator animation） {}}）;animatorSet = new AnimatorSet（）;animatorSet.play（mDownController）.before（mUpController）;animatorSet.addListener（new Animator.AnimatorListener（） {@Overridepublic void onAnimationStart（Animator animation） {isAnimationShowing = true;}@Overridepublic void onAnimationEnd（Animator animation） {}@Overridepublic void onAnimationCancel（Animator animation） {}@Overridepublic void onAnimationRepeat（Animator animation） {}}）;}/** * 启动动画,外部调用 */public void startAnimations（） {if （isAnimationShowing） {return;}if （animatorSet.isRunning（）） {animatorSet.end（）;animatorSet.cancel（）;}isBounced = false;isBallFreeUp = false;ismUpControllerDied = false;animatorSet.start（）;}@Overrideprotected void onDraw（Canvas canvas） {super.onDraw（canvas）;// 一条绳子用左右两部分的二阶贝塞尔曲线组成mPaint.setColor（mLineColor）;mPath.reset（）;//起始点mPath.moveTo（getWidth（） / 2 - mLineWidth / 2, getHeight（） / 2）;if （state == STATE_DOWN） {//下落/**************绘制绳子开始*************///左部分 的贝塞尔mPath.quadTo（（float） （getWidth（） / 2 - mLineWidth / 2 + mLineWidth * 0.375）, getHeight（） / 2 + mDownDistance,getWidth（） / 2, getHeight（） / 2 + mDownDistance）;//右部分 的贝塞尔mPath.quadTo（（float） （getWidth（） / 2 + mLineWidth / 2 - mLineWidth * 0.375）, getHeight（） / 2 + mDownDistance,getWidth（） / 2 + mLineWidth / 2, getHeight（） / 2）;mPaint.setStyle（Paint.Style.STROKE）;canvas.drawPath（mPath, mPaint）;/**************绘制绳子结束*************//**************绘制弹跳小球开始*************/mPaint.setStyle（Paint.Style.FILL）;mPaint.setColor（mBallColor）;canvas.drawCircle（getWidth（） / 2, getHeight（） / 2 + mDownDistance - BALL_RADIUS, BALL_RADIUS, mPaint）;/**************绘制弹跳小球结束*************/} else if （state == STATE_UP） { //向上弹/**************绘制绳子开始*************///左部分的贝塞尔mPath.quadTo（（float） （getWidth（） / 2 - mLineWidth / 2 + mLineWidth * 0.375）, getHeight（） / 2 + 50 - mUpDistance,getWidth（） / 2,getHeight（） / 2 + （50 - mUpDistance））;//右部分的贝塞尔mPath.quadTo（（float） （getWidth（） / 2 + mLineWidth / 2 - mLineWidth * 0.375）, getHeight（） / 2 + 50 - mUpDistance,getWidth（） / 2 + mLineWidth / 2,getHeight（） / 2）;mPaint.setStyle（Paint.Style.STROKE）;canvas.drawPath（mPath, mPaint）;/**************绘制绳子结束*************/mPaint.setStyle（Paint.Style.FILL）;mPaint.setColor（mBallColor）;//弹性小球,自由落体if （！isBounced） {//上升canvas.drawCircle（getWidth（） / 2, getHeight（） / 2 + （MAX_OFFSET_Y - mUpDistance） - BALL_RADIUS, BALL_RADIUS, mPaint）;} else {//自由落体canvas.drawCircle（getWidth（） / 2, getHeight（） / 2 - freeBallDistance - BALL_RADIUS, BALL_RADIUS, mPaint）;}}mPaint.setColor（mPonitColor）;mPaint.setStyle（Paint.Style.FILL）;canvas.drawCircle（getWidth（） / 2 - mLineWidth / 2, getHeight（） / 2, PONIT_RADIUS, mPaint）;canvas.drawCircle（getWidth（） / 2 + mLineWidth / 2, getHeight（） / 2, PONIT_RADIUS, mPaint）;}@Overridepublic void surfaceCreated（SurfaceHolder holder） {Canvas canvas = holder.lockCanvas（）;//锁定整个SurfaceView对象,获取该Surface上的Canvas.draw（canvas）;holder.unlockCanvasAndPost（canvas）;//释放画布，提交修改}@Overridepublic void surfaceChanged（SurfaceHolder holder, int format, int width, int height） {}@Overridepublic void surfaceDestroyed（SurfaceHolder holder） {}}

2.DancingInterpolator.java

 public class DancingInterpolator implements Interpolator {@Overridepublic float getInterpolation（float input） {return （float） （1 - Math.exp（-3 * input） * Math.cos（10 * input））;}}

3.自定义属性 styles.xml

<declare-styleable name="DancingView"><attr name="lineWidth" format="dimension" /><attr name="lineHeight" format="dimension" /><attr name="pointColor" format="reference|color" /><attr name="lineColor" format="reference|color" /><attr name="ballColor" format="reference|color" /></declare-styleable>

注意：颜色、尺寸、参数可以自己测试，调整。
以上就是本文的全部内容，希望对大家的学习和工作能有所帮助哦。