CN106326299A - 一种智能终端显示特别效果的方法和系统 - Google Patents

一种智能终端显示特别效果的方法和系统 Download PDF

Info

Publication number
CN106326299A
CN106326299A CN201510381868.5A CN201510381868A CN106326299A CN 106326299 A CN106326299 A CN 106326299A CN 201510381868 A CN201510381868 A CN 201510381868A CN 106326299 A CN106326299 A CN 106326299A
Authority
CN
China
Prior art keywords
canvas
intelligent terminal
snowflake
user interface
functional unit
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.)
Pending
Application number
CN201510381868.5A
Other languages
English (en)
Inventor
石磊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
TVM Beijing Technology Co Ltd
Original Assignee
TVM Beijing Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by TVM Beijing Technology Co Ltd filed Critical TVM Beijing Technology Co Ltd
Priority to CN201510381868.5A priority Critical patent/CN106326299A/zh
Publication of CN106326299A publication Critical patent/CN106326299A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种智能终端显示特别效果的方法和系统，该方法包括：在智能终端用户界面设置Canvas画布标签；创建一个Canvas画布；设置Canvas画布参数；在Canvas画布实现雪花飘落效果；通过DOM的CSS属性设置，禁用Canvas画布的默认事件，点击Canvas画布界面无触发事件；Canvas画布元素功能关闭。本发明技术方案可以简化智能终端显示动画雪花飘落的方案，减少智能终端的运算量和带宽占用，在不降低用户体验的条件下延长智能终端的待机，而且用户界面的功能单元可以正常的使用，更方便终端用户的操作，符合智能终端应用多元化发展的需求。

Description

