一种立方体显示方法及装置的制造方法
【技术领域】
[0001]本发明涉及计算机技术领域，尤其涉及一种立方体显示方法及装置。
【背景技术】
[0002]现有技术中，在终端的展示类应用程序中，可以以立方体形式进行立体效果的项目展示。但是，现有技术的立方体展示多应用在电脑端，作为单调的立方体展示，缺乏应用性；特别容易出现用户滑动一次，滚动多个面的现象；而且在立方体的上、下面添加图片时，会出现多余留白，不美观；立方体的每个面也不能再嵌套动画，用户体验度较差。
【发明内容】
[0003]为克服相关技术中存在的问题，本发明实施例提供一种立方体显示方法及装置。
[0004]一种立方体显示方法，包括:
[0005]接收在屏幕上对立方体结构中至少一个面的选定操作；
[0006]获取所要插入到所述至少一个面的动画的链接地址；
[0007]将所述链接地址添加到所述立方体结构的css3动画属性中；
[0008]根据所述css3动画属性将所述动画插入到所述立方体结构的至少一个面。
[0009]可选的，所述方法还包括:
[0010]接收在屏幕上的滑动操作；
[0011]获取所述滑动操作的滑动距离和滑动路径；
[0012]根据所述滑动距离和滑动路径计算所述立方体结构的css3旋转属性值和css3位移属性值；
[0013]根据所述css3旋转属性和css3位移属性控制所述立方体结构进行旋转和/或位移。
[0014]可选的，所述方法还包括:
[0015]接收在屏幕上对立方体结构中一个面的选定操作；
[0016]当接收到对所述选定的面的擦除操作时，根据所述擦除操作修改所述立方体结构的html5蒙版属性值；
[0017]根据所述修改后的html5蒙版属性值将所述选定的面的当前图层消除。
[0018]可选的，所述方法还包括:
[0019]当所述立方体结构旋转时，根据所述css3旋转属性和css3位移属性修改所述立方体结构每个面的css3透明度属性；
[0020]根据所述css3透明度属性调整所述立方体结构每个面的显示透明度。
[0021]—种立方体显示装置，包括:
[0022]接收模块，用于接收在屏幕上对立方体结构中至少一个面的选定操作；
[0023]第一获取模块，用于获取所要插入到所述至少一个面的动画的链接地址；
[0024]添加模块，用于将所述链接地址添加到所述立方体结构的css3动画属性中；
[0025]插入模块，用于根据所述css3动画属性将所述动画插入到所述立方体结构的至少一个面。
[0026]可选的，所述装置还包括:第二获取模块，计算模块和控制模块，
[0027]所述接收模块，用于接收在屏幕上的滑动操作；
[0028]第二获取模块，用于获取所述滑动操作的滑动距离和滑动路径；
[0029]计算模块，用于根据所述滑动距离和滑动路径计算所述立方体结构的css3旋转属性值和css3位移属性值；
[0030]控制模块，用于根据所述css3旋转属性和css3位移属性控制所述立方体结构进行旋转和/或位移。
[0031]可选的，所述装置还包括:第一修改模块和消除模块，
[0032]所述接收模块，用于接收在屏幕上对立方体结构中一个面的选定操作；
[0033]第一修改模块，用于当接收到对所述选定的面的擦除操作时，根据所述擦除操作修改所述立方体结构的html5蒙版属性值；
[0034]消除模块，用于根据所述修改后的html5蒙版属性值将所述选定的面的当前图层消除。
[0035]可选的，所述装置还包括:
[0036]第二修改模块，用于当所述立方体结构旋转时，根据所述css3旋转属性和css3位移属性修改所述立方体结构每个面的css3透明度属性；
[0037]调整模块，用于根据所述css3透明度属性调整所述立方体结构每个面的显示透明度。
[0038]本发明实施例中，用户选择终端显示的立方体结构的六个面中的一个面，在该立方体结构CSS3动画属性中添加想要插入到该面的动画链接地址，这样，在这个面上，就可以显示用户所期望的动画，用户可以方便快速地为如微信等应用程序中的用于展示的立方体结构的每个面上设置动画效果，降低立方体动画展示的复杂度，提高用户的体验度。
[0039]应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
【附图说明】
[0040]附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中:
[0041]图1为本发明实施例中一种立方体显示方法的流程图；
[0042]图2为本发明另一实施例中一种立方体显示方法的流程图；
[0043]图3为本发明另一实施例中一种立方体显示方法的流程图；
[0044]图4为本发明另一实施例中一种立方体显示方法的流程图；
[0045]图5为本发明实施例中一种立方体显示装置的框图；
[0046]图6为本发明另一实施例中一种立方体显示装置的框图；
[0047]图7为本发明另一实施例中一种立方体显示装置的框图；
[0048]图8为本发明另一实施例中一种立方体显示装置的框图。
【具体实施方式】
[0049]以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。
[0050]图1为本发明实施例中一种立方体显示方法的流程图，如图1所示，该方法应用于终端，该方法包括以下步骤:
[0051]步骤S11，接收在屏幕上对立方体结构中至少一个面的选定操作；
[0052]步骤S12，获取所要插入到至少一个面的动画的链接地址；
[0053]步骤S13，将链接地址添加到立方体结构的css3动画属性中；
[0054]步骤S14，根据css3动画属性将动画插入到立方体结构的至少一个面。
[0055]例如，css3动画属性可以包括〖transform属性、ratate属性、translate属性与animat1n属性。通过transform属性设置每个面的动画效果；而通过ratate (旋转)值和taranslate(位移)值得不同，使得六个面进行不同角度的旋转与位移构成立方体的六个面，用animat1n属性设置动画变化的过程。
[0056]本实施例中，用户选择终端显示的立方体结构的六个面中的一个面，在该立方体结构css3动画属性中添加想要插入到该面的动画链接地址，这样，在这个面上，就可以显示用户所期望的动画，用户可以方便快速地为如微信等应用程序中的用于展示的立方体结构的每个面上设置动画效果，降低立方体动画展示的复杂度，提高用户的体验度。
[0057]可选的，如图2所示，该方法还包括:
[0058]步骤S21，接收在屏幕上的滑动操作；
[0059]步骤S22，获取滑动操作的滑动距离和滑动路径；
[0060]步骤S23，根据滑动距离和滑动路径计算立方体结构的css3旋转属性值和css3位移属性值；
[0061]步骤S24，根据css3旋转属性和css3位移属性控制立方体结构进行旋转和/或位移。
[0062]例如，应用javascript设置用户的手势，添加css3旋转属性和css3位移属性，使得用户滑动时，立方体整体进行旋转不同的角度和方向，达到立方体旋转的立体效果。可以设置 transit1n:transform 0.8s ease-out 与 transform-style:preserve-3dotransit1n是使得元素本身和她的子集的css属性值在一定时间内平滑的过渡，圆滑的已动画效果改变css的属性值。用transform-style属性定义在3D空间中被嵌套的元素的呈现方式，使子元素保留3D转换。
[0063]在可选方案中，使得立方体结构的展示可以根据用户的操作而旋转和/或位移，过渡效果平滑，页面不会变形，提高用户体验度。
[0064]可选的，如图3所示，该方法还包括:
[0065]步骤S31，接收在屏幕上对立方体结构中一个面的选定操作；
[0066]步骤S32，当接收到对选定的面的擦除操作时，根据擦除操作修改立方体结构的html5蒙版属性值；
[0067]步骤S33，根据修改后的html5蒙版属性值将选定的面的当前图层消除。
[0068]例如，通过html5 中的 canvas 标签、canvas 的 AP1:getContext、lineCap、lineCap、lineWidth、drawlmage ()、globalCompositeOperat1n、moveTo ()、save ()、IineTo O、stroke O、restore O结合javascript对这些API的应用为立方体的首页设置蒙版擦除的效果。
[0069]在可选方案中，通过html5蒙版属性，使得立方体结构的展示效果更加灵活多样，用户体验度更好。
[0070]可选的，如图4所示，该方