码迷,mamicode.com
首页 > 移动开发 > 详细

android自定义之 5.0 风格progressBar

时间:2015-06-26 21:14:43      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:android   animator   android5.0   progressbar   

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

技术分享


大概的思路:
1. 圆圈通过Canvas去绘制
2.圆圈的动画通过Animator去控制

代码:
1.绘制圆的代码是很简单的,
@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的动画运用,很简单的方式,可以随手练习一个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   animator   android5.0   progressbar   

原文地址:http://blog.csdn.net/flyme2012/article/details/46653657

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!