一种智能终端显示特别效果的方法和系统
技术领域
本发明涉及互联网技术领域，特别涉及一种智能终端显示特别效果的方法和系统。
背景技术
随着网络的迅速发展，互联网成为大量信息的载体，文字、图片、数据库、音频、视频多媒体等不同类型内容大量出现于网络，再加以各式各样的网页设计，互联网内容呈现飞速发展的趋势。
在网页表现方面，HTML5中的CSS3特效样式、Canvas、webgl的采用，不仅加强了网页的视觉效果，甚至能够使用户在网页当中看到三维立体特效。由于语义上及其ARIA的功能增强，新的HTML标签，如<header>，<footer>，<nav>，<section>，<aside>等等，使得阅读者更加容易去访问内容。通过HTML5标签<video>和<audio>来访问视频和音频资源，页面播放媒体的简便性大大改善。由于<canvas>标签的引入，HTML5的画图标签能够实现更多的互动和动画效果，网页和用户之间实现了更好的互动。
在HTML5页面中，经常需要用到在终端页面呈现随机洒落雪花、金币或鲜花的设计，以动画效果来烘托气氛，产生强烈的视觉冲击力，可以给浏览者留下深刻的印象，加强用户的使用体验。现有实现随机洒落雪花的技术一般包括：
1、使用Flash。采用flash设计雪花的图案，通过Flash的动画功能实现雪花图案的移动，从而来实现雪花飘落的视觉效果。
2、利用JS实现。通过JS直接产生随机数来控制雪花的产生和滑动轨迹，实现雪花飘落的效果。
3、使用插件。利用已有的雪花飘落的插件，如开源的SnowStorm插件可以实现雪花飘落效果。
上述方案，由于需要采用专门的技术方案来实现雪花飘落，需要在网页侧增加代码，增加了智能终端的运算量，也加大了带宽占用，容易造成CPU发热和缩短待机；而且，采用上述技术会在国内单元上添加一层用户界面，用户点击屏幕后，无法触发功能界面的功能，不利于智能终端的使用。
发明内容
本发明提供一种智能终端显示特别效果的方法和系统，可以简化智能终端显示动画雪花飘落的方案，减少智能终端的运算量和带宽占用，在不降低用户体验的条件下延长智能终端的待机，而且用户界面的功能单元可以正常的使用，更方便终端用户的操作，符合智能终端应用多元化发展的需求。
本发明的技术方案提供了一种智能终端显示特别效果的方法，包括以下步骤：
在智能终端用户界面设置Canvas画布标签；
创建一个Canvas画布；
在Canvas画布实现雪花飘落效果。
进一步的，Canvas画布位于用户界面的最上层。
进一步的，Canvas画布的width和height属性同需要显示飘落雪花的区域大小一致。
进一步的，智能终端随机生成雪花数量。
进一步的，智能终端随机生成雪花下落路径。
进一步的，智能终端设置雪花飘落的持续时间。
进一步的，通过DOM的CSS属性设置，禁用Canvas画布的默认事件；
点击用户界面，Canvas画布元素无触发事件。
进一步的，若Canvas画布下层的用户界面有功能单元，则点击功能单元则触发该功能单元。
本发明的技术方案还提供了一种智能终端显示特别效果的系统，包括Canvas画布元素、功能单元和其他元素单元，其中，
Canvas画布元素用于显示雪花飘落效果；
功能单元位于Canvas画布下，可以包括不少于一个的功能单元，组成智能终端的功能页面；
其他元素单元为构成用户界面的其他单元，为非功能单元。
进一步的，禁用Canvas画布元素的默认事件。
本发明技术方案由于在智能终端网页设计中采用了Canvas画布元素，可以直接使用html5提供的函数实现动画雪花飘落的效果，避免了现有显示雪花动画实现方案的复杂方案，压缩了网页设计的代码编码数量，减少智能终端的运算量和带宽占用，在不降低用户体验的条件下延长智能终端的待机，更好满足智能终端用户的使用需求，符合智能终端应用多元化发展的需求。
本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。
下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。
附图说明
附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：
图1为本发明实施例一中智能终端显示特别效果的方法流程图；
图2为本发明实施例二中在雪花动画中点击功能单元的方法流程图；
图3为本发明实施例一和二中智能终端显示特别效果的系统结构图。
具体实施方式
以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。
图1为本发明实施例一中智能终端显示特别效果的方法流程图。如图1所示，该流程包括以下步骤：
步骤101、在智能终端用户界面设置Canvas画布标签。
在用户界面设置Canvas画布标签，为启动Canvas画布做准备。
步骤102、创建一个Canvas画布。
该Canvas画布位于用户界面的最上层，用于覆盖原有的功能单元。画布显示雪花飘落的特效后，将会在屏幕的最上层显示雪花飘落的动画图案，原有的功能页面将会位于雪花动画的下层。
步骤103、设置Canvas画布的参数。
设置Canvas画布的width和height属性，同需要显示飘落雪花的区域大小一致；
设置随机生成雪花数量，实现雪花布满显示屏幕的效果；
随机生成雪花下落路径，实现雪花自由下落的显示效果；
设置雪花飘落的持续时间，实现雪花飘落持续时间的效果。
通过DOM的CSS属性设置，禁用Canvas画布的默认事件，点击用户界面，Canvas画布元素无触发事件。
步骤104、在Canvas画布实现雪花飘落效果。
根据步骤103所设置的Canvas画布参数，实现雪花布满屏幕、自由飘落的动画效果；
点击用户界面，不会触发Canvas画布的默认事件；
若Canvas画布下层的用户界面有功能单元，则点击功能单元则触发该功能单元。
步骤105、Canvas画布元素功能关闭。
在Canvas画布预先设定的持续时间结束以后，Canvas画布元素功能自动关闭，此时原有页面的功能单元和其他元素单元恢复原状态，成为用户界面最上面的界面。
图2为本发明实施例一中在雪花动画中点击功能单元的方法流程图。如图1所示，该流程包括以下步骤：
步骤201、在智能终端用户界面设置Canvas画布标签。
在用户界面设置Canvas画布标签，为启动Canvas画布做准备。
步骤202、创建一个Canvas画布。
该Canvas画布位于用户界面的最上层，用于覆盖原有的功能单元。画布显示雪花飘落的特效后，将会在屏幕的最上层显示雪花飘落的动画图案，原有的功能页面将会位于雪花动画的下层。
步骤103、设置Canvas画布的参数。
设置Canvas画布的width和height属性，同需要显示飘落雪花的区域大小一致；
设置随机生成雪花数量，实现雪花布满显示屏幕的效果；
随机生成雪花下落路径，实现雪花自由下落的显示效果；
设置雪花飘落的持续时间，实现雪花飘落持续时间的效果。
通过DOM的CSS属性设置，禁用Canvas画布的默认事件，点击用户界面，Canvas画布元素无触发事件。
步骤204、在Canvas画布实现雪花飘落效果。
根据步骤203所设置的Canvas画布参数，实现雪花布满屏幕、自由飘落的动画效果。
点击用户界面，不会触发Canvas画布的默认事件。
若Canvas画布下层的用户界面有功能单元，则点击功能单元则触发该功能单元。
步骤205、点击功能单元。
在Canvas画布预先设定的持续时间没有之前，点击Canvas画布下层的功能单元。
步骤206、功能单元启动，Canvas画布元素功能关闭。
Canvas画布元素功能及其下层的功能单元和其他元素单元关闭，所点击的功能单元的功能启动。
为了实现上述智能终端显示特别效果的流程，本实施例还提供了一种智能终端显示特别效果的系统，图3为本发明实施例一中智能终端显示特别效果的系统结构图。如图3所示，该系统包括Canvas画布元素301、功能单元302和其他元素单元303，其中，
Canvas画布元素用于显示雪花飘落效果，位于用户界面的最上层；
功能单元位于Canvas画布下，可以包括不少于一个的功能单元，组成智能终端的功能页面；
其他元素单元为构成用户界面的其他单元，为非功能单元。
功能单元位和其他元素单元构成智能终端的用户界面的原有内容。当启动雪花动画的特效时，在用户界面上添加一层Canvas画布，用户就会体验到在屏幕上雪花飘落的显示效果。
进一步的，禁用Canvas画布元素的默认事件，用户点击屏幕时，不会吃法Canvas画布的功能；如果点击的位置有功能单元，尽管隔着Canvas画布，但是仍然触发该功能单元。
上述实施例中的技术方案由于在智能终端显示界面采用了html5的Canvas画布元素，不必添加附加的显示方案即可实现雪花全屏飘落的效果，简化了智能终端的显示雪花动画的方案，减少智能终端的运算量和带宽占用，在不降低用户体验的条件下延长智能终端的待机，而且用户界面的功能单元可以正常的使用，更方便终端用户的操作，符合智能终端应用多元化发展的需求。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种智能终端显示特别效果的方法，其特征在于，包括以下步骤：
在智能终端用户界面设置Canvas画布标签；
创建一个Canvas画布；
在Canvas画布实现雪花飘落效果。
2.根据权利要求1所述的方法，其特征在于，Canvas画布位于用户界面的最上层。
3.根据权利要求1所述的方法，其特征在于，Canvas画布的width和height属性同需要显示飘落雪花的区域大小一致。
4.根据权利要求1所述的方法，其特征在于，随机生成雪花数量。
5.根据权利要求1所述的方法，其特征在于，随机生成雪花下落路径。
6.根据权利要求1所述的方法，其特征在于，设置雪花飘落的持续时间。
7.根据权利要求1所述的方法，其特征在于，进一步包括：
通过DOM的CSS属性设置，禁用Canvas画布的默认事件；
点击用户界面，Canvas画布元素无触发事件。
8.根据权利要求7所述的方法，其特征在于：
若Canvas画布下层的用户界面有功能单元，则点击功能单元则触发该功能单元。
9.一种智能终端显示特别效果的系统，其特征在于，包括Canvas画布元素、功能单元和其他元素单元，其中，
Canvas画布元素用于显示雪花飘落效果；
功能单元位于Canvas画布下，可以包括不少于一个的功能单元，组成智能终端的功能页面；
其他元素单元为构成用户界面的其他单元，为非功能单元。
10.根据权利要求9所述的系统，其特征在于，进一步包括：
禁用Canvas画布元素的默认事件。
CN201510381868.5A 2015-07-02 2015-07-02 一种智能终端显示特别效果的方法和系统 Pending CN106326299A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510381868.5A CN106326299A (zh) 2015-07-02 2015-07-02 一种智能终端显示特别效果的方法和系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510381868.5A CN106326299A (zh) 2015-07-02 2015-07-02 一种智能终端显示特别效果的方法和系统

