WO2017045480A1 - 网页动画渲染方法及装置 - Google Patents

网页动画渲染方法及装置 Download PDF

Info

Publication number
WO2017045480A1
WO2017045480A1 PCT/CN2016/090733 CN2016090733W WO2017045480A1 WO 2017045480 A1 WO2017045480 A1 WO 2017045480A1 CN 2016090733 W CN2016090733 W CN 2016090733W WO 2017045480 A1 WO2017045480 A1 WO 2017045480A1
Authority
WO
WIPO (PCT)
Prior art keywords
animation
container
webpage
elements
preset
Prior art date
Application number
PCT/CN2016/090733
Other languages
English (en)
French (fr)
Inventor
林强生
张龙华
向建中
薄景仁
李彬
Original Assignee
广州视睿电子科技有限公司
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 广州视睿电子科技有限公司 filed Critical 广州视睿电子科技有限公司
Publication of WO2017045480A1 publication Critical patent/WO2017045480A1/zh

Links

Images

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

Definitions

  • the present invention relates to the technical field of WEB platforms, and in particular, to a webpage animation rendering method and a webpage animation rendering apparatus.
  • Web (Internet) web page is a file organized in accordance with the HTML (HyperText Mark-up Language) format on the World Wide Web.
  • HTML HyperText Mark-up Language
  • Web pages can include information such as graphics, text, sound, and video, which are collectively referred to as web page elements.
  • Web desktop application refers to the consistency of web pages in operation and experience with ordinary computer desktop applications.
  • technologies such as html5 (the fifth revision of hypertext markup language) and css3 (cascading style sheets)
  • html5 the fifth revision of hypertext markup language
  • css3 cascading style sheets
  • the humanized and smart web page interactive experience will slowly penetrate into the mainstream.
  • current mainstream websites such as Weibo, cloud disk or search engine, do not over-design the animation of webpage elements, and will load animation effects with a single element when necessary, which is not very good with the desktop.
  • Application animation rendering is so beautiful that it can't implement the web desktop application of the product well.
  • a webpage animation rendering method includes the steps of:
  • the animation attribute is deleted to obtain a new container; if the number of elements is greater than a preset number threshold and The container of the element does not contain an animation attribute, and the container is used as a new container; if the number of the elements is less than or equal to a preset number threshold, the animation attribute to be rendered is added to the container of the element to obtain a new container;
  • the element is loaded into the webpage according to a preset data loading manner, and the corresponding animation is rendered when the new container contains the animation property.
  • a webpage animation rendering device includes an element quantity detecting module, an animation attribute processing module and a data loading module connected in sequence;
  • An element quantity detecting module configured to detect a quantity of a page to be loaded and a preset number threshold
  • An animation attribute processing module configured to: when the number of elements is greater than a preset number threshold and the container of the element includes an animation attribute, delete the animation attribute to obtain a new container; and the number of the elements is greater than a preset number threshold And when the container of the element does not contain an animation attribute, the container is used as a new container; when the number of the elements is less than or equal to a preset number threshold, the animation attribute to be rendered is added to the container of the element, and New container
  • the data loading module is configured to load the element into the webpage according to a preset data loading manner, and perform corresponding animation rendering when the new container includes the animation property.
  • the webpage animation rendering method and device of the present invention automatically adopts appropriate animation rendering when the number of elements to be loaded is greater than a preset number threshold according to the number of elements to be loaded and the preset number of thresholds. Perform animated rendering, and perform corresponding animation rendering when the number of elements to be loaded is not greater than the preset number threshold.
  • the invention realizes the adaptation of the webpage animation rendering, automatically adapts and reasonably loads the corresponding animation effect under the premise of ensuring that the user completes all operations on the web application, and improves the user webpage use experience.
  • FIG. 1 is a schematic flow chart of an embodiment of a method according to the present invention.
  • FIG. 2 is a schematic structural view of an embodiment of a device of the present invention.
  • a webpage animation rendering method includes the following steps:
  • step S110 Detecting the number of elements to be loaded on the webpage and the size of the preset number threshold. If the number of the elements is greater than the preset number threshold and the container of the element includes the animation attribute, the process proceeds to step S120, if the number of the elements is greater than the preset number threshold. The container of the element does not contain the animation attribute, proceeds to step S130, if the number of elements is less than or equal to the preset number threshold, proceeds to step S140;
  • step S120 deleting the animation attribute to obtain a new container, and proceeding to step S150;
  • step S130 the container as a new container, proceeds to step S150;
  • step S140 adding the animation attribute to be rendered to the container of the element, to obtain a new container, proceeds to step S150;
  • the number of elements to be loaded on the webpage refers to the number of elements on the webpage that need to perform the animation effect when the webpage mimics the animation effect of the desktop application, and the elements to be loaded are stored in the container.
  • the number of elements that can be supported by the animation effect to be loaded When the number of elements to be loaded is greater than the preset number threshold, the animation effect is turned off, that is, animation is not performed, and when the number of elements to be loaded is not greater than the preset number threshold, the loading is performed. The corresponding animation effect.
  • the container may be marked with historical animation attributes.
  • the animation attributes on the container need to be deleted first, and then the subsequent steps are performed.
  • the subsequent steps are performed directly.
  • the animation attribute to be rendered needs to be marked on the container, and then the subsequent steps are performed.
  • Animation properties can also be marked on each element in the container, but there will be more content on the page during subsequent loading, so this is not the case during normal implementation.
  • Asynchronous data loading and direct data loading are the ways in which current mainstream web pages load data.
  • the present invention provides corresponding loading schemes for these two methods.
  • Asynchronous data loading refers to the web script javascript (since after opening the web page, after loading the basic content of the page such as the page frame. The translated scripting language) initiates a data request to the server again, and then loads the data returned by the request into the web page in this "asynchronous" form.
  • Straight out data loading means that the page is opened instantly, all the data of the web page has been loaded, and it is rendered to the user's browser at one time.
  • the present invention is not limited to the implementation of the two loading modes, as long as it is determined by setting the judgment condition whether to load the animation and further setting conditions in the subsequent embodiments to determine the dimensions in which the animation effects are loaded.
  • the elements are directly loaded into the web page through template tools, such as the webpage script javascript handlerbar (combined data + template can generate corresponding html), etc., and according to the animation attributes marked by the final container, such as swinging Animation effects such as flipping, fading, zooming in and out, etc., are animated by techniques such as css3 or html5. If the final container does not contain animation properties, no animation is rendered.
  • template tools such as the webpage script javascript handlerbar (combined data + template can generate corresponding html), etc.
  • animation attributes marked by the final container such as swinging Animation effects such as flipping, fading, zooming in and out, etc., are animated by techniques such as css3 or html5. If the final container does not contain animation properties, no animation is rendered.
  • the animation property of the new container needs to be modified first, for example, by adding a class style attribute or the like on the new container, and then modifying the animation property of the new container, and then marking according to the final container.
  • the animation properties are animated by techniques such as css3 or html5. If the final container does not contain animation properties, no animation rendering is performed.
  • the corresponding animation effect is loaded in a certain dimension according to the number of elements to be loaded, for example, in one embodiment, when the new container contains animation attributes.
  • the steps for the corresponding animation rendering include:
  • the first preset threshold and the second preset threshold may be set according to actual requirements, for example, a first preset threshold.
  • the value is set to 100 and the second preset threshold is set to 1000.
  • the time for each element animation can be set by the timer of the web script javascript.
  • the time for each element to be animated is mainly to make the time difference of each element animation execution, so as to relieve all the animations from being executed to the browser. pressure.
  • the animation rendering time of each element can be shifted by 1 millisecond or other time difference, that is, each element animation rendering time is different, with an interval of 1 millisecond or other time. This loading method only shifts the rendering time difference and maintains a full animation effect.
  • asynchronous loading + weakening animation effect if the number of elements is greater than the second preset threshold, first set the time of each element animation rendering according to the step (2), to alleviate the browser pressure, and then reduce The execution frequency of the animation attribute, for example, swinging the swing by 5 times to 2 times, and weakening the animation effect to obtain a new animation attribute, when the time arrives, according to the new animation attribute Animate the corresponding element.
  • This loading method not only shifts the rendering time difference, but also weakens the animation effect, thereby improving the user's webpage interaction experience without affecting performance.
  • the method of the invention first determines whether to perform animation rendering according to the number of elements to be loaded, and turns off the animation effect when the animation rendering is not needed, so as to ensure the most basic functional requirements of the user.
  • the animation rendering according to the number of elements to be loaded, determine which dimension to load the corresponding animation effect, so as to ensure that the user completes all operations on the web application, automatically adapt and reasonably load the corresponding animation effect, improve the user Web page interaction experience.
  • the web page is used to imitate ios (Apple's mobile operating system) to edit and delete the swing effect of the desktop application;
  • the preset number threshold is set to 3000, the first preset threshold is set to 100, and the second preset threshold is set to 1000;
  • Use asynchronous data loading When 200 elements need to be edited or operated, according to the solution of the present invention, the webpage can be animated, and the animation attribute that swings five times a second is added to the element container. Loading 200 elements into the webpage. Since the number of elements to be loaded is between the first preset threshold and the second preset threshold, the webpage interaction operation may be stuck, so the timer of the webpage script will be 200 elements.
  • the animation rendering time is offset by 1 millisecond, and the swing marked with the element container is reached when the animation rendering time of each element arrives.
  • the animation property of swinging 5 times a second is animated, so as to improve the user experience in ensuring the normal function operation of the user. The number of other elements to be loaded will not be described here.
  • the present invention further provides a webpage animation rendering apparatus, and a specific implementation manner of the apparatus of the present invention will be described in detail below with reference to the accompanying drawings.
  • a webpage animation rendering apparatus includes:
  • the element quantity detecting module 210 is configured to detect the number of elements to be loaded on the webpage and the size of the preset number threshold;
  • the animation attribute processing module 220 is configured to: when the number of elements is greater than a preset number threshold and the container of the element includes an animation attribute, delete the animation attribute to obtain a new container; and the number of the elements is greater than a preset quantity Thresholding and the container of the element does not contain an animation attribute, the container is used as a new container; when the number of elements is less than or equal to a preset number threshold, an animation attribute to be rendered is added to the container of the element, Get a new container;
  • the data loading module 230 is configured to load the element into a webpage according to a preset data loading manner, and perform corresponding animation rendering when the new container includes an animation property.
  • the element quantity detecting module 210 needs to detect the number of elements to be loaded and the preset number threshold.
  • the animation attribute processing module 220 determines to turn off the animation effect when the number of elements to be loaded is greater than the preset number threshold, and does not perform animation rendering.
  • the number of elements to be loaded is not greater than the preset number threshold, it is determined that the corresponding animation effect is loaded, and the image is to be rendered.
  • the animation properties are added to the container. Animation properties can also be marked on each element in the container, but there will be more content on the page during subsequent loading, so this is not the case during normal implementation.
  • Asynchronous data loading and direct data loading are the ways in which current mainstream web pages load data.
  • the present invention provides corresponding loading schemes for these two methods.
  • the data loading module 230 directly loads the element into the webpage through a template tool, such as a browser barscript of a webpage script javascript, and animates by css3 or html5 according to the animation property marked by the final container. Render, if the final container does not contain animation properties, Then no animation rendering.
  • the direct data loading is selected, the data loading module 230 needs to modify the animation attribute of the new container first.
  • the data loading module 230 may modify the new one by adding a class style attribute or the like on the new container.
  • the animation property of the container is then animated by techniques such as css3 or html5 according to the animation properties marked by the final container. If the final container does not contain animation properties, the animation is not rendered.
  • the present invention does not limit the specific data loading manner, as long as the method of determining whether to load the animation by setting the judgment condition and further setting conditions in the subsequent embodiment to determine the dimension in which the animation effect is loaded is protected by the present invention. Within the scope.
  • the data loading module 230 loads the corresponding animation effect in a certain dimension according to the number of the elements to be loaded.
  • the data loading module 230 includes:
  • the first animation rendering unit is configured to directly perform animation rendering according to the animation property of the new container or the element container when the number of the elements is less than the first preset threshold.
  • a second animation rendering unit configured to set a time for each element animation rendering by a timer of a webpage script javascript when the number of the elements is greater than or equal to a first preset threshold and less than or equal to a second preset threshold
  • the corresponding element is animated according to the animation attribute, wherein at least one time in the time is different from the other time, the first preset threshold is smaller than the second preset threshold, and the second preset threshold is smaller than The preset number threshold;
  • the time for each element to be animated is mainly to shift the time difference of each element animation to alleviate the pressure of executing all the animations to the browser in a flash.
  • a third animation rendering unit configured to set the time of each element animation rendering by a timer of a webpage script javascript to reduce browser pressure and reduce the number when the number of elements is greater than a second preset threshold
  • the execution frequency of the animation attribute, the animation effect is weakened, and a new animation attribute is obtained.
  • the time arrives the corresponding element is animated according to the new animation attribute.
  • the device of the invention first determines whether to perform animation rendering according to the number of elements to be loaded, and turns off the animation effect when the animation rendering is not needed, so as to ensure the most basic functional requirements of the user.
  • the animation rendering according to the number of elements to be loaded, determine which dimension to load the corresponding animation effect, so that Under the premise of ensuring all operations on the web application, the user automatically adapts and reasonably loads the corresponding animation effects to improve the user's webpage interaction experience.

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)
  • Information Transfer Between Computers (AREA)

