android自己定义之 5.0 风格progressBar

Posted yutingliuyl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了android自己定义之 5.0 风格progressBar相关的知识,希望对你有一定的参考价值。

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

效果图:

123.gif


大概的思路:
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 



以上是关于android自己定义之 5.0 风格progressBar的主要内容,如果未能解决你的问题,请参考以下文章

Android 5.0 材料设计风格的 KitKat 导航抽屉

Android自己定义ViewGroup打造各种风格的SlidingMenu

使用 DrawerLayout 实现 Material Design风格的侧滑

arcgis api for js共享干货系列之二自定义Navigation控件样式风格

Xamarin。 WebView Progres

Flutter 之 自定义路由切换动画