Publications (1)

Publication Number Publication Date
CN106326299A true CN106326299A (zh) 2017-01-11

Family

ID=57726280

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510381868.5A Pending CN106326299A (zh) 2015-07-02 2015-07-02 一种智能终端显示特别效果的方法和系统

Country Status (1)

Country Link
CN (1) CN106326299A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107329758A (zh) * 2017-06-30 2017-11-07 武汉斗鱼网络科技有限公司 页面全屏设置方法、装置及用户终端
CN107423060A (zh) * 2017-07-07 2017-12-01 北京小米移动软件有限公司 动画效果的呈现方法、装置及终端
CN111143734A (zh) * 2019-12-27 2020-05-12 苏宁云计算有限公司 一种页面添加效果元素的方法及系统

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101901274A (zh) * 2010-08-11 2010-12-01 深圳市茁壮网络股份有限公司 实现页面特效的方法及装置
US20130124980A1 (en) * 2011-11-16 2013-05-16 Future IP Limited Framework for creating interactive digital content
CN104484361A (zh) * 2014-12-02 2015-04-01 百度在线网络技术（北京）有限公司 信息的展现方法及装置
CN104504090A (zh) * 2014-12-26 2015-04-08 北京奇虎科技有限公司 一种网页中图像的处理方法和装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101901274A (zh) * 2010-08-11 2010-12-01 深圳市茁壮网络股份有限公司 实现页面特效的方法及装置
US20130124980A1 (en) * 2011-11-16 2013-05-16 Future IP Limited Framework for creating interactive digital content
CN104484361A (zh) * 2014-12-02 2015-04-01 百度在线网络技术（北京）有限公司 信息的展现方法及装置
CN104504090A (zh) * 2014-12-26 2015-04-08 北京奇虎科技有限公司 一种网页中图像的处理方法和装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
.NET学习网: "Html5的Canvas雪花特效", 《WWW.LMWLOVE.COM/AC/ID1122》 *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107329758A (zh) * 2017-06-30 2017-11-07 武汉斗鱼网络科技有限公司 页面全屏设置方法、装置及用户终端
CN107423060A (zh) * 2017-07-07 2017-12-01 北京小米移动软件有限公司 动画效果的呈现方法、装置及终端
CN111143734A (zh) * 2019-12-27 2020-05-12 苏宁云计算有限公司 一种页面添加效果元素的方法及系统

