android自己定义之 5.0 风格progressBar

Posted 2020-09-18 yutingliuyl

近期做项目，用到了ProgressBar 。就想到了要使用android5.0 的效果，就随手实现了一下。

效果图：

大概的思路：

1. 圆圈通过Canvas去绘制

2.圆圈的动画通过Animator去控制

代码：

1.绘制圆的代码是非常easy的。

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

canvas.drawArc(arcRectf, startAngle + incrementAngele  , sweepAngle, false, arcPaint) ; 

if (animatorSet == null || !animatorSet.isRunning()) {

startAnimation() ;

}

}

通过canvas.draw Arc 去绘制   startAngle则是绘制開始的角度  通过加上  incrementAngle这一个变量是为了更好去做动画控制。

2.动画控制代码： （这个才是最重要的代码）

private void startAnimation(){

if (animatorSet != null && animatorSet.isRunning()) {

animatorSet.cancel() ;  //   取消动画 

}

animatorSet = new AnimatorSet() ;  //设置一个动画集合

AnimatorSet set = circuAnimator();  // 创建执行一圈动画的AnimatorSet

animatorSet.play(set) ;  

animatorSet.addListener(new AnimatorListener() {

private boolean  isCancel = false ; 

@Override

public void onAnimationStart(Animator animation) {

}

@Override

public void onAnimationRepeat(Animator animation) {

}

@Override

public void onAnimationEnd(Animator animation) {

if (!isCancel) {

startAnimation() ;  // 不停的去循环动画

}

}

@Override

public void onAnimationCancel(Animator animation) {

isCancel = true ;

}

}) ;

animatorSet.start() ;

}

//默认的动画时间

private  int DEFULT_DURATION = 660 ;

/**

 * 循环的动画

 */

private AnimatorSet circuAnimator(){

//从小圈到大圈

ValueAnimator holdAnimator1 = ValueAnimator.ofFloat(incrementAngele + DEFULT_MIN_ANGLE , incrementAngele + 115f) ; 

holdAnimator1.addUpdateListener(new AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

incrementAngele = (float) animation.getAnimatedValue() ;

}

}) ; 

holdAnimator1.setDuration(DEFULT_DURATION ) ; 

holdAnimator1.setInterpolator(new LinearInterpolator()) ;

ValueAnimator expandAnimator = ValueAnimator.ofFloat(DEFULT_MIN_ANGLE , DEFULT_MAX_ANGLE) ;

expandAnimator.addUpdateListener(new AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

sweepAngle = (float) animation.getAnimatedValue() ;

incrementAngele -= sweepAngle ;

invalidate() ; 

}

}) ;

expandAnimator.setDuration(DEFULT_DURATION) ;

expandAnimator.setInterpolator(new DecelerateInterpolator(2)) ;

//从大圈到小圈

ValueAnimator holdAnimator = ValueAnimator.ofFloat(startAngle , startAngle + 115f) ;

holdAnimator.addUpdateListener(new AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

startAngle =  (float) animation.getAnimatedValue() ;

}

});

holdAnimator.setDuration(DEFULT_DURATION ) ; 

holdAnimator.setInterpolator(new LinearInterpolator()) ;

ValueAnimator narrowAnimator = ValueAnimator.ofFloat(DEFULT_MAX_ANGLE , DEFULT_MIN_ANGLE) ;

narrowAnimator.addUpdateListener(new AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

sweepAngle = (float) animation.getAnimatedValue() ;

invalidate() ; 

}

}) ;

narrowAnimator.setDuration(DEFULT_DURATION) ;

narrowAnimator.setInterpolator(new DecelerateInterpolator(2)) ;

AnimatorSet set = new AnimatorSet() ;

set.play(holdAnimator1 ).with(expandAnimator) ;

set.play(holdAnimator).with(narrowAnimator).after(holdAnimator1);

return set ; 

}

OK。

这个实现思路主要就是Animator的动画运用，非常easy的方式，能够随手练习一个Animator的使用。没有什么难点。

网盘源代码下载地址： http://pan.baidu.com/s/1dD71XlR 

github地址：  https://github.com/flyme2012/EastTrain 

博客园地址：http://www.cnblogs.com/flyme2012/p/8ec2c75d44f1896aec817ca441aa5b7c.html