android自己定义之 5.0 风格progressBar

知是行的主意,行是知的功夫。这篇文章主要讲述android自己定义之 5.0 风格progressBar相关的知识,希望能为你提供帮助。
近期做项目,用到了ProgressBar 。就想到了要使用android5.0 的效果,就随手实现了一下。

效果图:

android自己定义之 5.0 风格progressBar

文章图片



大概的思路: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这一个变量是为了更好去做动画控制。【android自己定义之 5.0 风格progressBar】

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 





    推荐阅读