Similar Documents

Publication Publication Date Title
CN111669623B (zh) 视频特效的处理方法、装置以及电子设备
CN105677366B (zh) 基于iOS系统中UITableView实现无限循环滚动选择的方法
CN110489116B (zh) 一种页面的渲染方法、装置及计算机存储介质
CN105279251B (zh) 虚拟礼物展示方法和装置
CN103092612B (zh) 实现安卓操作系统3d桌面贴图的方法及电子装置
CN108228253A (zh) 一种app构建方法及系统
CN106095437B (zh) 用户界面从右到左rtl的布局方式的实现方法及装置
CN109656654B (zh) 大屏场景的编辑方法及计算机可读存储介质
CN106250104B (zh) 一种针对服务器的远程操作系统、方法及装置
CN109842818A (zh) 一种视频播放方法、装置、计算机设备及存储介质
WO2016054549A1 (en) Application prototyping tool
CN110297996A (zh) 基于h5页面的动画显示方法、装置、设备及存储介质
CN104820589B (zh) 一种动态适配网页的方法及其装置
CN103631865B (zh) 网页生成方法及设备
CN106354355A (zh) 用户界面布局方法、装置及系统
CN105335445A (zh) 布局显示方法和装置
CN108681454A (zh) 一种网页可视化构件开发方法
CN105824517A (zh) 一种桌面的实现方法和装置
Marriott et al. Fast and efficient client-side adaptivity for SVG
CN109683978A (zh) 一种流式布局界面渲染的方法、装置以及电子设备
CN107066244B (zh) 一种移动终端应用界面的生成方法和装置
CN103412748A (zh) 嵌入式平台的用户界面的显示控制方法、装置及系统
CN106326299A (zh) 一种智能终端显示特别效果的方法和系统
CN108460818A (zh) 一种数据导出及动画播放的方法及装置
CN103870508A (zh) 一种网页缩放方法、装置和系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20170111