废话少说,先来张效果图
源码下载,欢迎Star
刻度线的绘制:
private void drawnLine(Canvas canvas) { for (int i = 0; i < 360; i++) { int startX = mCenterX; int startY = mCenterY - mRadius + mStrokeWidth / 2; int stopX = mCenterX; int stopY = startY + mLineDistance; canvas.drawLine(startX, startY, stopX, stopY, mPaint); //如果数字是正数, 那么表示向右旋转,在这个地方开始作画 canvas.rotate(1f, mCenterX, mCenterY); } }
进度条的动画绘制
private void resultLoading() { final float startDegree = 0f; float endDegree = getDegree(mProgress); resultAnim = ValueAnimator.ofFloat(startDegree,endDegree); resultAnim.setDuration(1000); resultAnim.setInterpolator(new LinearOutSlowInInterpolator()); resultAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float newValue = (float) animation.getAnimatedValue(); rotateDegree = newValue; invalidate(); } }); resultAnim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { isLoadingResult = true; } }); resultAnim.start(); }
数据加载动画的绘制
private void startLoading() { final float startDegree = 0f; final float endDegree = 360f; secondAnim = ValueAnimator.ofFloat(startDegree, endDegree); secondAnim.setDuration(1000); secondAnim.setInterpolator(new LinearOutSlowInInterpolator()); secondAnim.setRepeatMode(ValueAnimator.RESTART); secondAnim.setRepeatCount(ValueAnimator.INFINITE); secondAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { private float lastDrawValue = 0; private float drawInterval = 0.1f; private float lastUpdatePointerValue = 0; private float updatePointerInterval = 360 / 60 * 5; @Override public void onAnimationUpdate(ValueAnimator animation) { float newValue = (float) animation.getAnimatedValue(); float increasedPointerValue = newValue - lastUpdatePointerValue; if (increasedPointerValue < 0) { increasedPointerValue = endDegree + increasedPointerValue; } if (increasedPointerValue >= updatePointerInterval) { lastUpdatePointerValue = newValue; } float increasedDrawValue = newValue - lastDrawValue; if (increasedDrawValue < 0) { increasedDrawValue = endDegree + increasedDrawValue; } if (increasedDrawValue >= drawInterval) { lastDrawValue = newValue; rotateSecondPointer += increasedDrawValue; invalidate(); } } }); secondAnim.start(); }
源码下载
参考项目:
MiClockView