Android 以3d方式设置位图动画
我正在视图类中使用画布绘制一些位图。用户滑动以更改位图。我想通过以下方式设置位图之间切换的动画：Android 以3d方式设置位图动画,android,animation,canvas,3d,bitmap,Android,Animation,Canvas,3d,Bitmap,我正在视图类中使用画布绘制一些位图。用户滑动以更改位图。我想通过以下方式设置位图之间切换的动画： 有什么帮助吗？这是一个旋转的三维立方体的二维模拟。 希望我能说是我自己做的，但我最初在这里得到了代码： 下面是代码和小提琴： HTML5实验：旋转立体立方体 window.onload=startDemo； 功能点3D（x、y、z）{ 这个.x=x； 这个。y=y； 这个。z=z； this.rotateX=函数（角度）{ var rad、cosa、新浪、y、z rad=角度*Math.PI
有什么帮助吗？这是一个旋转的三维立方体的二维模拟。 希望我能说是我自己做的，但我最初在这里得到了代码： 下面是代码和小提琴：
HTML5实验：旋转立体立方体
window.onload=startDemo；
功能点3D（x、y、z）{
这个.x=x；
这个。y=y；
这个。z=z；
this.rotateX=函数（角度）{
var rad、cosa、新浪、y、z
rad=角度*Math.PI/180
cosa=Math.cos（rad）
sina=Math.sin（rad）
y=this.y*cosa-this.z*sina
z=这个.y*sina+这个.z*cosa
返回新的Point3D（此.x，y，z）
}
this.rotateY=函数（角度）{
var rad、cosa、新浪、x、z
rad=角度*Math.PI/180
cosa=Math.cos（rad）
sina=Math.sin（rad）
z=这个.z*cosa-这个.x*sina
x=这个.z*sina+这个.x*cosa
返回新的点3D（x，this.y，z）
}
this.rotateZ=函数（角度）{
var rad、cosa、新浪、x、y
rad=角度*Math.PI/180
cosa=Math.cos（rad）
sina=Math.sin（rad）
x=这个.x*cosa-这个.y*sina
y=这个.x*sina+这个.y*cosa
返回新的Point3D（x，y，this.z）
}
this.project=函数（viewWidth、viewHeight、fov、viewDistance）{
var因子，x，y
系数=视野/（视距+此.z）
x=此.x*系数+视图宽度/2
y=此.y*系数+视图高度/2
返回新的Point3D（x，y，this.z）
}
}
变量顶点=[
新的Point3D（-1,1，-1），
新的Point3D（1,1，-1），
新的Point3D（1，-1，-1），
新的Point3D（-1，-1，-1），
新的Point3D（-1,1,1），
新的Point3D（1,1,1），
新的Point3D（1，-1,1），
新的Point3D（-1，-1,1）
];
//定义构成6个面中每个面的顶点。这些数字是
//指向上面定义的顶点列表的索引。
var faces=[[0,1,2,3]、[1,5,6,2]、[5,4,7,6]、[4,0,3,7]、[0,4,5,1]、[3,2,6,7]；
//定义每个面的颜色。
变量颜色=[[255,0,0]，[0255,0]，[0,0255]，[255255,0]，[0255255]，[255,0255]；
var角=0；
/*从3个元素的数组构造CSS RGB值*/
函数arrayToRGB（arr）{
如果（arr.length==3）{
返回“rgb”（“+arr[0]+”、“+arr[1]+”、“+arr[2]+”）；
}
返回“rgb（0,0,0）”；
}
函数startDemo（）{
canvas=document.getElementById（“thecanvas”）；
if（canvas&&canvas.getContext）{
ctx=canvas.getContext（“2d”）；
设置间隔（循环，33）；
}
}
函数循环（）{
var t=新数组（）；
ctx.fillStyle=“rgb（0,0,0）”；
ctx.fillRect（0,0400250）；
对于（var i=0；i<!DOCTYPE html>
<html>
<head>
<title>HTML5 Experiment: A Rotating Solid Cube</title>
<script type="text/javascript">
window.onload = startDemo;
function Point3D(x,y,z) {
this.x = x;
this.y = y;
this.z = z;
this.rotateX = function(angle) {
var rad, cosa, sina, y, z
rad = angle * Math.PI / 180
cosa = Math.cos(rad)
sina = Math.sin(rad)
y = this.y * cosa - this.z * sina
z = this.y * sina + this.z * cosa
return new Point3D(this.x, y, z)
}
this.rotateY = function(angle) {
var rad, cosa, sina, x, z
rad = angle * Math.PI / 180
cosa = Math.cos(rad)
sina = Math.sin(rad)
z = this.z * cosa - this.x * sina
x = this.z * sina + this.x * cosa
return new Point3D(x,this.y, z)
}
this.rotateZ = function(angle) {
var rad, cosa, sina, x, y
rad = angle * Math.PI / 180
cosa = Math.cos(rad)
sina = Math.sin(rad)
x = this.x * cosa - this.y * sina
y = this.x * sina + this.y * cosa
return new Point3D(x, y, this.z)
}
this.project = function(viewWidth, viewHeight, fov, viewDistance) {
var factor, x, y
factor = fov / (viewDistance + this.z)
x = this.x * factor + viewWidth / 2
y = this.y * factor + viewHeight / 2
return new Point3D(x, y, this.z)
}
}
var vertices = [
new Point3D(-1,1,-1),
new Point3D(1,1,-1),
new Point3D(1,-1,-1),
new Point3D(-1,-1,-1),
new Point3D(-1,1,1),
new Point3D(1,1,1),
new Point3D(1,-1,1),
new Point3D(-1,-1,1)
];
// Define the vertices that compose each of the 6 faces. These numbers are
// indices to the vertex list defined above.
var faces = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]];
// Define the colors for each face.
var colors = [[255,0,0],[0,255,0],[0,0,255],[255,255,0],[0,255,255],[255,0,255]];
var angle = 0;
/* Constructs a CSS RGB value from an array of 3 elements. */
function arrayToRGB(arr) {
if( arr.length == 3 ) {
return "rgb(" + arr[0] + "," + arr[1] + "," + arr[2] + ")";
}
return "rgb(0,0,0)";
}
function startDemo() {
canvas = document.getElementById("thecanvas");
if( canvas && canvas.getContext ) {
ctx = canvas.getContext("2d");
setInterval(loop,33);
}
}
function loop() {
var t = new Array();
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0,0,400,250);
for( var i = 0; i < vertices.length; i++ ) {
var v = vertices[i];
var r = v.rotateX(angle).rotateY(angle);
var p = r.project(400,250,200,4);
t.push(p)
}
var avg_z = new Array();
for( var i = 0; i < faces.length; i++ ) {
var f = faces[i];
avg_z[i] = {"index":i, "z":(t[f[0]].z + t[f[1]].z + t[f[2]].z + t[f[3]].z) / 4.0};
}
avg_z.sort(function(a,b) {
return b.z - a.z;
});
for( var i = 0; i < faces.length; i++ ) {
var f = faces[avg_z[i].index]
ctx.fillStyle = arrayToRGB(colors[avg_z[i].index]);
ctx.beginPath()
ctx.moveTo(t[f[0]].x,t[f[0]].y)
ctx.lineTo(t[f[1]].x,t[f[1]].y)
ctx.lineTo(t[f[2]].x,t[f[2]].y)
ctx.lineTo(t[f[3]].x,t[f[3]].y)
ctx.closePath()
ctx.fill()
}
angle += 2
}
</script>
</head>
<body>
<canvas id="thecanvas" width="400" height="250">
Your browser does not support the HTML5 canvas element. <a href=#>Click here</a> to watch the video.
</canvas>
</body>
</html>