原生javascript+css3编写的3D魔方动画旋扭特效_javascript技巧

 
 
 
 
 var cache = {};
 (function (exports) {

 function Cube(opts) {
 opts = opts || {};
 this.parent = opts.parent; //插入到哪里
 this.browserPrefix = opts.browserPrefix;
 this.width = opts.width;
 this.height = opts.height;
 this.cubZ = opts.cubZ;
 this.face = opts.face;
 this.row = opts.row;
 this.column = opts.column;
 this.offsetX = this.column * (this.width + opts.marginX); //
 this.offsetY = this.row * (this.height + opts.marginY);//
 this.offsetZ = this.face * (this.cubZ + opts.marginZ);//
 this.positiveZ = this.cubZ / 2;
 this.negativeZ = -this.cubZ / 2;
 this.cubFaceInfo = opts.cubFaceInfo;
 this.dimension = opts.dimension;
 this.centerX = (this.dimension * this.width + (this.dimension - 1) * opts.marginX) / 2;
 this.centerY = (this.dimension * this.height + (this.dimension - 1) * opts.marginY) / 2;
 this.centerZ = (this.dimension * this.cubZ + (this.dimension - 1) * opts.marginZ) / 2;
 this.translateX = this.offsetX - this.centerX; //把中心点设为原点
 this.translateY = this.offsetY - this.centerY; //
 this.translateZ = this.cubZ / 2 + this.offsetZ - this.centerZ; //offsetZ按上面计算应该跟x,y在一个平面上即后面，但实际上由于要形成立方体，在Z轴上已经后退了cubZ/2个距离，故为和上面保持一致在一个面上，这里需要再加回cubZ/2个距离，使默认的xyz原点都在一个平面上即立方体后面左上角三维坐标系，以这个点作为参考点平移和设置旋转原点
 this.cubeFace = [];
 this.rotateTransfrom = "";
 this.init();

 }
 Cube.prototype = {
 init: function () {
 this.createCubeBox();
 this.createFront();
 this.createBack();
 this.createTop();
 this.createBottom();
 this.createLeft();
 this.createRight();

 },
 createCubeBox: function () {
 this.Box = document.createElement('div');
 this.Box.style.width = this.width + "px";
 this.Box.style.height = this.height + "px";
 this.Box.style.left = "50%";
 this.Box.style.top = "50%";
 this.Box.style.position = "absolute";
 this.Box.style[this.browserPrefix + "TransformStyle"] = "preserve-3d";
 this.Box.style[this.browserPrefix + "Perspective"] = "0";
 // this.Scene.style[this.browserPrefix + "backfaceVisibility"] = "hidden";
 this.intalTransform = "translateZ(" + this.translateZ + "px) translateX(" + this.translateX + "px) translateY(" + this.translateY + "px)";
 this.Box.style[this.browserPrefix + "Transform"] = this.intalTransform;
 this.Box.style[this.browserPrefix + "TransformOrigin"] = "" + (-this.translateX) + "px " + (-this.translateY) + "px " + (-this.translateZ) + "px";
 this.parent.appendChild(this.Box);
 this.x = window.getComputedStyle(this.Box).getPropertyValue('left');
 this.y = window.getComputedStyle(this.Box).getPropertyValue('top');
 this.matrix3d = window.getComputedStyle(this.Box).getPropertyValue('transform');
 },
 createFace: function () {
 var face = document.createElement('div');
 face.style.margin = 0;
 face.style.position = "absolute";
 face.style.width = this.width + "px";
 face.style.height = this.height + "px";
 return face;
 },
 createFront: function () {
 var face = this.createFace();
 face.style[this.browserPrefix + "Transform"] = "translateZ(" + this.positiveZ + "px) "
 this.cubeFace.push(face);
 this.front = face;
 this.Box.appendChild(face);
 },
 createBack: function () {
 var face = this.createFace();
 face.style[this.browserPrefix + "Transform"] = "translateZ(" + this.negativeZ + "px) ";
 this.cubeFace.push(face);
 this.back = face;
 this.Box.appendChild(face);
 },
 createTop: function () {
 var face = this.createFace();
 face.style[this.browserPrefix + "Transform"] = "rotateX(90deg) translateZ(" + this.positiveZ + "px) ";
 this.cubeFace.push(face);
 this.top = face;
 this.Box.appendChild(face);
 },
 createBottom: function () {
 var face = this.createFace();
 face.style[this.browserPrefix + "Transform"] = "rotateX(90deg) translateZ(" + this.negativeZ + "px) ";
 this.cubeFace.push(face);
 this.bottom = face;
 this.Box.appendChild(face);
 },
 createLeft: function () {
 var face = this.createFace();
 face.style[this.browserPrefix + "Transform"] = "rotateY(90deg) translateZ(" + this.negativeZ + "px) ";
 this.cubeFace.push(face);
 this.left = face;
 this.Box.appendChild(face);
 },
 createRight: function () {
 var face = this.createFace();
 face.style[this.browserPrefix + "Transform"] = "rotateY(90deg) translateZ(" + (this.positiveZ) + "px) ";
 this.cubeFace.push(face);
 this.right = face;
 this.Box.appendChild(face);
 }

 }
 exports.magicCube = function (opts) {
 opts = opts || {};
 this.parent = opts.parent || document.getElementsByTagName('body')[0];
 this.dimension = opts.dimension || 3; //魔方级数
 this.cubWidth = opts.cubWidth || 50; //单个立方体宽度
 this.cubHidth = opts.cubHidth || 50; //单个立方体告诉
 this.marginLeft = opts.marginLeft || 0;
 this.marginTop = opts.marginLeft || 0;
 this.marginZ = opts.marginZ || 0;
 this.cubZ = opts.cubZ || 50; //单个立方体Z轴距离
 this.sceneWidth = opts.sceneWidth; //3d场景宽度
 this.sceneHeight = opts.sceneHeight; //3d场景高度
 this.Perspective = opts.Perspective || 0; //投影值
 this.cubFaceInfo = opts.cubFaceInfo || { front: { backGround: "rgba(0,255,255,.5)" }, back: { backGround: "rgba(153,204,255,.5)" }, left: { backGround: "rgba(128,0,128,.5)" }, right: { backGround: "rgba(255,0,255,.5)" }, top: { backGround: "rgba(255,153,204,.5)" }, bottom: { backGround: "rgba(0,204,255,.5)" }, inner: { backGround: "rgba(100,100,100,.5)" } }; //立方体面信息
 this.angle = opts.angle || 90;
 this.rollbackPoint = opts.rollbackPoint || 10;
 this.faceCount = this.dimension * this.dimension; //每面立方体个数
 this.count = this.dimension * this.dimension * this.dimension; //立方体总个数
 this.cubes = [];
 this.browserPrefix = "";
 this.isRunning = 0;
 this.timer = null;
 this.rotateFace;
 this.moveDirect = true;//正向随机动作还是回归，默认为正向
 this.cubeMoveQueue = [];
 this.rollMoveStack = [];//动作回归的堆栈
 this.init();
 };
 magicCube.prototype = {
 init: function () {
 this.start();
 },
 create3dScene: function () {
 this.Scene = document.createElement('div');
 //this.Scene.className = "cube";
 var width = this.sceneWidth || this.clientWidth,
 height = this.sceneHeight || this.clientHeight;
 this.Scene.style.width = width + "px";
 this.Scene.style.height = height + "px";
 this.Scene.style.position = "relative";
 this.Scene.style[this.browserPrefix + "TransformStyle"] = "preserve-3d";
 this.Scene.style[this.browserPrefix + "Perspective"] = this.Perspective + "px";
 // this.Scene.style[this.browserPrefix + "backfaceVisibility"] = "hidden";
 this.Scene.style[this.browserPrefix + "Transform"] = "rotateX(-30deg) rotateY(30deg) ";
 this.parent.appendChild(this.Scene);

 },
 create: function (face, row, column) {
 return new Cube({
 parent: this.Scene,
 dimension: this.dimension,
 width: this.cubWidth,
 height: this.cubHidth,
 cubZ: this.cubZ,
 face: face,
 row: row,
 column: column,
 browserPrefix: this.browserPrefix,
 cubFaceInfo: this.cubFaceInfo,
 marginX: this.marginLeft,
 marginY: this.marginTop,
 marginZ: this.marginZ,
 dimension: this.dimension
 });
 },
 createMagicCube: function (index) {
 var face = 0, row = 0, column = 0;
 for (var i = 0; i < this.count; i++) {
 this.cubes.push(this.create(face, row, column));
 this.cubes[this.cubes.length - 1].index = this.cubes.length - 1;
 column++;
 if ((i + 1) % this.dimension === 0) {
 row++;
 column = 0;
 }
 if ((i + 1) % this.faceCount === 0) {
 face++;
 row = 0;
 }
 }
 },
 drawBackGroundColor: function () {
 for (var face in this.cubFaceInfo) {
 if (face == "inner") {
 this.setInnerBKColor(this.cubFaceInfo[face].backGround);
 }
 else {
 var cube = this.getCubesByFace(face);
 for (var i = 0, len = cube.length; i < len; i++) {
 cube[i][face].style.background = this.cubFaceInfo[face].backGround;
 }
 }
 }

 },
 setInnerBKColor: function (color) {
 for (var i = 0; i < this.count; i++) {
 for (var j = 0; j < 6; j++) {
 if (this.cubes[i].cubeFace[j].style.background == "") {
 this.cubes[i].cubeFace[j].style.background = color;
 }
 }
 }
 },
 getZFace: function (zIndex) {
 var zFace = [];
 if (zIndex < 1 || zIndex > this.dimension)
 return null;
 for (var i = (zIndex - 1) * this.faceCount; i < zIndex * this.faceCount; i++) {
 zFace.push(this.cubes[i]);
 }
 return zFace;
 },
 getXFace: function (xIndex) {
 var xFace = [];
 if (xIndex < 1 || xIndex > this.dimension)
 return null;
 for (var i = 0; i < this.count; i++) {
 if (i % this.dimension == 0)
 xFace.push(this.cubes[i + xIndex - 1]);
 }
 return xFace;
 },
 getYFace: function (yIndex) {
 var yFace = [];
 if (yIndex < 1 || yIndex > this.dimension)
 return null;
 for (var i = 0; i < this.count; i++) {
 if (i % this.faceCount == (yIndex - 1) * this.dimension) {
 for (var j = 0; j < this.dimension; j++)
 yFace.push(this.cubes[i + j]);
 }
 }
 return yFace;
 },
 getSideCubes: function (cubes, circleIndex) {
 var sides = [], top = [], left = [], bottom = [], right = [];
 if (circleIndex < 0 || circleIndex > this.dimension / 2 - 1)
 return null;
 for (var i = 0, count = this.dimension - circleIndex * 2; i < count; i++) {
 top.push(cubes[circleIndex * this.dimension + circleIndex + i]);
 left.push(cubes[circleIndex * this.dimension + circleIndex + i * this.dimension]);
 bottom.push(cubes[(this.dimension - 1 - circleIndex) * this.dimension + circleIndex + i]);
 right.push(cubes[circleIndex * this.dimension + circleIndex + i * this.dimension + (this.dimension - (circleIndex * 2) - 1)]);
 }
 sides.push(this.orderByDesc(top));
 sides.push(left);
 sides.push(bottom);
 sides.push(this.orderByDesc(right));
 return sides;
 },

 getCubesByFace: function (face) {
 switch (face) {
 case "front": return this.getZFace(this.dimension);
 case "back": return this.getZFace(1);
 case "left": return this.getXFace(1);
 case "right": return this.getXFace(this.dimension);
 case "top": return this.getYFace(1);
 case "bottom": return this.getYFace(this.dimension);
 }
 },
 moveMagicCube: function () {
 if (this.cubes.length < 1) return;
 //var cubes = this.getYFace(2);
 //for (var i = 0, len = cubes.length; i < len; i++) {
 // cubes[i].Box.className = "rotate";
 //}
 //随机产生3D转动方向
 this.isRunning = 0;
 var direct = this.random(1, 3), rotateDirect = "", getFaceFun;
 // direct=3;
 switch (direct) {
 case 1: rotateDirect = "rotateX"; getFaceFun = this.getXFace; break;
 case 2: rotateDirect = "rotateY"; getFaceFun = this.getYFace; break;
 case 3: rotateDirect = "rotateZ"; getFaceFun = this.getZFace; break;
 }
 this.rotateFace = rotateDirect;
 this.cubeRotateStatus = [];
 for (var i = 1; i <= this.dimension; i++) {
 var status = this.random(0, 2);
 this.cubeRotateStatus.push(status);
 switch (status) {
 case 0: break;//不转动
 case 1: this.rotateBox(this.angle, rotateDirect, i, getFaceFun.call(this, i)); break;//正向转动90
 case 2: this.rotateBox(-this.angle, rotateDirect, i, getFaceFun.call(this, i)); break;//反向转动90
 }

 }

 var flag = false;
 for (var i = 0, len = this.cubeRotateStatus.length; i < len; i++) {
 if (this.cubeRotateStatus[i]) {
 flag = true;
 break;
 }
 }
 if (!flag) {//一个都没转的情况 则强制补充一个
 var index = this.random(1, this.dimension);
 this.rotateBox(this.angle, rotateDirect, index, getFaceFun.call(this, index)); //正向转动90
 this.cubeRotateStatus[index - 1] = 1;//全都不转动 默认选出一个 使其正向转动指定度数
 }
 setTimeout(this.timerFun, 100);
 this.rollMoveStack.push({ rotateFace: this.rotateFace, cubeRotateStatus: this.cubeRotateStatus });//记录动作状态
 if (this.rollMoveStack.length == this.rollbackPoint)//判断当达到阀值时切换动作方向为回归
 this.moveDirect = false;

 },
 moveRollBackCube: function () {
 var record = this.rollMoveStack.pop(), getFaceFun;
 this.rotateFace = record.rotateFace;
 this.isRunning = 0;
 switch (record.rotateFace) {
 case "rotateX": getFaceFun = this.getXFace; break;
 case "rotateY": getFaceFun = this.getYFace; break;
 case "rotateZ": getFaceFun = this.getZFace; break;
 }
 this.cubeRotateStatus = [];
 for (var i = 0, len = record.cubeRotateStatus.length; i < len; i++) {
 var dimensionIndex = i+1, status = record.cubeRotateStatus[i];
 if (status == 1) {
 this.cubeRotateStatus.push(2);//1 变2，2变1
 this.rotateBox(-this.angle, record.rotateFace, dimensionIndex, getFaceFun.call(this, dimensionIndex)); //反向转动90
 }
 else if (status == 2) {
 this.cubeRotateStatus.push(1);//1 变2，2变1
 this.rotateBox(this.angle, record.rotateFace, dimensionIndex, getFaceFun.call(this, dimensionIndex)); //反向转动90
 }
 else {
 this.cubeRotateStatus.push(0);
 }
 }
 setTimeout(this.timerFun, 100);
 if (this.rollMoveStack.length == 0)//判断当达到0时切换动作为正向随机
 this.moveDirect = true;
 },
 intersect: function (source, target) {
 var data = [];
 for (var i = 0, len = source.length; i < len; i++) {
 var index = target.indexOf(source[i]);
 if (index >= 0)
 data.push(source[i])
 }
 return data;
 },
 orderByDesc: function (datas) {
 var temp;
 for (var i = 0; i < datas.length - 1; i++) {
 for (var j = i + 1; j < datas.length; j++) {
 if (parseFloat(datas[i].index) < parseFloat(datas[j].index)) {
 temp = datas[i];
 datas[i] = datas[j];
 datas[j] = temp;
 }
 }
 }
 return datas;
 },
 getSideBackGround: function (sideFaces, face) {
 var backGrounds = [];
 for (var i = 0, len = sideFaces.length; i < len; i++) {
 backGrounds.push(sideFaces[i][face].style.background);
 }
 return backGrounds;
 },
 setRotateDirectSideBackGround: function (faceCubes, sideFace, offset, status) {
 var oldSides = this.getSideCubes(faceCubes, 0), backColor = [];
 var offsetNIndex, offsetPIndex;
 for (var j = 0; j < 4; j++) {
 offsetPIndex = (j - offset + 4) % 4;
 offsetNIndex = (j + offset) % 4;
 if (this.rotateFace == "rotateY") {
 if (status == 1)//正向
 {
 backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], sideFace[offsetPIndex]);
 }
 else//反向
 {
 backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], sideFace[offsetNIndex]);
 }
 }
 else {
 if (status == 2)//正向
 {
 backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], sideFace[offsetPIndex]);
 }
 else//反向
 {
 backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], sideFace[offsetNIndex]);
 }
 }

 }
 for (var j = 0; j < 4; j++) {
 for (var k = 0; k < oldSides[j].length; k++) {
 oldSides[j][k][sideFace[j]].style.background = backColor[j][k];
 }
 }
 },
 setRotateOtherDirectSideBackGround: function (faceCubes, otherFace, offset, status) {
 var oldSides = [], backColor = [];
 var offsetNIndex, offsetPIndex;
 for (var i = 0; i <= parseInt(this.dimension / 2) - 1; i++) {
 oldSides = this.getSideCubes(faceCubes, i), backColor = [];
 for (var j = 0; j < 4; j++) {
 offsetPIndex = (j - offset + 4) % 4;
 offsetNIndex = (j + offset) % 4;
 if (this.rotateFace == "rotateY") {
 if (status == 1)//正向
 {
 backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], otherFace);
 }
 else//反向
 {
 backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], otherFace);
 }
 }
 else {
 if (status == 2)//正向
 {
 backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], otherFace);
 }
 else//反向
 {
 backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], otherFace);
 }
 }

 }
 for (var j = 0; j < 4; j++) {
 for (var k = 0; k < oldSides[j].length; k++) {
 oldSides[j][k][otherFace].style.background = backColor[j][k];
 }
 }
 }

 },
 animationEnd: function () {
 var offset = this.angle / 90, faceCubes = [], otherFace;
 var zSideFace = ["top", "left", "bottom", "right"], xSideFace = ["back", "top", "front", "bottom"], ySideFace = ["back", "left", "front", "right"], sideFace = [];
 for (var i = 0, len = this.cubeRotateStatus.length; i < len; i++) {
 var status = this.cubeRotateStatus[i];
 if (status) {
 var dimensionIndex = i + 1;
 switch (this.rotateFace) {
 case "rotateX": faceCubes = this.getXFace(dimensionIndex); sideFace = xSideFace; if (dimensionIndex == 1) otherFace = "left"; else if (dimensionIndex == this.dimension) otherFace = "right"; break;
 case "rotateY": faceCubes = this.getYFace(dimensionIndex); sideFace = ySideFace; if (dimensionIndex == 1) otherFace = "top"; else if (dimensionIndex == this.dimension) otherFace = "bottom"; break;
 case "rotateZ": faceCubes = this.getZFace(dimensionIndex); sideFace = zSideFace; if (dimensionIndex == 1) otherFace = "back"; else if (dimensionIndex == this.dimension) otherFace = "front"; break;
 }
 this.setRotateDirectSideBackGround(faceCubes, sideFace, offset, status);
 if (dimensionIndex == 1 || dimensionIndex == this.dimension)
 this.setRotateOtherDirectSideBackGround(faceCubes, otherFace, offset, status);
 }

 }
 // console.info(this.rollMoveStack.length + "," + this.moveDirect);
 if (this.moveDirect)
 this.moveMagicCube();
 else
 this.moveRollBackCube();
 // alert("运行结束");
 },
 bindAnimationEvent: function () {
 var loopMove = function () {
 cache.magicCube.isRunning--;//由于按组转动，顾要等组成员都完成再进行新的动画
 if (cache.magicCube.isRunning == 0)
 cache.magicCube.animationEnd();
 }
 for (var i = 0; i < this.count; i++) {

 this.prefixedEvent(this.cubes[i].Box, "AnimationEnd", loopMove, true);
 }
 cache.magicCube = this;//缓存，避免内存泄露
 },
 rotateBox: function (angle, rotateDirect, faceIndex, cubes) {
 if (cubes != null) {
 var startStatus = rotateDirect + "(0deg)", endStatus = rotateDirect + "(" + angle + "deg)";
 // this.changeAnimationStatus("mydhua", startStatus, endStatus)
 for (var i = 0, len = cubes.length; i < len; i++) {
 var ruleName = "roateRule" + faceIndex + i;
 this.isRunning++;//组成员转动统计
 //if (cubes[i].rotateTransfrom != "")
 // startStatus = cubes[i].rotateTransfrom;
 cubes[i].rotateTransfrom = endStatus;
 if (this.findKeyframesRule(ruleName) == null)
 this.createKeyframesRule(ruleName, cubes[i].intalTransform + " " + startStatus, cubes[i].intalTransform + " " + endStatus);
 else
 this.changeAnimationStatus(ruleName, cubes[i].intalTransform + " " + startStatus, cubes[i].intalTransform + " " + endStatus);
 cubes[i].Box.style[this.browserPrefix + "AnimationName"] = "none";
 this.cubeMoveQueue.push({ cube: cubes[i], rule: ruleName });
 }
 }
 },
 findKeyframesRule: function (rule) {
 var ruleName = this.browserPrefix == "" ? "KEYFRAMES_RULE" : this.browserPrefix.toUpperCase() + "_KEYFRAMES_RULE";
 var ss = document.styleSheets;
 for (var i = 0; i < ss.length; ++i) {
 for (var j = 0; j < ss[i].cssRules.length; ++j) {
 if (ss[i].cssRules[j].type == window.CSSRule[ruleName] && ss[i].cssRules[j].name == rule) { return ss[i].cssRules[j]; }
 }
 }
 return null;
 },
 createKeyframesRule: function (rule, startStatus, endStatus) {
 var prefix = this.browserPrefix == "" ? "" : "-" + this.browserPrefix + "-";
 var sheet;
 if (document.styleSheets.length < 1)
 sheet = this.createSheets();
 else
 sheet = document.styleSheets[0];
 var selectorText = "@" + prefix + "keyframes " + rule;
 var cssText = "0% { " + prefix + "transform: " + startStatus + "; } 100% { " + prefix + "transform: " + endStatus + "; }"
 if (sheet.insertRule) {
 sheet.insertRule(selectorText + "{" + cssText + "}", 0);
 } else if (sheet.addRule) {//兼容IE
 sheet.addRule(selectorText, cssText, 0);
 }
 },
 removeKeyframeRule: function (keyframes) {
 var length = keyframes.cssRules.length;
 var keyframeString = [];
 for (var i = 0; i < length; i++) {
 keyframeString.push(keyframes.cssRules[i].keyText);
 }
 //移除动画帧规则
 for (var i = 0, j = length; i < j; i++) {
 if (this.browserPrefix == "webkit" || this.browserPrefix == "Moz")
 keyframes.deleteRule(keyframeString[i]);
 else
 keyframes.deleteRule(i); //兼容IE
 }
 },
 changeAnimationStatus: function (animationName, startStatus, endStatus) {
 var keyframes = this.findKeyframesRule(animationName);
 this.removeKeyframeRule(keyframes);
 //重新设置帧规则
 var prefix = this.browserPrefix == "" ? "" : "-" + this.browserPrefix + "-";
 keyframes.appendRule("0% { " + prefix + "transform: " + startStatus + "; }");
 keyframes.appendRule("100% { " + prefix + "transform: " + endStatus + "; }");
 },
 createSheets: function () {
 // 创建 








    



    

        
 
            产品服务
            发展历程
            企业资讯
            企业文化
            关于我们
            加入我们
            联系我们
            网站导航
            网站律师
        
        

            

                 
                     
             
             

                 
                     
             
             

                 
                     
             
             

                 
                     
             
             

                 
                     
中国扫黄打非网
                 
             
        
        
 
            
            
Copyright © 2019-2025 51dongshi.net 版权所有
            

                赣ICP备2023002352号-34
            
            
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
            
        
    




Top