android自己定義之 5.0 風格progressBar
阿新 • • 發佈:2017-05-15
rcp 方式 rem listen angle 一個 arr 5.0 自己
近期做項目,用到了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。
網盤源代碼下載地址: http://pan.baidu.com/s/1dD71XlR
大概的思路: 1. 圓圈通過Canvas去繪制 2.圓圈的動畫通過Animator去控制
代碼: 1.繪制圓的代碼是非常easy的。 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawArc(arcRectf, startAngle + incrementAngele , sweepAngle, false, arcPaint) ;
通過canvas.draw Arc 去繪制 startAngle則是繪制開始的角度 通過加上 incrementAngle這一個變量是為了更好去做動畫控制。 2.動畫控制代碼: (這個才是最重要的代碼) private void startAnimation(){ if (animatorSet != null && animatorSet.isRunning()) { animatorSet.cancel() ; // 取消動畫
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