Android中 3D 圓形旋轉動態實現

最近挺閒的。對於android的畫圖機制想了深入瞭解。發現java的2維畫圖機制其實也挺強大的。能做出很多我們很炫的效果。此篇文章就講述了通過cavans 的api 實現三維效果的動態旋轉圖。

先上效果圖：

android中自帶的roate旋轉使用的是平面旋轉。這裏我們想要實現立體的旋轉圓形。此間我們需要的核心只是就是：
1.畫矩形的內切橢圓 2.動態改變矩形半徑，並且連續畫橢圓。達到圓形旋轉的效果 3.判斷狀態實現圓形旋轉前面和背面顏色的切換。

第一步自定義imageview 重寫ondraw方法：註釋很詳細不寫了

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by moram on 2016/11/7.
 */
public class DycmalCircleView extends ImageView{

    /**
     * 前面顏色
     */
    private int frontColor;

    /**
     * 後面顏色
     */
    private int backColor;

    private Paint mPaint=new Paint();

    /**
     * 當前是前面還是後面
     */
    private boolean isback=false;

    /**
     * 變化率 0到100
     */
    private int changeRate=2;

    /** 默認的控件的寬度*/
    private int defaultWidth=0;
    private int defaultHeight=0;

    /**
     * 變化的x的長度
     */
    private int x=0;

    /**
     * 增加還是減少標誌位
     */
    private boolean add=true;

    public DycmalCircleView(Context context) {
        super(context);
    }

    public DycmalCircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setCustomAttributes(context,attrs);
    }

    public DycmalCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setCustomAttributes(context,attrs);
    }


    @Override
    protected void onDraw(Canvas canvas) {

        if (defaultWidth == 0) {
            //獲取控件的寬度
            defaultWidth = getWidth();

        }
        if (defaultHeight == 0) {
            //獲取控件的高度 可用作計算半徑
            defaultHeight = getHeight();
        }
        int radius = 0;
        //取最小爲半徑
        radius = (defaultWidth < defaultHeight ? defaultWidth
                : defaultHeight) / 2;

//        canvas.drawRect(60, 90, 160, 100, new Paint());// 長方形

        //橢圓所在矩形 Y座標固定，X左邊變化
        RectF rectF = new RectF(x, 0, 2*radius - x, 2*radius);
        mPaint.setStyle(Paint.Style.FILL);//填充
        canvas.drawOval(rectF, mPaint);// 橢圓
        if (add && x <= radius) {// X變大即橢圓變小
            x = x + changeRate*radius/100;
        } else if (x > 0) {// X變小即橢圓變大
            if(!isback&& add){ //剛開始變大 則變換顏色並且通過標記位判斷顏色
                isback=true;
                mPaint.setColor(backColor);
            }else if(isback && add){
                isback=false;
                mPaint.setColor(frontColor);
            }
            x = x -  changeRate*radius/100;
            add = false;
        } else {
            add = true;
        }
        invalidate();//重新繪製
        super.onDraw(canvas);

    }


    private void setCustomAttributes(Context context,AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.dycmalCircle);
        changeRate = a.getInt(
                R.styleable.dycmalCircle_changerate, 2);
        frontColor = a
                .getColor(R.styleable.dycmalCircle_frontcolor,
                        0);
        backColor = a.getColor(
                R.styleable.dycmalCircle_backcolor, 0);
        mPaint.setColor(frontColor);
    }
}

接下來自定義的style文件：寫在attrs中：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="dycmalCircle">

        <attr name="changerate" format="integer"/>
        <attr name="frontcolor" format="color"/>
        <attr name="backcolor" format="color"/>

    </declare-styleable>

</resources>

接下來在佈局中使用就行了：

<com.szh.decymalcircle.DycmalCircleView
        android:layout_width="200dp"
        android:layout_height="200dp"
        dycmalCircle:changerate="2"
        dycmalCircle:frontcolor="#00a"
        dycmalCircle:backcolor="#0f0"/>
不要忘了加上 xmlns:dycmalCircle="http://schemas.android.com/apk/res-auto"

好了做了這些我們就實現了。其實最主要的就是畫橢圓的思想。這樣就能實現三維旋轉的效果了。

下面是github地址：需要的自己看一下。https://github.com/MrHangVIP/DecymalCircle.git