最近挺闲的。对于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