先来看看效果图

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

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;//ms public static final int DEFAULT_UP_DURATION = 600;//ms public static final int DEFAULT_FREEDOWN_DURATION = 1000;//ms public 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() { @Override public void onAnimationUpdate(ValueAnimator animation) { mDownDistance = MAX_OFFSET_Y * (float) animation.getAnimatedValue(); postInvalidate(); } }); mDownController.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { state = STATE_DOWN; } @Override public void onAnimationEnd(Animator animation) { } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); mUpController = ValueAnimator.ofFloat(0, 1); mUpController.setDuration(DEFAULT_UP_DURATION); mUpController.setInterpolator(new DancingInterpolator()); mUpController.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public 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() { @Override public void onAnimationStart(Animator animation) { state = STATE_UP; } @Override public void onAnimationEnd(Animator animation) { ismUpControllerDied = true; } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); mFreeDownController = ValueAnimator.ofFloat(0, 8f); mFreeDownController.setDuration(DEFAULT_FREEDOWN_DURATION); mFreeDownController.setInterpolator(new DecelerateInterpolator()); mFreeDownController.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { //该公式解决上升减速 和 下降加速 float t = (float) animation.getAnimatedValue(); freeBallDistance = 40 * t - 5 * t * t; if (ismUpControllerDied) {//往上抛,到临界点 postInvalidate(); } } }); mFreeDownController.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { isBallFreeUp = true; } @Override public void onAnimationEnd(Animator animation) { isAnimationShowing = false; //循环第二次 startAnimations(); } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); animatorSet = new AnimatorSet(); animatorSet.play(mDownController).before(mUpController); animatorSet.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { isAnimationShowing = true; } @Override public void onAnimationEnd(Animator animation) { } @Override public void onAnimationCancel(Animator animation) { } @Override public 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(); } @Override protected 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); } @Override public void surfaceCreated(SurfaceHolder holder) { Canvas canvas = holder.lockCanvas();//锁定整个SurfaceView对象,获取该Surface上的Canvas. draw(canvas); holder.unlockCanvasAndPost(canvas);//释放画布，提交修改 } @Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { } @Override public void surfaceDestroyed(SurfaceHolder holder) { } }

2.DancingInterpolator.java

public class DancingInterpolator implements Interpolator { @Override public 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>

注意：颜色、尺寸、参数可以自己测试，调整。

以上就是本文的全部内容，希望对大家的学习和工作能有所帮助哦。