Abstract

提供一种网页动画渲染方法及装置。该方法包括以下步骤：检测网页待加载元素数量与预设数量阈值的大小（S110）；若元素数量大于预设数量阈值且元素的容器包含动画属性，将动画属性删除，得到新的容器（S120）；若元素数量大于预设数量阈值且元素的容器不包含动画属性，将容器作为新的容器（S130）；若元素数量小于等于预设数量阈值，将待渲染的动画属性添加到元素的容器中，得到新的容器（140）；根据预设的数据加载方式，将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染（S150）。本发明自动适应并合理的加载相应的动画效果，提高了用户的网页使用体验。

Description

网页动画渲染方法及装置 技术领域
本发明涉及WEB平台技术领域，特别是涉及一种网页动画渲染方法、网页动画渲染装置。
背景技术
Web(互联网)网页是万维网上的一个按照HTML(HyperText Mark-up Language，超文本标记语言)格式组织起来的文件，在通过万维网进行信息查询时，以信息页面的形式出现。Web网页可包括图形、文字、声音和视像等信息，这些信息统称为网页元素。
Web桌面应用化指的是web网页在操作和体验上与普通电脑桌面应用程序一致。在html5(超文本标记语言第5次修改)、css3(层叠样式表)等技术出现后，人性化、灵动化的网页交互体验将会慢慢渗入主流。但是目前主流的网站，例如微博、云盘或搜索引擎等，网页元素的加载渲染都不会过度设计网页元素的动画效果，当必要时会以单个元素加载动画效果，无法很好的与桌面应用动画渲染媲美，从而无法很好的实现产品的web桌面应用化。另外，目前技术方案在网页上进行动画效果渲染时，采取相同的动画效果渲染，没有考虑网页实际情况，这会导致在普通配置的电脑上因为性能瓶颈，而无法完美的渲染设计师的设计意图，网页交互体验较差。
发明内容
基于此，有必要针对上述问题，提供一种网页动画渲染方法及装置，能够在保证用户最基本的功能需求上提高用户的网页使用体验。
一种网页动画渲染方法，包括步骤：
检测网页待加载元素数量与预设数量阈值的大小；
若所述元素数量大于预设数量阈值且所述元素的容器包含动画属性，将所述动画属性删除，得到新的容器；若所述元素数量大于预设数量阈值且所 述元素的容器不包含动画属性，将所述容器作为新的容器；若所述元素数量小于等于预设数量阈值，将待渲染的动画属性添加到所述元素的容器中，得到新的容器；
根据预设的数据加载方式，将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染。
一种网页动画渲染装置，包括依次相连的元素数量检测模块、动画属性处理模块和数据加载模块；
元素数量检测模块，用于检测网页待加载元素数量与预设数量阈值的大小；
动画属性处理模块，用于在所述元素数量大于预设数量阈值且所述元素的容器包含动画属性时，将所述动画属性删除，得到新的容器；在所述元素数量大于预设数量阈值且所述元素的容器不包含动画属性时，将所述容器作为新的容器；在所述元素数量小于等于预设数量阈值时，将待渲染的动画属性添加到所述元素的容器中，得到新的容器；
数据加载模块，用于根据预设的数据加载方式，将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染。
本发明网页动画渲染方法及装置，根据网页待加载元素数量与预设数量阈值的大小，当统一加载或编辑时，自动采取合适的动画渲染，即在待加载元素数量大于预设数量阈值时不进行动画渲染，在待加载元素数量不大于预设数量阈值时，进行相应的动画渲染。本发明实现了网页动画渲染的自适应，在保证用户在web应用上完成所有操作的前提下，自动适应并合理的加载相应的动画效果，提高了用户的网页使用体验。
附图说明
图1为本发明方法实施例的流程示意图；
图2为本发明装置实施例的结构示意图。
具体实施方式
下面结合附图对本发明网页动画渲染方法的具体实施方式做详细描述。
如图1所示，一种网页动画渲染方法，包括步骤：
S110、检测网页待加载元素数量与预设数量阈值的大小，若所述元素数量大于预设数量阈值且所述元素的容器包含动画属性，进入步骤S120，若所述元素数量大于预设数量阈值且所述元素的容器不包含动画属性，进入步骤S130，若所述元素数量小于等于预设数量阈值，进入步骤S140；
S120、将所述动画属性删除，得到新的容器，进入步骤S150；
S130、将所述容器作为新的容器，进入步骤S150；
S140、将待渲染的动画属性添加到所述元素的容器中，得到新的容器，进入步骤S150；
S150、根据预设的数据加载方式，将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染。
网页待加载元素数量指的是网页模仿桌面应用动画效果时，网页上需要执行该动画效果的元素数量，待加载元素存储在容器内。衡量要加载的动画效果所能支持的元素的数量，当待加载元素数量大于预设数量阈值时，关闭动画效果，即不进行动画渲染，当待加载元素数量不大于预设数量阈值时，加载相应的动画效果。
容器上可能标注有历史的动画属性，在待加载元素数量大于预设数量阈值且容器包含动画属性时，需要先将容器上的动画属性进行删除，然后再进行后续的步骤。在待加载元素数量大于预设数量阈值且容器不包含动画属性时，直接进行后续的步骤。在待加载元素数量不大于预设数量阈值时，需要将待渲染的动画属性标注在容器上，然后进行后续的步骤。动画属性也可以标注在容器内的各元素上，但是在后续加载时网页会出现较多内容，所以一般实施过程中不采取这种方式。
在进行网页元素加载和动画渲染之前，用户可以根据实际需要选择数据加载方式。异步数据加载和直出数据加载是当下主流的网页加载数据的方式，本发明针对这两种方式给出相应的加载方案。异步数据加载指的是打开网页时，在加载了例如页面框架等页面基础内容后，通过网页脚本javascript(直 译式脚本语言)向服务器再次发起数据请求，再而将请求返回的数据以这种“异步”的形式加载到网页内。直出数据加载指的是页面打开瞬间，网页的所有数据已经加载完毕，一次性渲染到用户的浏览器上。需要说明的是，本发明并不仅仅限制于这两种加载方式的实施，只要通过设置判断条件确定是否加载动画以及后续实施例中进一步设置条件确定以何种维度加载动画效果的方式均在本发明的保护范围之内。
确定好是否进行动画渲染后，根据采取的数据加载方式的不同采取不用的处理措施。若采用异步数据加载，将所述元素通过模板工具，例如网页脚本javascript的handlerbars(结合数据+模板可生成相应的html)等，直接加载到网页，并根据最终容器所标注的动画属性，例如摇摆、翻转、淡入淡出、放大缩小等动画效果，通过css3或html5等技术进行动画渲染，若最终容器不包含动画属性，则不进行动画渲染。当采用直出数据加载时，需要先修改所述新的容器的动画属性，例如通过在所述新的容器上添加class样式属性等修改所述新的容器的动画属性，然后根据最终容器所标注的动画属性通过css3或html5等技术进行动画渲染，若最终容器不包含动画属性，则不进行动画渲染。
为了进一步提高用户的使用体验，在确定进行动画渲染时，根据待加载元素数量，以某种维度加载相应的动画效果，例如，在一个实施例中，在所述新的容器包含动画属性时进行相应的动画渲染的步骤包括：
(1)完全加载：若所述元素数量小于第一预设阈值，例如所述第一预设阈值为100，根据所述新的容器或所述元素容器包含的动画属性直接进行动画渲染，该加载方式保持了完整的动画效果。
(2)不同步加载：若所述元素数量大于等于第一预设阈值并小于等于第二预设阈值，设置每个元素动画渲染的时间，在所述时间到达时，根据所述动画属性对相应的元素进行动画渲染，其中所述时间中至少有一个时间与其它时间不相同，第一预设阈值小于第二预设阈值，第二预设阈值小于预设数量阈值。
第一预设阈值和第二预设阈值可以根据实际需求设置，例如第一预设阈 值设置为100，第二预设阈值设置为1000。每个元素动画渲染的时间可以通过网页脚本javascript的定时器设置，设置每个元素动画渲染的时间主要是为了将每个元素动画执行时间差错开，以缓解一瞬间执行所有动画给浏览器带来的压力。作为一个较好实施例，可以将每个元素的动画渲染时间以1毫秒或其它时间差错开，即每个元素动画渲染时间均不相同，间隔1毫秒或其它时间。该加载方式仅是将渲染时间差错开，也保持了完整的动画效果。
(3)不同步加载+弱化动画效果：若所述元素数量大于第二预设阈值，先按照步骤(2)的方式设置每个元素动画渲染的所述时间，以缓解浏览器压力，接着降低所述动画属性的执行频率，例如将swing(摇摆)一秒钟摇摆5次降低为2次等，弱化动画效果，得到新的动画属性，在所述时间到达时，根据所述新的动画属性对相应的元素进行动画渲染。该加载方式不仅将渲染时间差错开，还弱化了动画效果，从而在不影响性能的情况下提高了用户的网页交互体验。
本发明方法先根据待加载元素数量确定是否进行动画渲染，在不需要进行动画渲染时，关闭动画效果，以保证用户最基本的功能需求。在进行动画渲染时再根据待加载元素数量确定以何种维度加载相应的动画效果，从而在保证用户在web应用上完成所有操作的前提下，自动适应并合理的加载相应的动画效果，提高用户的网页交互体验。
为了更好的理解本发明的具体实施方式，下面结合一个具体应用实例对本发明的实施过程详细描述。
假设使用web网页模仿ios(苹果公司的移动操作系统)编辑、删除桌面应用时的swing效果；预设数量阈值设置为3000，第一预设阈值设置为100，第二预设阈值设置为1000；采用异步数据加载方式。当200个元素需要进行编辑或操作时，根据本发明方案可知网页可以进行动画渲染，此时将swing一秒钟摇摆5次的动画属性添加到元素容器中。将200个元素加载到网页，由于此时待加载元素数量在第一预设阈值和第二预设阈值之间，网页交互操作会出现卡顿，所以通过网页脚本的定时器将200个元素的动画渲染时间以1毫秒差错开，在各个元素的动画渲染时间到达时，以元素容器标注的swing 一秒钟摇摆5次的动画属性进行动画渲染，从而达到在保证用户正常功能操作上的提高用户体验的目的。其它待加载元素数量在此不予赘述。
基于同一发明构思，本发明还提供一种网页动画渲染装置，下面结合附图对本发明装置的具体实施方式做详细描述。
如图2所示，一种网页动画渲染装置，包括：
元素数量检测模块210，用于检测网页待加载元素数量与预设数量阈值的大小；
动画属性处理模块220，用于在所述元素数量大于预设数量阈值且所述元素的容器包含动画属性时，将所述动画属性删除，得到新的容器；在所述元素数量大于预设数量阈值且所述元素的容器不包含动画属性时，将所述容器作为新的容器；在所述元素数量小于等于预设数量阈值时，将待渲染的动画属性添加到所述元素的容器中，得到新的容器；
数据加载模块230，用于根据预设的数据加载方式，将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染。
为了保证用户在web应用上完成所有操作的前提下进行动画渲染，元素数量检测模块210需要检测网页待加载元素数量与预设数量阈值的大小。动画属性处理模块220在待加载元素数量大于预设数量阈值时，确定关闭动画效果，不进行动画渲染，在待加载元素数量不大于预设数量阈值时，确定加载相应的动画效果，将待渲染的动画属性添加到容器上。动画属性也可以标注在容器内的各元素上，但是在后续加载时网页会出现较多内容，所以一般实施过程中不采取这种方式。
在数据加载模块230进行网页元素加载和动画渲染之前，用户可以根据实际需要选择数据加载方式。异步数据加载和直出数据加载是当下主流的网页加载数据的方式，本发明针对这两种方式给出相应的加载方案。当选用异步数据加载时，数据加载模块230将所述元素通过模板工具，例如网页脚本javascript的handlerbars等，直接加载到网页，并根据最终容器所标注的动画属性，通过css3或html5等技术进行动画渲染，若最终容器不包含动画属性， 则不进行动画渲染。当选用直出数据加载时，数据加载模块230需要先修改所述新的容器的动画属性，例如所述数据加载模块230可以通过在所述新的容器上添加class样式属性等修改所述新的容器的动画属性，然后根据最终容器所标注的动画属性通过css3或html5等技术进行动画渲染，若最终容器不包含动画属性，则不进行动画渲染。需要说明的是，本发明并不对具体的数据加载方式作出限定，只要通过设置判断条件确定是否加载动画以及后续实施例中进一步设置条件确定以何种维度加载动画效果的方式均在本发明的保护范围之内。
为了进一步提高用户的使用体验，在确定进行动画渲染时，数据加载模块230根据待加载元素数量，以某种维度加载相应的动画效果，例如，所述数据加载模块230包括：
第一动画渲染单元，用于在所述元素数量小于第一预设阈值时，根据所述新的容器或所述元素容器包含的动画属性直接进行动画渲染。
第二动画渲染单元，用于在所述元素数量大于等于第一预设阈值并小于等于第二预设阈值时，可以通过网页脚本javascript的定时器设置每个元素动画渲染的时间，在所述时间到达时，根据所述动画属性对相应的元素进行动画渲染，其中所述时间中至少有一个时间与其它时间不相同，第一预设阈值小于第二预设阈值，第二预设阈值小于预设数量阈值；设置每个元素动画渲染的时间主要是为了将每个元素动画执行时间差错开，以缓解一瞬间执行所有动画给浏览器带来的压力。
第三动画渲染单元，用于在所述元素数量大于第二预设阈值时，可以通过网页脚本javascript的定时器设置每个元素动画渲染的所述时间，以缓解浏览器压力，并降低所述动画属性的执行频率，弱化动画效果，得到新的动画属性，在所述时间到达时，根据所述新的动画属性对相应的元素进行动画渲染。
本发明装置先根据待加载元素数量确定是否进行动画渲染，在不需要进行动画渲染时，关闭动画效果，以保证用户最基本的功能需求。在进行动画渲染时再根据待加载元素数量确定以何种维度加载相应的动画效果，从而在 保证用户在web应用上完成所有操作的前提下，自动适应并合理的加载相应的动画效果，提高用户的网页交互体验。
以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

  1. 一种网页动画渲染方法，其特征在于，包括步骤：
    检测网页待加载元素数量与预设数量阈值的大小；
    若所述元素数量大于预设数量阈值且所述元素的容器包含动画属性，将所述动画属性删除，得到新的容器；若所述元素数量大于预设数量阈值且所述元素的容器不包含动画属性，将所述容器作为新的容器；若所述元素数量小于等于预设数量阈值，将待渲染的动画属性添加到所述元素的容器中，得到新的容器；
    根据预设的数据加载方式，将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染。
  2. 根据权利要求1所述的网页动画渲染方法，其特征在于，在所述新的容器包含动画属性时进行相应的动画渲染的步骤包括：
    若所述元素数量小于第一预设阈值，根据所述新的容器或所述元素容器包含的动画属性直接进行动画渲染；
    若所述元素数量大于等于第一预设阈值并小于等于第二预设阈值，设置每个元素动画渲染的时间，在所述时间到达时，根据所述动画属性对相应的元素进行动画渲染，其中所述时间中至少有一个时间与其它时间不相同，第一预设阈值小于第二预设阈值，第二预设阈值小于预设数量阈值；
    若所述元素数量大于第二预设阈值，设置每个元素动画渲染的所述时间，并降低所述动画属性的执行频率，得到新的动画属性，在所述时间到达时，根据所述新的动画属性对相应的元素进行动画渲染。
  3. 根据权利要求2所述的网页动画渲染方法，其特征在于，通过网页脚本javascript的定时器设置每个元素动画渲染的时间。
  4. 根据权利要求1至3任意一项所述的网页动画渲染方法，其特征在于，若所述预设的数据加载方式为直出数据加载，将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染之前，还包括步骤：
    修改所述新的容器的动画属性。
  5. 根据权利要求4所述的网页动画渲染方法，其特征在于，通过在所述新的容器上添加class样式属性修改所述新的容器的动画属性。
  6. 一种网页动画渲染装置，其特征在于，包括：
    元素数量检测模块，用于检测网页待加载元素数量与预设数量阈值的大小；
    动画属性处理模块，用于在所述元素数量大于预设数量阈值且所述元素的容器包含动画属性时，将所述动画属性删除，得到新的容器；在所述元素数量大于预设数量阈值且所述元素的容器不包含动画属性时，将所述容器作为新的容器；在所述元素数量小于等于预设数量阈值时，将待渲染的动画属性添加到所述元素的容器中，得到新的容器；
    数据加载模块，用于根据预设的数据加载方式，将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染。
  7. 根据权利要求6所述的网页动画渲染装置，其特征在于，所述数据加载模块包括：
    第一动画渲染单元，用于在所述元素数量小于第一预设阈值时，根据所述新的容器或所述元素容器包含的动画属性直接进行动画渲染；
    第二动画渲染单元，用于在所述元素数量大于等于第一预设阈值并小于等于第二预设阈值时，设置每个元素动画渲染的时间，在所述时间到达时，根据所述动画属性对相应的元素进行动画渲染，其中所述时间中至少有一个时间与其它时间不相同，第一预设阈值小于第二预设阈值，第二预设阈值小于预设数量阈值；
    第三动画渲染单元，用于在所述元素数量大于第二预设阈值时，设置每个元素动画渲染的所述时间，并降低所述动画属性的执行频率，得到新的动画属性，在所述时间到达时，根据所述新的动画属性对相应的元素进行动画渲染。
  8. 根据权利要求7所述的网页动画渲染装置，其特征在于，所述第二动画渲染单元和所述第三动画渲染单元通过网页脚本javascript的定时器设置每个元素动画渲染的时间。
  9. 根据权利要求6至8任意一项所述的网页动画渲染装置，其特征在于，所述数据加载模块还用于在所述预设的数据加载方式为直出数据加载时，在将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染之前，修改所述新的容器的动画属性。
  10. 根据权利要求9所述的网页动画渲染装置，其特征在于，所述数据加载模块通过在所述新的容器上添加class样式属性修改所述新的容器的动画属性。
