CSS3 制作魔方 - 玩转魔方

2024-04-22 06:38

本文主要是介绍CSS3 制作魔方 - 玩转魔方,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在上一篇《CSS3 制作魔方 - 形成魔方》中介绍了一个完整魔方的绘制实现,本文将介绍魔方的玩转,支持上下左右每一层独立地旋转。先来一睹玩转的风采。

 

1.一个问题

由于魔方格的位置与转动的路径相关,仅依靠 rotateX,rotateY,rotateZ 单个的值无法直接表明其定位。如下图,第一个魔方格进行了特殊化处理。

当使用路径 rotateY(90)->rotateY(90)->rotateX(90)->rotateY(-90)  来旋转这个特殊魔方格时,Y 最终是 90度,X 是90 度,按路径旋转的结果如下图。

它并不等于 

Y  90度,X 90 度的旋转结果:rotateY(90)->rotateX(90)

 

 

2.解决办法

不能直接表示,就换一种方式。可以根据旋转的方向 重算魔方格在魔方中的坐标 并重绘魔方格,而旋转动画效果可以采用 逆向90度重绘再 transition 回来 的方式,详见后述。

 

3.自上而下实现旋转

3.1顶层视角

纵观魔方,实现各层的旋转它应该开放什么接口呢?进行旋转需要指定的数据是什么呢?这便形成了功能的顶层描述与接口需求:指定x,y,z轴向、给定第几层、规定转向完成90度的旋转。

于是在 MagicBox 类中可以增加方法:功能接口名称使用 Rotate,其参数为 轴向(axis)、层(level)、转向(turn)。

其中:

  • 轴向可取值 x、y、z
  • 层根据坐标体系从0开始 至 魔方阶数-1
  • 转向因为一层只会有两个方向,为了统一描述,总以朝轴正方向视角来分左向(left)与右向(right)。

旋转的层所包含的具体魔方格,对于顶层而言,则只需要 对旋转要求通知到位即可,而通知的内容为轴向(axis)、转向(turn),以及魔方阶数(dimension)。

有此描述,顶层 Rotate 方法非常简单,功能为找出指定的层进行通知即可:

/** MagicBox.Rotate 旋转* axis 轴向* level 层* turn 转向**/
this.Rotate = function(axis, level, turn){for(var i=0; i < this.cubes.length; i++) { if(this.cubes[i][axis] == level) {    // 该轴该层的才旋转this.cubes[i].Rotate(axis, turn, dimension);   }}
};

3.2魔方格接口实现

3.2.1旋转坐标变换

轴向有x,y,z,但每层的旋转只涉及到两个轴向,有(x,y)、(y,z)、(x,z),尽管魔方格看上去很多的,但坐标的转换却都遵循非常简单的变换规律,以4阶的 (x,y) 坐标转换为例,如下,黄色为同一个坐标旋转变换的值:

很容易得出规律,旋转前后的坐标中,总有一个是相同的,另两个的和是固定的,而且刚好为魔方阶数减1。

假设旋转前后坐标分别为(x1,y1)、(x2,y2),则:

往左旋转,坐标变换规律为:x2 = y1, y2 = 3 - x1,这其中的 3 为魔方阶数减1。

往右旋转,坐标变换规律为:x2 = 3 - y1, y2 = x1。

这恰是:我成为了你,而你是我的补

于是有了以下转换过程:

/** 坐标转换* axis 轴向* turn 转向* dimension 阶数**/
this.TransCoordinate = function(axis, turn, dimension){ if(axis == 'x'){              if( turn == 'left' ){var oriy = this.y;this.y = this.z;this.z = dimension - 1 - oriy;} else {var oriz = this.z;this.z = this.y;this.y = dimension - 1 - oriz;}} else if(axis == 'y'){if( turn == 'right' ){var orix = this.x;this.x = this.z;this.z = dimension - 1 - orix;} else {var oriz = this.z;this.z = this.x;this.x = dimension - 1 - oriz;}} else if(axis == 'z'){ if( turn == 'right' ){var orix = this.x;this.x = this.y;this.y = dimension - 1 - orix;} else {var oriy = this.y;this.y = this.x;this.x = dimension - 1 - oriy;}} 
}

3.2.2旋转重绘

在魔方格里,通过版面(block)在旋转方向上的变换达到旋转的效果,方式为根据旋转方向同向移动方向即可。

/** 将各 block 调整位置,重绘魔方格
* axis 轴向
* turn 转向
**/
this.ReDrawBlocks = function(axis, turn){var xyzDirects = [];xyzDirects['x'] = ["front", "up", "back", "down"]; xyzDirects['y'] = ["front", "right", "back", "left"]; xyzDirects['z'] = ["up", "right", "down", "left"]; var curDirects = xyzDirects[axis];for(var i=0; i < this.blocks.length; i++) { var index = curDirects.indexOf( this.blocks[i].direct );if(index > -1){var newIndex = turn == 'left' ? (index + 1) % 4 : (index + 4 - 1) % 4;this.blocks[i].direct = curDirects[newIndex]; this.blocks[i].DrawIn(this.Element);}	 }
}

3.2.3动画体现

调整好的魔方格,逆向旋转90度,则外观保持跟旋转前一样,这就有了进行动画的基础,动画的实质就是欺骗眼睛。

然后,利用 transition 让其过滤到不旋转的(即调整好的)外观即可达到效果。这样的好处是,魔方格不论在什么位置,每次相关的旋转角度仅是逆向的 90 度,问题局部化时,事情就变得简单

// 先停止动画效果,逆向 90 度,此时外观跟旋转前一致
this.Element.style["transition"] = "";
var rotateDegs = new Object();
rotateDegs[axis] = (turn == 'left' ? -90 : 90);  
this.Element.style["transform"] = this.FormatTransform(rotateDegs); 
// 旋转原点旋转的层都需要以魔方的中心点旋转
// 旋转原点是以元素自身来计算的,因所有魔方格都是从(0,0,0)平衡的,因此计算结果都一样
var centerX = this.blockSize * dimension / 2;
var centerY = this.blockSize * dimension / 2;
var centerZ = -this.blockSize * dimension / 2;
this.Element.style["transformOrigin"] = centerX + "px " + centerY + "px " + centerZ + "px";// 这样才能触发动画
setTimeout(function(obj){return function(){obj.Element.style["transform"] = obj.FormatTransform(); obj.Element.style["transition"] = "transform 0.3s";  // 0.3 秒};
}(this), 1);// 以下为transfrom 属性格式化的一个方法,这个属性值太长了又是旋转平移多组合
// 格式化 transform 属性
// css3 把旋转与平移混一起(真不好用)
this.FormatTransform = function (rotateDegs){ var rotatePart = "rotateX(0deg) rotateY(0deg) rotateZ(0deg)";if(rotateDegs){rotatePart = "rotateX(" + (rotateDegs.x | 0) + "deg) rotateY(" + (rotateDegs.y | 0) + "deg) rotateZ(" + (rotateDegs.z | 0) + "deg)";}	return rotatePart + " translate3d(" + (this.x * this.blockSize) + "px," + (this.y * this.blockSize) + "px,-" + (this.z * this.blockSize) + "px) ";		
} 

4.旋转控制实例效果

有了这个旋转的方法,通过给定一组旋转参数序列,可以让魔方自动运转,并且自动复原。

function onload(){//* 魔方绘制示例var magicBox = new MagicBox(5, 50);magicBox.DrawIn( document.querySelector(".wrap") ); var rotates = GenRotateActions(5, 10);for(var i=0; i<rotates.length; i++){    setTimeout(function(magicBox, rotate){return function(){magicBox.Rotate(rotate.axis, rotate.level, rotate.turn);};}(magicBox, rotates[i]), 500 * i);}/* 反向旋转,就能复原魔方 */for(var i=0; i<rotates.length; i++){    setTimeout(function(magicBox, rotate){return function(){magicBox.Rotate(rotate.axis, rotate.level, (rotate.turn == 'left' ? 'right' : 'left'));};}(magicBox, rotates[rotates.length -1 - i]), 5500 + 500 * i);}
}/** 产生一个指定数量的旋转序列数组* dimension 魔方阶数* count 序列数量**/
function GenRotateActions(dimension, count){var result = [];for(var i=0; i<count; i++){result[i] = {axis  : ['x','y','z'][Math.floor(Math.random() * 3)],level : Math.floor(Math.random() * dimension), turn  : ['left','right'][Math.floor(Math.random() * 2)]};}return result;
}

效果如下:

5.小结与附件

寻找共性向上抽象,形成统一的处理模式能够让处理模型变得简单。

本文实例,支持动态建立多阶的魔方,但对参数缺少边界检查,同时对旋转的是否结束未作标记或判断,感兴趣的朋友可以进一步完善它。

本实例代码发布在 https://github.com/triplestudio/magicbox 

 

 

这篇关于CSS3 制作魔方 - 玩转魔方的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/925044

相关文章

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Python制作一个PDF批量加密工具

《使用Python制作一个PDF批量加密工具》PDF批量加密‌是一种保护PDF文件安全性的方法,通过为多个PDF文件设置相同的密码,防止未经授权的用户访问这些文件,下面我们来看看如何使用Python制... 目录1.简介2.运行效果3.相关源码1.简介一个python写的PDF批量加密工具。PDF批量加密

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能