自定義View-畫一個會動的太極圖

效果

步驟分解

像太極圖這種比較規則的圖形，一般就是用數學知識進行圖形分解，分成一個個基本圖形，比如線段，圓，矩形，扇形，多邊形等，然後一步步繪制出來即可。

- 分解太極圖

@Override
    protected void onDraw(Canvas canvas) {

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

        //平移畫布到View的中間
        canvas.translate(width / , height / );

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

        //旋轉，這裡mDegrees與動畫相關聯
        canvas.rotate(mDegrees,,);

        //兩個半圓
        int radius = Math.min(width, height) /  - ;
        RectF rectF = new RectF(-radius, -radius, radius, radius);
        canvas.drawArc(rectF, , , true, mPaintBlack);
        canvas.drawArc(rectF, -, , true, mPaintWhite);

        //兩個小圓
        int smallRadius = radius / ;
        canvas.drawCircle(, -smallRadius, smallRadius, mPaintBlack);
        canvas.drawCircle(, smallRadius, smallRadius, mPaintWhite);

        //兩個小點
        int dotRadius = smallRadius / ;
        canvas.drawCircle(, -smallRadius, dotRadius, mPaintWhite);
        canvas.drawCircle(, smallRadius, dotRadius, mPaintBlack);

    }
           

• 利用動畫，不斷改變自定義View的一個屬性

/*
    * ，添加動畫，讓太極圖動起來
    * */
    public void startRotate() {
        ValueAnimator animator = ValueAnimator.ofInt(,);
        animator.setDuration();
        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