PCT/CN2016/090733 2015-09-14 2016-07-20 网页动画渲染方法及装置 WO2017045480A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201510583339.3 2015-09-14
CN201510583339.3A CN105205845B (zh) 2015-09-14 2015-09-14 网页动画渲染方法及装置

Publications (1)

Publication Number Publication Date
WO2017045480A1 true WO2017045480A1 (zh) 2017-03-23

Family

ID=54953505

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2016/090733 WO2017045480A1 (zh) 2015-09-14 2016-07-20 网页动画渲染方法及装置

Country Status (2)

Country Link
CN (1) CN105205845B (zh)
WO (1) WO2017045480A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113160364A (zh) * 2021-05-24 2021-07-23 威创集团股份有限公司 一种Web网页中实现三维景深动画效果的方法和相关装置

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105205845B (zh) * 2015-09-14 2018-06-22 广州视睿电子科技有限公司 网页动画渲染方法及装置
CN106682135A (zh) * 2016-12-16 2017-05-17 天脉聚源(北京)传媒科技有限公司 一种网页加载方法及装置
CN106611047A (zh) * 2016-12-16 2017-05-03 天脉聚源(北京)传媒科技有限公司 一种网页加载方法及装置
CN113672320B (zh) * 2021-07-19 2023-11-17 杭州未名信科科技有限公司 一种基于dom元素渲染网页的方法、设备及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130212465A1 (en) * 2012-02-09 2013-08-15 Alexander Kovatch Postponed rendering of select web page elements
US20130227391A1 (en) * 2012-02-29 2013-08-29 Pantech Co., Ltd. Method and apparatus for displaying webpage
US20140129925A1 (en) * 2012-11-08 2014-05-08 Igor Faletski Browser inline html adaptation
CN103984781A (zh) * 2014-06-11 2014-08-13 北京金山网络科技有限公司 一种网页加载方法及装置
CN104111950A (zh) * 2013-04-19 2014-10-22 腾讯科技（深圳）有限公司 网页图片加载方法及加载装置
CN105205845A (zh) * 2015-09-14 2015-12-30 广州视睿电子科技有限公司 网页动画渲染方法及装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130212465A1 (en) * 2012-02-09 2013-08-15 Alexander Kovatch Postponed rendering of select web page elements
US20130227391A1 (en) * 2012-02-29 2013-08-29 Pantech Co., Ltd. Method and apparatus for displaying webpage
US20140129925A1 (en) * 2012-11-08 2014-05-08 Igor Faletski Browser inline html adaptation
CN104111950A (zh) * 2013-04-19 2014-10-22 腾讯科技（深圳）有限公司 网页图片加载方法及加载装置
CN103984781A (zh) * 2014-06-11 2014-08-13 北京金山网络科技有限公司 一种网页加载方法及装置
CN105205845A (zh) * 2015-09-14 2015-12-30 广州视睿电子科技有限公司 网页动画渲染方法及装置

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113160364A (zh) * 2021-05-24 2021-07-23 威创集团股份有限公司 一种Web网页中实现三维景深动画效果的方法和相关装置
CN113160364B (zh) * 2021-05-24 2023-10-10 威创集团股份有限公司 一种Web网页中实现三维景深动画效果的方法和相关装置

