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

更多相关文章

随机推荐