android立方体旋转动画,如何画出一个旋转的立方体

代码地址和动效图

�先上代码和图.

�cube

�用到了什么

如果你写过自定义view,那么你一定听过说过Matrix,Matrix就是一个3*3的矩阵,他可以负责图像的旋转,位移等操作.如果你对Matrix不太了解,可以去看看Matrix相关.

Matrix 原理

Matrix 详解

而Camera则是能提供"3D 版的Matrix",也就是说一个平面,可以通过Camera进行旋转甚至左右前后移动,然后会得到一个Matrix,该Matrix就可以让平面产生形变，从而达到3D的效果.

Matrix Camera

如何实现

如何画出一个立方体

主要分为2步

把面旋转成水平或者垂直

旋转完毕后 把面移到对应的位置

因为3D坐标系和2D坐标系都位于屏幕左上角,所以要调整下中心点.所以3D坐标系和2D坐标系都要调整中心点.

/**

*

* @param position 面的序号 0~3 面的序号后面提到

* @param canvas

*/

void drawCube(int position,Canvas canvas) {

camera.save();

//1.旋转成水平或者垂直

camera.rotateX(position % 2 * 90);

//2.旋转完毕后 把面移到对应的位置

switch (position) {

case 0:

break;

case 1:

camera.translate(0,100,100);

break;

case 2:

camera.translate(0,0,200);

break;

case 3:

camera.translate(0,100,-100);

break;

}

camera.getMatrix(matrix);

camera.restore();

//3.由于3D坐标系原点默认是屏幕左上角, 故调整3D中心点。而前乘再后乘,是matrix的一个小技巧

matrix.preTranslate(-viewWidth / 2, -viewHeight / 2);

matrix.postTranslate(viewWidth / 2, viewHeight / 2);

//4. 调整2D坐标系 并且画出正方体

canvas.save();

canvas.concat(matrix);

canvas.translate(viewWidth / 2, viewHeight / 2);

paint.setColor(colors[position % 2]);

canvas.drawRect(rectF, paint);

canvas.restore();

}

确定各个面和旋转轴

各个面的序号

结合动效图,可以看到立方体在旋转的过程中,最多只能看到3个面.

首先给各个面标上序号.

0,1,2,3是立方体的旋转的面(旋转过程中最多展示2个面,2,3在下面的图中无法看到,用箭头标示).

4是立方体的侧面(始终展示).

4的对立面始终不展示我就不标出来了

Paste_Image.png

可以看到上图的立方体是有倾斜角,初始状态的立方体是

Paste_Image.png

坐标系

android的3D的坐标系和2D是有一些不一样的.在Matrix Camera提到过.

而该立方体的坐标系是：

0面中心为原点

x,y轴正方向分别是0面右方和上方

0面朝里是z轴正方向

�开始旋转

绕Y轴旋转45度

初始状态的立方体有一定的倾斜角,这是因为立方体按Y轴旋转45度.要不然我们只能看到一个平面的正方体.

绕X轴进行旋转动画.

//degree 是旋转角度

void drawCube(int position,Canvas canvas) {

camera.save();

camera.rotateY(45);

camera.rotateX(degree + position % 2 * 90);

...

}

各个面画得先后顺序

0~3面的绘画顺序根据旋转角度做了特例判断

4面最后画

float degree = value * 360;

if(degree >= 0 && degree < 90 ) {

drawCube(1,canvas);

drawCube(0,canvas);

}

if(degree >= 90 && degree < 135) {

drawCube(2,canvas);

drawCube(1,canvas);

}

if(degree >= 135 && degree < 180) {

drawCube(1,canvas);

drawCube(2,canvas);

}

if(degree >= 180 && degree < 225) {

drawCube(3,canvas);

drawCube(2,canvas);

}

if(degree >= 225 && degree < 270) {

drawCube(2,canvas);

drawCube(3,canvas);

}

if(degree >= 270 && degree <= 360) {

drawCube(3,canvas);

drawCube(0,canvas);

}

camera.save();

camera.rotateY(45);

camera.rotateX(value * 360);

camera.rotateY(90);

camera.translate(100,0,100);

camera.getMatrix(matrix);

camera.restore();

// control center

matrix.preTranslate(-viewWidth / 2, -viewHeight / 2);

matrix.postTranslate(viewWidth / 2, viewHeight / 2);

canvas.save();

canvas.concat(matrix);

canvas.translate(viewWidth / 2, viewHeight / 2);

paint.setColor(0xFFFDFDE3);

canvas.drawRect(rectF, paint);

canvas.restore();

基本上就这样了,主要是练习了下matrix的使用