CN104615398B - 一种立方体显示方法及装置 - Google Patents
一种立方体显示方法及装置 Download PDFInfo
- Publication number
- CN104615398B CN104615398B CN201510058835.7A CN201510058835A CN104615398B CN 104615398 B CN104615398 B CN 104615398B CN 201510058835 A CN201510058835 A CN 201510058835A CN 104615398 B CN104615398 B CN 104615398B
- Authority
- CN
- China
- Prior art keywords
- css3
- face
- cube structure
- module
- cube
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Expired - Fee Related
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
- G06F3/1407—General aspects irrespective of display type, e.g. determination of decimal point position, display with fixed or driving decimal point, suppression of non-significant zeros
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种立方体显示方法及装置。所述方法包括：接收在屏幕上对立方体结构中至少一个面的选定操作；获取所要插入到所述至少一个面的动画的链接地址；将所述链接地址添加到所述立方体结构的css3动画属性中；根据所述css3动画属性将所述动画插入到所述立方体结构的至少一个面。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种立方体显示方法及装置。
背景技术
现有技术中，在终端的展示类应用程序中，可以以立方体形式进行立体效果的项目展示。但是，现有技术的立方体展示多应用在电脑端，作为单调的立方体展示，缺乏应用性；特别容易出现用户滑动一次，滚动多个面的现象；而且在立方体的上、下面添加图片时，会出现多余留白，不美观；立方体的每个面也不能再嵌套动画，用户体验度较差。
发明内容
为克服相关技术中存在的问题，本发明实施例提供一种立方体显示方法及装置。
一种立方体显示方法，包括：
接收在屏幕上对立方体结构中至少一个面的选定操作；
获取所要插入到所述至少一个面的动画的链接地址；
将所述链接地址添加到所述立方体结构的css3动画属性中；
根据所述css3动画属性将所述动画插入到所述立方体结构的至少一个面。
可选的，所述方法还包括：
接收在屏幕上的滑动操作；
获取所述滑动操作的滑动距离和滑动路径；
根据所述滑动距离和滑动路径计算所述立方体结构的css3旋转属性值和css3位移属性值；
根据所述css3旋转属性和css3位移属性控制所述立方体结构进行旋转和/或位移。
可选的，所述方法还包括：
接收在屏幕上对立方体结构中一个面的选定操作；
当接收到对所述选定的面的擦除操作时，根据所述擦除操作修改所述立方体结构的html5蒙版属性值；
根据所述修改后的html5蒙版属性值将所述选定的面的当前图层消除。
可选的，所述方法还包括：
当所述立方体结构旋转时，根据所述css3旋转属性和css3位移属性修改所述立方体结构每个面的css3透明度属性；
根据所述css3透明度属性调整所述立方体结构每个面的显示透明度。
一种立方体显示装置，包括：
接收模块，用于接收在屏幕上对立方体结构中至少一个面的选定操作；
第一获取模块，用于获取所要插入到所述至少一个面的动画的链接地址；
添加模块，用于将所述链接地址添加到所述立方体结构的css3动画属性中；
插入模块，用于根据所述css3动画属性将所述动画插入到所述立方体结构的至少一个面。
可选的，所述装置还包括：第二获取模块，计算模块和控制模块，
所述接收模块，用于接收在屏幕上的滑动操作；
第二获取模块，用于获取所述滑动操作的滑动距离和滑动路径；
计算模块，用于根据所述滑动距离和滑动路径计算所述立方体结构的css3旋转属性值和css3位移属性值；
控制模块，用于根据所述css3旋转属性和css3位移属性控制所述立方体结构进行旋转和/或位移。
可选的，所述装置还包括：第一修改模块和消除模块，
所述接收模块，用于接收在屏幕上对立方体结构中一个面的选定操作；
第一修改模块，用于当接收到对所述选定的面的擦除操作时，根据所述擦除操作修改所述立方体结构的html5蒙版属性值；
消除模块，用于根据所述修改后的html5蒙版属性值将所述选定的面的当前图层消除。
可选的，所述装置还包括：
第二修改模块，用于当所述立方体结构旋转时，根据所述css3旋转属性和css3位移属性修改所述立方体结构每个面的css3透明度属性；
调整模块，用于根据所述css3透明度属性调整所述立方体结构每个面的显示透明度。
本发明实施例中，用户选择终端显示的立方体结构的六个面中的一个面，在该立方体结构css3动画属性中添加想要插入到该面的动画链接地址，这样，在这个面上，就可以显示用户所期望的动画，用户可以方便快速地为如微信等应用程序中的用于展示的立方体结构的每个面上设置动画效果，降低立方体动画展示的复杂度，提高用户的体验度。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：
图1为本发明实施例中一种立方体显示方法的流程图；
图2为本发明另一实施例中一种立方体显示方法的流程图；
图3为本发明另一实施例中一种立方体显示方法的流程图；
图4为本发明另一实施例中一种立方体显示方法的流程图；
图5为本发明实施例中一种立方体显示装置的框图；
图6为本发明另一实施例中一种立方体显示装置的框图；
图7为本发明另一实施例中一种立方体显示装置的框图；
图8为本发明另一实施例中一种立方体显示装置的框图。
具体实施方式
以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。
图1为本发明实施例中一种立方体显示方法的流程图，如图1所示，该方法应用于终端，该方法包括以下步骤：
步骤S11，接收在屏幕上对立方体结构中至少一个面的选定操作；
步骤S12，获取所要插入到至少一个面的动画的链接地址；
步骤S13，将链接地址添加到立方体结构的css3动画属性中；
步骤S14，根据css3动画属性将动画插入到立方体结构的至少一个面。
例如，css3动画属性可以包括：transform属性、ratate属性、translate属性与animation属性。通过transform属性设置每个面的动画效果；而通过ratate(旋转)值和taranslate(位移)值得不同，使得六个面进行不同角度的旋转与位移构成立方体的六个面，用animation属性设置动画变化的过程。
本实施例中，用户选择终端显示的立方体结构的六个面中的一个面，在该立方体结构css3动画属性中添加想要插入到该面的动画链接地址，这样，在这个面上，就可以显示用户所期望的动画，用户可以方便快速地为如微信等应用程序中的用于展示的立方体结构的每个面上设置动画效果，降低立方体动画展示的复杂度，提高用户的体验度。
可选的，如图2所示，该方法还包括：
步骤S21，接收在屏幕上的滑动操作；
步骤S22，获取滑动操作的滑动距离和滑动路径；
步骤S23，根据滑动距离和滑动路径计算立方体结构的css3旋转属性值和css3位移属性值；
步骤S24，根据css3旋转属性和css3位移属性控制立方体结构进行旋转和/或位移。
例如，应用javascript设置用户的手势，添加css3旋转属性和css3位移属性，使得用户滑动时，立方体整体进行旋转不同的角度和方向，达到立方体旋转的立体效果。可以设置transition:transform 0.8s ease-out与transform-style:preserve-3d。transition是使得元素本身和她的子集的css属性值在一定时间内平滑的过渡，圆滑的已动画效果改变css的属性值。用transform-style属性定义在3D空间中被嵌套的元素的呈现方式，使子元素保留3D转换。
在可选方案中，使得立方体结构的展示可以根据用户的操作而旋转和/或位移，过渡效果平滑，页面不会变形，提高用户体验度。
可选的，如图3所示，该方法还包括：
步骤S31，接收在屏幕上对立方体结构中一个面的选定操作；
步骤S32，当接收到对选定的面的擦除操作时，根据擦除操作修改立方体结构的html5蒙版属性值；
步骤S33，根据修改后的html5蒙版属性值将选定的面的当前图层消除。
例如，通过html5中的canvas标签、canvas的API：getContext、lineCap、lineCap、lineWidth、drawImage()、globalCompositeOperation、moveTo()、save()、lineTo()、stroke()、restore()结合javascript对这些API的应用为立方体的首页设置蒙版擦除的效果。
在可选方案中，通过html5蒙版属性，使得立方体结构的展示效果更加灵活多样，用户体验度更好。
可选的，如图4所示，该方法还包括：
步骤S41，当立方体结构旋转时，根据css3旋转属性和css3位移属性修改立方体结构每个面的css3透明度属性；
步骤S42，根据css3透明度属性调整立方体结构每个面的显示透明度。
例如，css3透明度属性包括：position:absolute与backface-visibility:hidden。
position使得六个面绝对定位，可以进行位移旋转的变化。
backface-visibility使得每个面旋转到背面的时候看不见，不会影响当前元素的展示。
在可选方案中，当立方体结构旋转时，面向用户的面为可见，而背向用户的面可以设置为透明，使得每个面旋转到背面的时候看不见，不会影响当前元素的展示，提高用户视觉体验度。
本发明实施例中，还可以进一步设置css3属性包括：perspective:2000px、perspective-origin:50％50％、position:relative。
perspective用于设置元素被查看位置的视图，如果不设置该属性，将无法是用户产生3D的视觉效果。
perspective-origin用于设置3D效果的基点位置，使起子元素获得透视效果，必须与perspective属性结合使用才能发挥作用。
position设置相对定位，因为六个面都是相对进行旋转的。
图5为本发明实施例中一种立方体显示装置的框图，如图5所示，该装置应用于终端，包括：
接收模块501，用于接收在屏幕上对立方体结构中至少一个面的选定操作；
第一获取模块502，用于获取所要插入到所述至少一个面的动画的链接地址；
添加模块503，用于将所述链接地址添加到所述立方体结构的css3动画属性中；
插入模块504，用于根据所述css3动画属性将所述动画插入到所述立方体结构的至少一个面。
可选的，如图6所示，所述装置还包括：第二获取模块505，计算模块506和控制模块507，
所述接收模块501，用于接收在屏幕上的滑动操作；
第二获取模块505，用于获取所述滑动操作的滑动距离和滑动路径；
计算模块506，用于根据所述滑动距离和滑动路径计算所述立方体结构的css3旋转属性值和css3位移属性值；
控制模块507，用于根据所述css3旋转属性和css3位移属性控制所述立方体结构进行旋转和/或位移。
可选的，如图7所示，所述装置还包括：第一修改模块508和消除模块509，
所述接收模块501，用于接收在屏幕上对立方体结构中一个面的选定操作；
第一修改模块508，用于当接收到对所述选定的面的擦除操作时，根据所述擦除操作修改所述立方体结构的html5蒙版属性值；
消除模块509，用于根据所述修改后的html5蒙版属性值将所述选定的面的当前图层消除。
可选的，如图8所示，所述装置还包括：
第二修改模块510，用于当所述立方体结构旋转时，根据所述css3旋转属性和css3位移属性修改所述立方体结构每个面的css3透明度属性；
调整模块511，用于根据所述css3透明度属性调整所述立方体结构每个面的显示透明度。
关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
Claims (4)
1.一种立方体显示方法，其特征在于，包括：
接收在屏幕上对立方体结构中至少一个面的选定操作；
获取所要插入到所述至少一个面的动画的链接地址；
将所述链接地址添加到所述立方体结构的css3动画属性中；
根据所述css3动画属性将所述动画插入到所述立方体结构的至少一个面；
所述方法还包括：
接收在屏幕上的滑动操作；
获取所述滑动操作的滑动距离和滑动路径；
根据所述滑动距离和滑动路径计算所述立方体结构的css3旋转属性值和css3位移属性值；
根据所述css3旋转属性和css3位移属性控制所述立方体结构进行旋转和/或位移；
所述方法还包括：
当所述立方体结构旋转时，根据所述css3旋转属性和css3位移属性修改所述立方体结构每个面的css3透明度属性；
根据所述css3透明度属性调整所述立方体结构每个面的显示透明度。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括：
接收在屏幕上对立方体结构中一个面的选定操作；
当接收到对所述选定的面的擦除操作时，根据所述擦除操作修改所述立方体结构的html5蒙版属性值；
根据所述修改后的html5蒙版属性值将所述选定的面的当前图层消除。
3.一种立方体显示装置，其特征在于，包括：
接收模块，用于接收在屏幕上对立方体结构中至少一个面的选定操作；
第一获取模块，用于获取所要插入到所述至少一个面的动画的链接地址；
添加模块，用于将所述链接地址添加到所述立方体结构的css3动画属性中；
插入模块，用于根据所述css3动画属性将所述动画插入到所述立方体结构的至少一个面；
所述装置还包括：第二获取模块，计算模块和控制模块，
所述接收模块，用于接收在屏幕上的滑动操作；
第二获取模块，用于获取所述滑动操作的滑动距离和滑动路径；
计算模块，用于根据所述滑动距离和滑动路径计算所述立方体结构的css3旋转属性值和css3位移属性值；
控制模块，用于根据所述css3旋转属性和css3位移属性控制所述立方体结构进行旋转和/或位移；
所述装置还包括：
第二修改模块，用于当所述立方体结构旋转时，根据所述css3旋转属性和css3位移属性修改所述立方体结构每个面的css3透明度属性；
调整模块，用于根据所述css3透明度属性调整所述立方体结构每个面的显示透明度。
4.根据权利要求3所述的装置，其特征在于，所述装置还包括：第一修改模块和消除模块，
所述接收模块，用于接收在屏幕上对立方体结构中一个面的选定操作；
第一修改模块，用于当接收到对所述选定的面的擦除操作时，根据所述擦除操作修改所述立方体结构的html5蒙版属性值；
消除模块，用于根据所述修改后的html5蒙版属性值将所述选定的面的当前图层消除。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510058835.7A CN104615398B (zh) | 2015-02-04 | 2015-02-04 | 一种立方体显示方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510058835.7A CN104615398B (zh) | 2015-02-04 | 2015-02-04 | 一种立方体显示方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104615398A CN104615398A (zh) | 2015-05-13 |
| CN104615398B true CN104615398B (zh) | 2018-05-08 |
Family
ID=53149864
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510058835.7A Expired - Fee Related CN104615398B (zh) | 2015-02-04 | 2015-02-04 | 一种立方体显示方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104615398B (zh) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105045494A (zh) * | 2015-06-30 | 2015-11-11 | 天脉聚源（北京）科技有限公司 | 一种实时显示数据变化的方法及装置 |
| CN105447821B (zh) * | 2015-12-24 | 2019-07-09 | 广州乐霸网络科技有限公司 | 一种移动终端网页游戏自适应旋转的方法及装置 |
| CN109462771B (zh) * | 2018-11-26 | 2021-08-06 | 广东精鹰传媒股份有限公司 | 一种立体字幕条的二维效果实现方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102982164A (zh) * | 2012-12-07 | 2013-03-20 | 北京奇虎科技有限公司 | 一种浏览器页面呈现方法和浏览器 |
| CN103514626A (zh) * | 2012-06-20 | 2014-01-15 | 厦门高德软件有限公司 | 一种显示天气信息的方法及其装置和移动终端 |
| CN103561161A (zh) * | 2013-10-15 | 2014-02-05 | 广东明创软件科技有限公司 | 相册显示方法及其移动终端 |
| CN103823877A (zh) * | 2014-02-28 | 2014-05-28 | 胡勇建 | 实物展示方法、实物展示系统及对应的图片获取装置 |
| EP2815575A1 (en) * | 2012-02-13 | 2014-12-24 | Thomson Licensing | Method and device for inserting a 3d graphics animation in a 3d stereo content |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9035944B2 (en) * | 2010-08-06 | 2015-05-19 | Intergraph Corporation | 3-D model view manipulation apparatus |
| CN103530018B (zh) * | 2013-09-27 | 2017-07-28 | 深圳天珑无线科技有限公司 | 安卓操作系统中微件界面的建立方法及移动终端 |
-
2015
- 2015-02-04 CN CN201510058835.7A patent/CN104615398B/zh not_active Expired - Fee Related
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP2815575A1 (en) * | 2012-02-13 | 2014-12-24 | Thomson Licensing | Method and device for inserting a 3d graphics animation in a 3d stereo content |
| CN103514626A (zh) * | 2012-06-20 | 2014-01-15 | 厦门高德软件有限公司 | 一种显示天气信息的方法及其装置和移动终端 |
| CN102982164A (zh) * | 2012-12-07 | 2013-03-20 | 北京奇虎科技有限公司 | 一种浏览器页面呈现方法和浏览器 |
| CN103561161A (zh) * | 2013-10-15 | 2014-02-05 | 广东明创软件科技有限公司 | 相册显示方法及其移动终端 |
| CN103823877A (zh) * | 2014-02-28 | 2014-05-28 | 胡勇建 | 实物展示方法、实物展示系统及对应的图片获取装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104615398A (zh) | 2015-05-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Phan et al. | Interior design in augmented reality environment | |
| US8610714B2 (en) | Systems, methods, and computer-readable media for manipulating graphical objects | |
| JP7337104B2 (ja) | 拡張現実によるモデル動画多平面インタラクション方法、装置、デバイス及び記憶媒体 | |
| CN109643212B (zh) | 3d文档编辑系统 | |
| US10089715B2 (en) | System for parametric generation of custom scalable animated characters on the web | |
| US20140223271A1 (en) | Systems and methods of creating an animated content item | |
| KR20130137608A (ko) | 2차원 이미지들로부터 3차원 가상 투어들 발생 | |
| CN108133454B (zh) | 空间几何模型图像切换方法、装置、系统及交互设备 | |
| US9489759B1 (en) | File path translation for animation variables in an animation system | |
| CN104615398B (zh) | 一种立方体显示方法及装置 | |
| CN111724231A (zh) | 一种商品信息的展示方法和装置 | |
| US9092912B1 (en) | Apparatus and method for parallax, panorama and focus pull computer graphics | |
| US20140292754A1 (en) | Easy selection threshold | |
| CN103412732B (zh) | 一种基于三维弧线的资源展示方法及客户端 | |
| Pejić et al. | The application of augmented reality in the presentation of existing architectural facilities | |
| US7990398B2 (en) | Matching movement behavior in motion graphics | |
| Morehead et al. | Poster: BrainTrek-An immersive environment for investigating neuronal tissue | |
| CN110548289A (zh) | 一种三维控件显示的方法和装置 | |
| US20150100906A1 (en) | Multiple-Mode Interface For Spatial Input Devices | |
| CN112799507B (zh) | 人体虚拟模型展示方法、装置、电子设备及存储介质 | |
| Romli et al. | AR heart: a development of healthcare informative application using augmented reality | |
| US20180059880A1 (en) | Methods and systems for interactive three-dimensional electronic book | |
| CN103616989B (zh) | 一种自动调整光标位置的方法、装置及移动终端 | |
| Canadinc et al. | 3D-Model-Based Augmented Reality for Enhancing Physical Architectural Models | |
| US20210150815A1 (en) | Method and apparatus for creating augmented reality content |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: A cube display method and device Effective date of registration: 20210104 Granted publication date: 20180508 Pledgee: Inner Mongolia Huipu Energy Co.,Ltd. Pledgor: TVMINING (BEIJING) MEDIA TECHNOLOGY Co.,Ltd. Registration number: Y2020990001527 |
|
| CF01 | Termination of patent right due to non-payment of annual fee | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20180508 Termination date: 20220204 |