应学弟要求,帮忙做的一个圆形动画效果,UI是借鉴跑步停止按钮实现的。
如图所示:圆形按钮,长按触发进度条,松开取消,带动画效果。直接附上代码。
public class HJProgressButton extends View {
// 画实心圆的画笔
private Paint mCirclePaint;
// 画圆环的画笔
private Paint mRingPaint;
// 画圆环c3c3c3的画笔
private Paint mRingC3Paint;
// 圆形颜色
private int mCircleColor;
// 圆环颜色
private int mRingColor;
// 圆环底颜色
private int mRingC3Color;
// 半径
private float mRadius;
// 圆环半径
private float mRingRadius;
// 大圆环半径
private float mBigRingRadius;
// 圆环宽度
private float mStrokeWidth;
// 圆心x坐标
private int mXCenter;
// 圆心y坐标
private int mYCenter;
// 总进度
private int mTotalProgress = 300;
// 当前进度
private int mProgress;
private boolean isFinish;
public HJProgressButton(Context context, AttributeSet attrs) {
super(context, attrs);
// 获取自定义的属性
initAttrs(context, attrs);
initVariable();
this.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch ( event.getAction()){
case MotionEvent.ACTION_DOWN:
startAnimationProgress(300);
break;
case MotionEvent.ACTION_UP:
if(mProgress >= 300){
if(!isFinish){
mProgressButtonFinishCallback.onFinish();
return false;
}
}
if(mProgress != 300){
if(mProgress < 300){
stopAnimationProgress(mProgress);
mProgressButtonFinishCallback.onCancel();
}
}
break;
}
return false;
}
});
}
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.TasksCompletedView, 0, 0);
mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);
mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);
mCircleColor = typeArray.getColor(R.styleable.TasksCompletedView_circleColor, 0xFFFFFFFF);
mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xCCCCCC);
mRingC3Color = typeArray.getColor(R.styleable.TasksCompletedView_ringCColor, 0xCCCCCC);
mRingRadius = mRadius + mStrokeWidth;
mBigRingRadius = mRadius + mStrokeWidth * 2;
}
private void initVariable() {
mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);
mCirclePaint.setColor(mCircleColor);
mCirclePaint.setStyle(Paint.Style.FILL);
mRingPaint = new Paint();
mRingPaint.setAntiAlias(true);
mRingPaint.setColor(mRingColor);
mRingPaint.setStyle(Paint.Style.STROKE);
mRingPaint.setStrokeWidth(mStrokeWidth);
mRingC3Paint = new Paint();
mRingC3Paint.setAntiAlias(true);
mRingC3Paint.setColor(mRingC3Color);
mRingC3Paint.setStyle(Paint.Style.STROKE);
mRingC3Paint.setStrokeWidth(mStrokeWidth - 2);
}
@Override
protected void onDraw(Canvas canvas) {
mXCenter = getWidth() / 2;
mYCenter = getHeight() / 2;
canvas.drawCircle(mXCenter, mYCenter, mBigRingRadius, mCirclePaint);
if(mProgress == 300){
RectF oval = new RectF();
oval.left = (mXCenter - mRingRadius);
oval.top = (mYCenter - mRingRadius);
oval.right = mRingRadius + mXCenter;
oval.bottom = mRingRadius + mYCenter;
canvas.drawArc(oval, -90, 360, false, mCirclePaint); //
}else if (mProgress > 0) {
RectF oval = new RectF();
oval.left = (mXCenter - mRingRadius);
oval.top = (mYCenter - mRingRadius);
oval.right = mRingRadius + mXCenter;
oval.bottom = mRingRadius + mYCenter;
canvas.drawArc(oval, -90, 360, false, mRingC3Paint);
canvas.drawArc(oval, -90, ((float) mProgress / mTotalProgress) * 360, false, mRingPaint); //
}
}
private ProgressButtonFinishCallback mProgressButtonFinishCallback;
public void setListener(ProgressButtonFinishCallback progressButtonFinishCallback){
mProgressButtonFinishCallback = progressButtonFinishCallback;
}
public interface ProgressButtonFinishCallback{
void onFinish();
void onCancel();
}
private ValueAnimator startAnimator;
private ValueAnimator stopAnimator;
//按压开始
private void startAnimationProgress(int progress) {
isFinish = false;
if(null!=stopAnimator){
if(stopAnimator.isRunning()){
stopAnimator.cancel();
}
}
startAnimator = ValueAnimator.ofInt(0, progress);
startAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mProgress = (int) animation.getAnimatedValue();
invalidate();
if(mProgress >= 300){
if(!isFinish){
isFinish = true;
mProgressButtonFinishCallback.onFinish();
Log.v("startAnimationProgress", mProgress + "");
}
}
}
});
startAnimator.setInterpolator(new OvershootInterpolator());
startAnimator.setDuration(3000);
startAnimator.start();
}
//按压结束
private void stopAnimationProgress(int progress) {
if(null!=startAnimator) {
if (startAnimator.isRunning()) {
startAnimator.cancel();
}
}
stopAnimator = ValueAnimator.ofInt(progress, 0);
stopAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mProgress = (int) animation.getAnimatedValue();
invalidate();
}
});
stopAnimator.setInterpolator(new OvershootInterpolator());
stopAnimator.setDuration(3000);
stopAnimator.start();
}
}
<declare-styleable name="TasksCompletedView">
<attr name="radius" format="dimension"/>
<attr name="strokeWidth" format="dimension"/>
<attr name="circleColor" format="color"/>
<attr name="ringColor" format="color"/>
<attr name="ringCColor" format="color"/>
</declare-styleable>
xml
<cn.gs.m2m.phone.widget.HJProgressButton
android:id="@+id/myProgressButton"
android:layout_centerInParent="true"
android:layout_width="105dp"
app:radius="45dp"
app:strokeWidth="3dp"
app:circleColor="#FF405C"
app:ringColor="@color/white"
app:ringCColor="#FA0C45"
android:layout_height="105dp"
android:clickable="true"/>
Activity
hjProgressButton.setListener(new HJProgressButton.ProgressButtonFinishCallback() {
@Override
public void onFinish() {
}
@Override
public void onCancel() {
}
});
很简单的一个功能实现。