自定义View-画一个会动的太极图

效果

步骤分解

像太极图这种比较规则的图形，一般就是用数学知识进行图形分解，分成一个个基本图形，比如线段，圆，矩形，扇形，多边形等，然后一步步绘制出来即可。

- 分解太极图

@Override
protected void onDraw(Canvas canvas) {

int width = getWidth();
int height = getHeight();

//平移画布到View的中间
canvas.translate(width / 2, height / 2);

//底色
canvas.drawColor(Color.GRAY);

//旋转，这里mDegrees与动画相关联
canvas.rotate(mDegrees,0,0);

//两个半圆
int radius = Math.min(width, height) / 2 - 40;
RectF rectF = new RectF(-radius, -radius, radius, radius);
canvas.drawArc(rectF, 90, 180, true, mPaintBlack);
canvas.drawArc(rectF, -90, 180, true, mPaintWhite);

//两个小圆
int smallRadius = radius / 2;
canvas.drawCircle(0, -smallRadius, smallRadius, mPaintBlack);
canvas.drawCircle(0, smallRadius, smallRadius, mPaintWhite);

//两个小点
int dotRadius = smallRadius / 4;
canvas.drawCircle(0, -smallRadius, dotRadius, mPaintWhite);
canvas.drawCircle(0, smallRadius, dotRadius, mPaintBlack);

}

利用动画，不断改变自定义View的一个属性

/*
* ，添加动画，让太极图动起来
* */
public void startRotate() {
ValueAnimator animator = ValueAnimator.ofInt(0,360);
animator.setDuration(2000);
animator.setInterpolator(new LinearInterpolator());
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mDegrees = (int) animation.getAnimatedValue();
invalidate();
}
});
animator.start();
}

这个效果比较简单，就不多做说明了。

动画的实现效果建议不要使用发送Handler的方式，直接使用Animation就可以了。

源码

https://github.com/jiangkang/KTools