最近做項目，用到了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的使用。沒有什么難點。
github地址：
https://github.com/flyme2012/EastTrain
附件列表