Also Published As

Publication number Publication date
CN105205845A (zh) 2015-12-30
CN105205845B (zh) 2018-06-22

Similar Documents

Publication Publication Date Title
WO2017045480A1 (zh) 网页动画渲染方法及装置
US11010538B2 (en) Systems and methods for hosted applications
US8954386B2 (en) Locally editing a remotely stored image
US8959431B2 (en) Low resolution placeholder content for document navigation
US8959142B2 (en) Combining server-side and client-side user interface elements
US8464148B1 (en) Intelligent editing of web pages in a web browser
US20080244740A1 (en) Browser-independent editing of content
US9460062B2 (en) Local rendering of an object as an image
CN103853712A (zh) 一种浮动层窗口的显示方法及浏览器
WO2012170312A2 (en) Embedded web viewer for presentation applications
WO2019114136A1 (zh) H5活动页面的制作方法、电子装置及可读存储介质
KR20170135956A (ko) 인스턴트 메시징 창을 표시하기 위한 방법 및 장치 및 컴퓨터 판독 가능 매체
US9442642B2 (en) Tethered selection handle
US11099839B2 (en) Adaptation of a web application for use by a mobile device
CN105739962A (zh) 基于html的表格单元格编辑器控件扩展方法和系统
CN103914299A (zh) 一种Flash硬件加速控制方法及系统
WO2014187202A1 (zh) 实现网页布局的方法、装置、终端及计算机存储介质
WO2015078255A1 (zh) 一种显示视频标题的方法、系统及浏览器
CN109002557A (zh) 基于浏览器缓存机制优化网页加载速度的方法、电子设备
CN105677286B (zh) 一种浏览器音量调节方法和装置
CN110858241B (zh) 基于浏览器的自适应排版方法、装置和存储介质
CN111488543A (zh) 一种基于服务器端渲染的网页输出方法、系统和存储介质
CN104063118B (zh) 一种网页内容的点击显示方法及装置
CN111199144B (zh) 一种文档内容涂改方法、装置、电子设备及可读存储介质
CN113778303A (zh) 一种文字提取的方法、装置及计算机可读存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 16845594

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 16845594

Country of ref document: EP

Kind code of ref document: A1