CN112882637B - 多图层动画展示的交互方法及浏览器 - Google Patents

多图层动画展示的交互方法及浏览器 Download PDF

Info

Publication number
CN112882637B
CN112882637B CN202110200639.4A CN202110200639A CN112882637B CN 112882637 B CN112882637 B CN 112882637B CN 202110200639 A CN202110200639 A CN 202110200639A CN 112882637 B CN112882637 B CN 112882637B
Authority
CN
China
Prior art keywords
layer
animation
display
animation display
offset
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.)
Active
Application number
CN202110200639.4A
Other languages
English (en)
Other versions
CN112882637A (zh
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.)
Shanghai Bilibili Technology Co Ltd
Original Assignee
Shanghai Bilibili 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 Shanghai Bilibili Technology Co Ltd filed Critical Shanghai Bilibili Technology Co Ltd
Priority to CN202110200639.4A priority Critical patent/CN112882637B/zh
Publication of CN112882637A publication Critical patent/CN112882637A/zh
Application granted granted Critical
Publication of CN112882637B publication Critical patent/CN112882637B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • 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
    • 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/20—3D [Three Dimensional] animation
    • G06T13/40—3D [Three Dimensional] animation of characters, e.g. humans, animals or virtual beings
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/20—3D [Three Dimensional] animation
    • G06T13/60—3D [Three Dimensional] animation of natural phenomena, e.g. rain, snow, water or plants
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/005—General purpose rendering architectures

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Databases & Information Systems (AREA)
  • Computer Graphics (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本申请提供一种多图层动画展示的交互方法及浏览器，其中所述多图层动画展示的交互方法包括：通过多图层动画展示界面接收交互请求，所述交互请求中携带有交互事件的位置信息和多图层动画展示请求；根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画；响应于所述交互请求，在所述多图层动画展示界面对所述目标动画进行展示。所述多图层动画展示的交互方法，不仅使生成的多图层动画层次感强、变化自然，还提高了用户的参与感和体验性。

Description

多图层动画展示的交互方法及浏览器
技术领域
本申请涉及计算机技术领域，特别涉及一种多图层动画展示的交互方法。本申请同时涉及一种多图层动画展示浏览器，一种多图层动画展示装置，一种计算设备，以及一种计算机可读存储介质。
背景技术
随着计算机技术的快速发展，各种各样的动画形式层出不穷，在有用户交互的动画展示领域，有用户交互的动画展示非常流行。根据用户输入的不同展示不同的动画效果，可以给用户一种耳目一新的感觉，会极大的提高用户对展示该动画的页面或者应用的观看兴趣。
现有技术中，在实现有用户交互的动画效果时，通常方法是由用户点击图层界面中不同图层对应的标识，从而实现不同图层的切换。然而上述方法中，各图层之间的转换不够自然，动画效果也类似于浏览手机照片时图片的简单切换，缺乏动画的层次感，用户视觉感差，降低了用户体验性。
发明内容
有鉴于此，本申请实施例提供了一种多图层动画展示的交互方法。本申请同时涉及一种多图层动画展示浏览器、一种多图层动画展示装置，一种计算设备，以及一种计算机可读存储介质，以解决现有技术中图层转换不自然、动画效果缺乏层次感的技术缺陷。
根据本申请实施例的第一方面，提供了一种多图层动画展示的交互方法，包括：
通过多图层动画展示界面接收交互请求，所述交互请求中携带有交互事件的位置信息和多图层动画展示请求；
根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；
根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；
根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画；
响应于所述交互请求，在所述多图层动画展示界面对所述目标动画进行展示。
可选地，所述根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息，包括：
根据多图层动画展示请求解析所述位置信息，确定所述多图层动画展示请求在所述多图层动画展示界面中的位置；
通过预先设置的最大偏移量计算所述位置相对于多图层动画中的各图层中心的偏移信息。
可选地，所述根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性，包括：
根据配置数据中各图层的偏移曲线和偏移量计算与所述各图层中心的偏移信息对应的图层显示属性。
可选地，所述根据配置数据中各图层的偏移曲线和偏移量计算与所述各图层中心的偏移信息对应的图层显示属性，包括：
根据配置数据中各图层的位置偏移曲线和位置偏移量计算与所述各图层中心的偏移信息对应的位置图层显示属性；
通过配置数据中各图层的缩放偏移曲线和缩放偏移量计算与所述各图层中心的偏移信息对应的缩放图层显示属性；
通过配置数据中各图层的旋转偏移曲线和旋转偏移量计算与所述各图层中心的偏移信息对应的旋转图层显示属性；和/或
通过配置数据中各图层的模糊偏移曲线和模糊偏移量计算与所述各图层中心的偏移信息对应的模糊图层显示属性。
可选地，在所述根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性之后，所述根据所述图层显示属性对各图层进行渲染之前，还包括：
根据所述多图层动画展示请求更新本地存储的与所述各图层中心的偏移信息对应的图层显示属性。
可选地，在所述根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性之后，所述根据所述图层显示属性对各图层进行渲染之前，还包括：
根据所述多图层动画展示请求，将与所述各图层中心的偏移信息对应的图层显示属性和各图层对应的预先生成的贴图输入至渲染器。
可选地，所述根据所述图层显示属性对各图层进行渲染，包括：
根据与所述各图层中心的偏移信息对应的图层显示属性设置渲染器，通过所述渲染器对各图层进行渲染。
可选地，所述方法还包括：
检测到所述多图层动画展示界面不存在交互请求的情况下，在所述多图层动画展示界面展示初始动画，其中，所述初始动画为预先设置的展示动画。
可选地，所述方法还包括：
根据初始化指令检测所述多图层动画展示界面是否具有动画展示功能；
在所述多图层动画展示界面不具有动画展示功能的情况下，在所述多图层动画展示界面展示静态画面。
可选地，在根据初始化指令检测所述多图层动画展示界面是否具有动画展示功能之后，还包括：
初始化所述多图层动画展示界面。
根据本申请实施例的第二方面，提供了一种多图层动画展示浏览器，包括：
交互检测模块，用于通过所述浏览器的多图层动画展示界面接收交互请求，所述交互请求中携带有交互事件的位置信息和多图层动画展示请求；
第一计算模块，用于根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；
第二计算模块，用于根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；
渲染模块，用于根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画；
显示模块，用于响应于所述交互请求，在所述浏览器的多图层动画展示界面对所述目标动画进行展示。
根据本申请实施例的第三方面，提供了一种多图层动画展示装置，所述装置配置有上述多图层动画展示浏览器。
根据本申请实施例的第四方面，提供了一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行所述计算机指令时实现所述多图层动画展示的交互方法的步骤。
根据本申请实施例的第五方面，提供了一种计算机可读存储介质，其存储有计算机指令，该计算机指令被处理器执行时实现所述多图层动画展示的交互方法的步骤。
本申请提供的多图层动画展示的交互方法，通过多图层动画展示界面接收交互请求，所述交互请求中携带有交互事件的位置信息和多图层动画展示请求；根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画；响应于所述交互请求，在所述多图层动画展示界面对所述目标动画进行展示。所述多图层动画展示的交互方法通过多图层动画展示界面接收交互请求，可以实时地监测到用户与多图层动画展示界面的交互，并根据配置数据和用户交互完成多图层动画展示界面展示的动画的转换，不仅使生成的多图层动画层次感强、变化自然，还提高了用户的参与感和体验性。
附图说明
图1是本申请一实施例提供的一种多图层动画展示的交互方法的流程图；
图2A是本申请一实施例提供的一种配置数据的结构示意图；
图2B是本申请一实施例提供的四个图层的示意图；
图2C是本申请一实施例提供的多图层动画展示界面的展示效果示意图；
图3是本申请一实施例提供的一种应用于浏览器的多图层动画展示的交互方法的处理流程图；
图4A是本申请一实施例提供的一种多图层动画展示浏览器的结构示意图；
图4B是本申请一实施例提供的一种多图层动画展示浏览器界面的示意图；
图5是本申请一实施例提供的一种计算设备的结构框图。
具体实施方式
在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。
在本申请一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请一个或多个实施例。在本申请一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本申请一个或多个实施例中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解，尽管在本申请一个或多个实施例中可能采用术语第一、第二等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请一个或多个实施例范围的情况下，第一也可以被称为第二，类似地，第二也可以被称为第一。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
首先，对本申请一个或多个实施例涉及的名词术语进行解释。
多图层动画：本申请中所实现的用户交互界面展示效果，每个图层基于时间和用户输入展示对应动画(包含位移、旋转、缩放和模糊)。
渲染器：指可以根据指定的数据输入进行渲染，输出对应渲染效果的程序，其渲染时所使用的技术与输入数据无关，在本申请中渲染器可以使用CSS3或WebGL技术实现。
CSS3：Cascading Style Sheets Level 3的缩写，即层叠样式表3级，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
WebGL：Web Graphics Library的缩写，是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
<canvas>元素：在新的HTML标准HTML5中<canvas>元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值
实时配置预览工具：本申请所使用的一种基于渲染器的调试工具，可以在预览渲染效果时，实时修改输入数据并显示用修改后数据重新渲染的结果，且支持将修改完成的配置数据导出并保存。
在本申请中，提供了一种多图层动画展示的交互方法，本申请同时涉及一种多图层动画展示装置，一种计算设备，以及一种计算机可读存储介质，在下面的实施例中逐一进行详细说明。
图1示出了根据本申请一实施例提供的一种多图层动画展示的交互方法的流程图，具体包括以下步骤：
步骤102：通过多图层动画展示界面接收交互请求，所述交互请求中携带有交互事件的位置信息和多图层动画展示请求。
具体的，所述多图层动画展示界面是指显示多图层动画的一个区域，所述多图层动画展示界面可以是网页页面中特定的一个区域，也可以是应用程序中特定的一个区域，根据需要可以设置在所述浏览器或者应用程序主页的任意位置，例如顶部，中部或者底部；所述交互请求是指用户通过鼠标等在多图层动画展示界面进行滑动、点击等而发起的使多图层动画进行变化的请求；所述交互事件是指用户通过鼠标在多图层动画展示界面滑动、点击、或者对于触摸控制的显示屏用户直接通过手指等在多图层动画展示界面滑动的事件，即所述交互事件可以是鼠标事件，也可以是触控事件；所述位置信息是指用户通过鼠标或者手指在多图层动画展示界面滑动、点击的位置信息；所述多图层动画展示请求是指根据所述位置信息进行动画展示的请求。
实际应用中，用户可以通过浏览器或者应用程序访问多图层动画展示界面，当所述多图层动画展示界面出现在屏幕中之后，会立即进入交互检测状态，检测用户是否通过鼠标或者手指在多图层动画展示界面滑动或者点击，即对多图层动画展示界面的交互事件进行监测。
例如，用户通过浏览器打开一个网页，而该网页上正好有对应的多图层动画展示界面。当该网页中的多图层动画展示界面完整地展示在网页上之后，浏览器可以监测是否有用户通过控制鼠标在多图层动画展示界面滑动。又如，用户通过手机打开了一个应用程序，在该应用程序的主页上也有一个多图层动画展示界面，当该应用程序中的多图层动画展示界面初始化完成之后，该应用程序就可以监测多图层动画展示界面上是否有用户用手指滑动或点击。
本申请中通过对多图层动画展示界面的交互事件进行实时监控，一旦交互事件发生就可以及时地监测到，可以有效地提高对位置信息和多图层动画展示请求的获取效率，同时也为后续响应交互事件做好了准备基础。
需要说明的是，已保存的配置数据是由设计师通过配置和预览工具进行配置的：渲染器将所需要的配置数据结构以图形化的形式呈现给设计师，方便设计师对配置数据进行修改和调试；在设计师对配置数据进行修改和调试之后，将其保存在服务器中，并为其配置读写服务，方便客户端进行获取。
具体的，所述配置数据包括图层数组，所述图层数组中的每个元素代表一个图层，每个图层的属性包括图片配置/视频配置、初始状态、偏移状态、以及偏移曲线。参见图2A，所述配置数据包含至少两个图层，每个图层下都包含有图片配置/视频配置、初始状态、偏移状态和偏移曲线四个属性。其中，图片配置/视频配置用于获取展示多图层动画的图片和/或视频，可以有一个图片源/视频源，也可以有多个图片源/视频源，当有多个图片源/视频源时，可以为每个图片/视频设置播放时长；初始状态用于设置多图层动画展示界面的初始动画，即未监测到交互事件时多图层动画展示界面显示的动画，初始状态包括初始位置、初始缩放、初始旋转、初始模糊四个初始属性；偏移状态用于设置多图层动画展示界面的目标动画，即监测到交互事件时多图层动画展示界面响应交互事件所显示的动画，偏移状态包括位置偏移量、缩放偏偏移量、旋转偏移量和模糊偏移量四个图层显示属性；偏移曲线为用户输入与偏移状态之间的映射关系，包括位置偏移曲线、缩放偏移曲线、旋转偏移曲线和模糊偏移曲线。以上述结构设置配置数据，对配置数据的图层的不同属性进行划分，有利于后台运行可以快速找到展示多图层动画所需的属性，降低了后台数据处理的压力。
本实施例一个可选的实施方式中，用户打开包含有多图层动画展示界面的网页或者应用程序时，可能会存在一些问题导致多图层动画展示界面不能展示多图层动画，例如版本问题，考虑到这种情况，需要检测当前环境下多图层动画展示界面是否支持多图层动画展示，具体实现过程可以如下：
根据初始化指令检测所述多图层动画展示界面是否具有动画展示功能；
在所述多图层动画展示界面不具有动画展示功能的情况下，在所述多图层动画展示界面展示静态画面。
具体的，对于含有多图层动画展示界面的网页或者应用程序来说，由于浏览器或者应用程序的版本问题可能会导致多图层动画展示界面不具备展示动画的所有功能，在这种情况下加载和展示静态图片，即在多图层动画展示界面展示静态画面，与此同时，后续步骤就不再进行。若所述多图层动画展示界面具备展示动画的所有功能，也需要优先加载和展示静态画面，如此可以在用户打开网页或者应用程序时以最快的速度使多图层动画展示界面展示画面，从而减少多图层动画展示界面空白的时间，同时也为生成目标动画准备充足的时间。
例如，浏览器A不具有支持多图层动画展示的功能，在使用浏览器A打开网页B时，网页B根据接收到的初始化指令检测当前浏览器A是否支持多图层动画展示，也即是检测当前环境下多图层动画展示界面是否支持多图层动画展示。检测发现不支持多图层动画展示界面，那么加载配置数据中的图片进行展示，而图片不能以动图方式展示。
实际应用中，在根据初始化指令检测所述多图层动画展示界面是否具有动画展示功能之后，不论多图层动画展示界面是否具有动画展示功能，进一步地，都需要初始化所述多图层动画展示界面。当多图层动画展示界面不具有动画展示功能时，初始化多图层动画展示界面包括调用多图层动画展示界面展示静态画面的功能，为后续展示静态画面做准备，以便于能够快速地将静态画面展示在多图层动画展示界面中；当多图层动画展示界面具有动画展示功能时，初始化多图层动画展示界面包括开启展示多图层动画时所需要的各项功能、对渲染多图层动画时的各种函数进行校正等。
本申请中，通过监测多图层动画展示界面并接收交互请求，便于对用户的输入进行及时响应并及时变更动画，提高用户体验性。
步骤104：根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息。
具体的，所述各图层为组成多图层动画的每个图层。在检测到多图层动画展示界面发生交互事件时，响应多图层动画展示请求从而对交互事件的位置信息进行处理，即根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息。这样可以确定位置信息对于各图层的偏移程度，即偏移信息。确定位置信息与各图层的偏移程度，有利于确定各图层分别对于位置信息的变化，这样从各图层的变化展示目标动画，会使目标动画更加协调、生动。
实际应用中，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息的具体过程可以为：
根据多图层动画展示请求解析所述位置信息，确定所述多图层动画展示请求在所述多图层动画展示界面中的位置；
通过预先设置的最大偏移量计算所述位置相对于多图层动画中的各图层中心的偏移信息。
需要说明的是，所述位置信息可以是鼠标位置移动的距离、鼠标点击的位置或者对于触摸屏手指在多图层动画展示界面移动的距离等。先根据位置信息确定交互事件的起始位置，也可以说是所述多图层动画展示请求在所述多图层动画展示界面中的位置。对于多图层动画来说，设置有最大偏移量，可以通过用户输入，即位置和最大偏移量计算当前偏移程度，即通过预先设置的最大偏移量计算所述位置相对于多图层动画中的各图层中心的偏移信息。
例如，用户通过鼠标在多图层动画展示界面滑动，鼠标的滑动会产生一个位置信息和多图层动画展示请求，根据位置信息和多图层动画展示请求确定鼠标滑动在所述多图层动画展示界面中的位置，根据每个图层的最大偏移量确定所述位置相对于各图层的偏移程度，即相对于多图层动画中的各图层中心的偏移信息。
本申请中，通过对交互事件中的位置信息进行解析，确定偏移信息，为后续基于用户输入，即交互事件生成多图层动画做好了准备。
步骤106：根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性。
具体的，所述图层显示属性是指对应交互事件位置信息的各图层的图层显示属性，即与偏移信息对应的各图层的图层显示属性。在根据多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息的基础上，进一步地，根据配置数据计算与各图层中心的偏移信息对应的图层显示属性。各图层的图层显示属性是确定各图层渲染效果的重要因素，确定与各图层中心的偏移信息对应的图层显示属性为后续渲染各图层做好了基础工作。
在实际应用中，计算所述各图层中心的偏移信息对应的图层显示属性时，需要根据配置数据中各图层的偏移曲线和偏移状态两个属性，即根据配置数据中各图层的偏移曲线和偏移量计算与所述各图层中心的偏移信息对应的图层显示属性。所述偏移曲线表征的是偏移信息与偏移量之间的映射关系，即表征交互事件的位置信息与偏移量之间的映射关系。这样可以统一偏移信息对各图层图层显示属性影响的标准，使同样的偏移信息对于各图层来说产生的影响相同，避免了最终生成的动画在同样操作的情况下不一致的问题。
由于偏移曲线分为位置偏移曲线、缩放偏移曲线、旋转偏移曲线、模糊偏移曲线，而偏移量分为位置偏移量、缩放偏移量、旋转偏移量、模糊偏移量，可见偏移曲线与偏移量是一一对应的。进一步地，所述根据配置数据中各图层的偏移曲线和偏移量计算与所述各图层中心的偏移信息对应的图层显示属性，具体实现过程可以为：根据配置数据中各图层的位置偏移曲线和位置偏移量计算与所述各图层中心的偏移信息对应的位置图层显示属性；通过配置数据中各图层的缩放偏移曲线和缩放偏移量计算与所述各图层中心的偏移信息对应的缩放图层显示属性；通过配置数据中各图层的旋转偏移曲线和旋转偏移量计算与所述各图层中心的偏移信息对应的旋转图层显示属性；和/或通过配置数据中各图层的模糊偏移曲线和模糊偏移量计算与所述各图层中心的偏移信息对应的模糊图层显示属性。
需要说明的是，计算与所述各图层中心的偏移信息对应的图层显示属性时，可以是位置图层显示属性、缩放图层显示属性、旋转图层显示属性、模糊图层显示属性中的任意一种属性，也可以是其中的几种，需要根据各图层的偏移曲线和偏移量来确定。例如，图层一的偏移曲线只有位置偏移曲线一个属性，对应的，图层一的偏移量也只有位置偏移量一个属性，因此，对于图层一来说，只能计算位置图层显示属性。
实际应用中，以图层A为例，图层A的偏移曲线这一属性设置了位置偏移曲线、缩放偏移曲线、旋转偏移曲线以及模糊偏移曲线，而图层A的偏移状态这一属性设置了位置偏移量、缩放偏移量、旋转偏移量以及模糊偏移量，此时在计算图层显示属性时：根据位置偏移曲线和位置偏移量计算位置图层显示属性；根据缩放偏移曲线和缩放偏移量计算缩放图层显示属性；根据旋转偏移曲线和旋转偏移量计算旋转图层显示属性；根据模糊偏移曲线和模糊偏移量计算模糊图层显示属性。
另外，本申请中实现多图层动画展示是通过渲染器来实现的，主要有基于CSS3实现的渲染器和基于WebGL实现的渲染器。
对于基于CSS3实现的渲染器来说，在根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性之后，所述根据所述图层显示属性对各图层进行渲染之前，还需要根据所述多图层动画展示请求更新本地存储的与所述各图层中心的偏移信息对应的图层显示属性，也即是说，根据上述计算得到的图层显示属性，更新各图层对应的渲染器中用于渲染各图层的插值函数的值。这样可以使基于CSS3实现的渲染器直接根据所述图层显示属性更新各个插值函数的值，方便渲染器基于插值函数渲染各图层。
例如，根据位置图层显示属性更新位置差值函数(translate函数)的值、根据缩放图层显示属性更新缩放插值函数的值、根据旋转图层显示属性更新旋转插值函数(translate函数)的值、根据模糊图层显示属性更新模糊插值函数(blur函数)的值。
对于基于WebGL实现的渲染器来说，在根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性之后，所述根据所述图层显示属性对各图层进行渲染之前，还需要根据所述多图层动画展示请求，将与所述各图层中心的偏移信息对应的图层显示属性和各图层对应的预先生成的贴图输入至渲染器。具体的，在基于WebGL实现的渲染器中包含有着色器，将图层显示属性和贴图输入至渲染器可以理解为将图层显示属性和贴图输入至着色器。另外，可以通过WebGLUniform将图层显示属性传递给着色器。以图层一为例，在根据配置数据计算出图层一对应的位置图层显示属性、旋转图层显示属性、缩放图层显示属性和模糊图层显示属性，即与图层一中心的偏移信息对应的图层显示属性之后，将所述位置图层显示属性、旋转图层显示属性、缩放图层显示属性和模糊图层显示属性通过WebGLUniform传递给着色器，并将图层一对应的贴图传递给着色器。
本申请中在确定各图层中心的偏移信息之后，可以根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性，从而有利于后续根据图层显示属性对各图层进行渲染，进一步为生成目标动画做好了准备。
步骤108：根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画。
具体的，在确定与所述各图层中心的偏移信息对应的图层显示属性的基础上，进一步地，根据获得的图层显示属性进行渲染。需要说明的是，渲染时根据各图层对应的图层显示属性分别渲染各图层，目标动画不是直接渲染得到的，而是通过逐个渲染各图层，根据渲染后的各图层混合效果，得到最终的目标动画，这样生成的目标动画层次感更明显。
例如，有两个图层：图层一和图层二，根据图层一的图层显示属性渲染图层一，根据图层二的图层显示属性渲染图层二，将渲染后的图层一和图层二进行叠加、混合渲染效果，生成目标动画。
在实际应用中，对于基于CSS3实现的渲染器来说，只需要根据图层显示属性更新各图层对应的渲染器中用户渲染各图层的插值函数的值，然后基于CSS3实现的渲染器就可以渲染各图层，直至最后生成目标动画。但是对于基于WebGL实现的渲染器来说，不仅需要将图层显示属性输入至渲染器，还需要将各图层对应的预先生成的贴图输入至渲染器。在此基础上，基于WebGL实现的渲染器根据与所述各图层中心的偏移信息对应的图层显示属性设置渲染器，通过所述渲染器对各图层进行渲染。需要说明的是，基于WebGL实现的渲染器包含用于渲染图层的着色器，图层显示属性和预先生成的贴图实际上是传递给了渲染器中的着色器。具体的，图层显示属性可以通过WebGLUniform传递给着色器。在此基础上，着色器分别执行WebGL绘制函数drawArrays使用着色器进行渲染各图层，然后使用WebGL的深度测试(Depth Test)和混入(Blending)功能处理遮挡和透明效果，生成目标动画，并将结果输出在<canvas>元素上，也即将目标动画显示在多图层动画展示界面上。例如，根据图层一对应的图层显示属性设置着色器，调用绘制函数drawArrays渲染图层一，再根据图层二对应的图层显示属性设置着色器，调用绘制函数drawArrays渲染图层二。之后使用深度测试和混入两个功能处理渲染后的图层一和图层二，进行遮挡和透明效果处理，生成目标动画。
在本申请中，由于图层显示属性是基于交互请求和配置数据进行计算的，通过图层显示属性对各图层进行渲染时，会使各图层的渲染效果更加精准。此外将渲染后的各图层叠加生成目标动画，会使目标动画的层次感更深、动画效果更明显。
步骤110：响应于所述交互请求，在所述多图层动画展示界面对所述目标动画进行展示。
具体的，在将渲染后的各图层叠加生成目标动画的基础上，进一步地，响应于所述交互请求，将所述目标动画在所述多图层动画展示界面上展示。
在实际应用中，用户在多图层动画展示界面进行交互事件时，为了响应根据交互事件生成的交互请求，会在多图层动画展示界面上展示与交互请求相关联的目标动画。例如，所述多图层动画由三个图层组成，其中图层一为青少年、图层二为中年人、图层三为老年人。在未接收交互请求时，多图层动画展示界面展示的是图层二的中年人。若用户在多图层动画展示界面向左滑动鼠标时，多图层动画展示界面展示的目标动画为图层二的中年人逐渐变为图层一的青少年，视觉上感觉为中年人变年轻或者回到青年时代；若用户在多图层动画展示界面向右滑动鼠标时，多图层动画展示界面展示的目标动画为图层二的中年人逐渐变为图层三的老年人，视觉上感觉为中年人随着时间流逝逐渐年长。
在本实施例的一个或多个实施方式中，参见图2B，所述多图层动画由四个图层组成，其中，图层一202为青少年、图层二204为中年人、图层三206为老年人，图层四208为雪花飘落。如图2C所示，在未接收交互请求时，多图层动画展示界面展示的是图层二204的中年人，此时多图层动画展示界面如图2C中210所示。若用户在多图层动画展示界面双击鼠标，则多图层动画展示界面展示的目标动画为图层四208的雪花飘落以及图层二204的中年人，多图层动画展示界面如图2C中212所示，即在雪花飘落的场景中有一位中年人。在此基础上，分为以下几种情况：
(1)用户再次在多图层动画展示界面双击鼠标，此时，多图层动画展示界面仅展示图层二204的中年人，即多图层动画展示界面由图2C中212变为图2C中210，视觉上为中年人所在的场景中停止下雪了。此时再次双击鼠标，则可恢复下雪效果，即多图层动画展示界面由图2C中210变为图2C中212。
(2)用户在多图层动画展示界面向左滑动鼠标时，多图层动画展示界面展示的目标动画为在图层四208展示雪花飘落的基础上，图层二204的中年人逐渐变为图层一202的青少年，多图层动画展示界面由图2C中212变为图2C中214，视觉上为雪中的中年人变年轻或者回到青年时代；若此时用户在多图层动画展示界面双击鼠标，多图层动画展示界面仅展示图层二202的青少年，即多图层动画展示界面由图2C中214变为图2C中216，视觉上为青少年所在的场景中停止下雪了。
(3)若用户在多图层动画展示界面向右滑动鼠标时，多图层动画展示界面展示的目标动画为在图层四208展示雪花飘落的基础上，图层二204的中年人逐渐变为图层三206的老年人，多图层动画展示界面由图2C中212变为图2C中218，视觉上为雪中的中年人随着时间流逝逐渐年长。若此时用户在多图层动画展示界面双击鼠标，多图层动画展示界面仅展示图层三206的老年人，即多图层动画展示界面由图2C中218变为图2C中220，视觉上为老年人年所在的场景中停止下雪了。
需要说明的是，通过多图层动画展示界面接收交互请求只是本申请中的一种与用户交互的情况，而在其他未与用户交互的情况时，多图层动画展示界面不再显示目标动画，而是显示初始动画，即检测到所述多图层动画展示界面不存在交互请求的情况下，在所述多图层动画展示界面展示初始动画，其中，所述初始动画为预先设置的展示动画。
具体的，所述检测到所述多图层动画展示界面不存在交互请求的情况包括在浏览器或者应用程序打开后用户还未发起交互事件和用户停止交互事件两种情况。所述初始动画也可以理解为在交互事件发生前多图层动画展示界面展示的动画。
在浏览器或者应用程序打开后用户还未发起交互事件时，为了提高用户的感官，在多图层动画展示界面会显示预先设置好的初始动画，所述初始动画可以根据配置数据中的初始状态进行生成。例如，初始动画为春天景象动画，在用户未发起交互事件时，多图层动画展示界面展示春天景象动画。
在实际应用中，多图层动画展示界面的交互事件也存在结束的情况，即用户的鼠标离开多图层动画展示界面或者对于触控屏手指离开多图层动画展示界面。此时，多图层动画展示界面的目标动画会恢复到初始动画，为避免从目标动画直接变为初始动画的不连贯和影响，在恢复期间多图层动画展示界面显示的动画从目标动画逐渐过渡到初始动画，即在所述交互事件结束后，目标动画恢复到初始动画。例如，初始动画为春天景象动画，目标动画为冬天景象动画，在交互事件结束后，多图层动画展示界面生成的过渡动画为冬天、秋天、夏天、再过渡到春天的景象动画。
需要说明的是，在交互事件结束时，本地会自动生成一个结束时令，用于结束目标动画。在所述交互事件结束后，多图层动画展示界面从目标动画恢复到初始动画，具体实现过程可以是在监测到交互事件结束的情况下，生成结束指令；根据所述结束指令，所述多图层动画展示界面从目标动画恢复到初始动画。例如，在鼠标离开多图层动画展示界面时，立刻生成结束指令，根据结束指令结束冬天景象动画，即将要恢复到春天景象动画，在恢复过程中展示冬天、秋天、夏天、再过渡到春天的景象动画。
本申请提供的多图层动画展示的交互方法，通过多图层动画展示界面接收交互请求，所述交互请求中携带有交互事件的位置信息和多图层动画展示请求；根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画；响应于所述交互请求，在所述多图层动画展示界面对所述目标动画进行展示。所述多图层动画展示的交互方法通过多图层动画展示界面接收交互请求，可以实时地监测到用户与多图层动画展示界面的交互，并根据配置数据和用户交互完成多图层动画展示界面展示的动画的转换，不仅使生成的多图层动画层次感强、变化自然，还提高了用户的参与感和体验性。
下述结合附图3，以本申请提供的多图层动画展示的交互方法在浏览器中的应用为例，对所述多图层动画展示的交互方法进行进一步说明。其中，图3示出了本申请一实施例提供的一种应用于浏览器的多图层动画展示的交互方法的处理流程图，具体包括以下步骤：
步骤302：接收页面访问请求。
当用户在客户端打开浏览器并访问含有多图层动画展示界面的页面时，会给浏览器发送页面访问请求，从而使浏览器接收页面访问请求。
步骤304：获取配置数据。
浏览器根据页面访问请求，通过异步请求从服务器获取已保存的配置数据，其中，异步请求是指CPU的分时处理。
步骤306：优先加载和展示静态画面。
配置数据获取成功后，浏览器会优先加载并展示静态画面。这样做，可以避免解析配置数据并生成初始动画耗时过长造成多图层动画展示界面空白，降低用户感官和体验性。
步骤308：检测浏览器是否支持多图层动画展示。
由于版本等问题，有些浏览器不支持多图层动画展示。为了确定当前浏览器是否支持多图层动画展示，需要通过JavaScript检测当前浏览器环境是否支持动画所依赖的所有功能。如不支持，执行步骤306，只显示静态画面；若支持，则执行步骤310。
步骤310：展示初始动画。
浏览器对配置数据进行解析，并根据解析结果在多图层动画展示界面上展示初始动画。
步骤312：通过多图层动画展示界面接收交互请求。
当检测到用户通过鼠标在多图层动画展示界面上滑动时，浏览器会监测有交互事件发生，此时浏览器会过多图层动画展示界面接收交互请求。
步骤314：计算偏移信息。
根据多图层动画展示请求计算位置信息相对于多图层动画中的各图层中心的偏移信息。
步骤316：计算图层显示属性。
根据配置数据中各图层的位置偏移曲线和位置偏移量、缩放偏移曲线和缩放偏移量、旋转偏移曲线和旋转偏移量、模糊偏移曲线和模糊偏移量分别计算图层位置显示属性、图层缩放显示属性、图层旋转显示属性、图层模糊显示属性。
步骤318：设置渲染器。
根据上述确定图层位置显示属性、图层缩放显示属性、图层旋转显示属性、图层模糊显示属性设置渲染器，以便于渲染器对各图层进行渲染。
步骤320：根据图层显示属性渲染各图层。
通过渲染器根据图层显示属性逐层渲染各图层。
步骤322：混合各图层生成目标动画。
将渲染后的各图层进行叠加、混和处理，生成目标动画。
步骤324：展示目标动画。
响应于接收交互请求，将生成的目标动画展示在多图层动画展示界面中。
步骤326：交互事件结束展示初始动画。
在交互事件结束后，即用户的鼠标位置离开多图层动画展示界面，所述多图层动画从目标动画恢复到初始动画。
本申请提供的多图层动画展示的交互方法，接收页面访问请求；获取配置数据；优先加载和展示静态画面；检测浏览器是否支持多图层动画展示；展示初始动画；通过多图层动画展示界面接收交互请求；计算偏移信息；计算图层显示属性；设置渲染器；根据图层显示属性渲染各图层；混合各图层生成目标动画；展示目标动画；交互事件结束展示初始动画。所述多图层动画展示的交互方法通过多图层动画展示界面接收交互请求，可以实时地监测到用户与多图层动画展示界面的交互，并根据配置数据和用户交互完成多图层动画展示界面展示的动画的转换，不仅使生成的多图层动画层次感强、变化自然，还提高了用户的参与感和体验性。
与上述方法实施例相对应，本申请还提供了多图层动画展示浏览器实施例，图4A示出了本申请一实施例提供的一种多图层动画展示浏览器的结构示意图。如图4A所示，该浏览器包括：
交互监测模块402，用于通过所述浏览器的多图层动画展示界面接收交互请求，所述交互请求中携带有交互事件的位置信息和多图层动画展示请求；
第一处理模块404，用于根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；
第二处理模块406，用于根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；
渲染模块408，用于根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画；
显示模块410，用于响应于所述交互请求，在所述浏览器的多图层动画展示界面对所述目标动画进行展示。
在本实施例的一个或多个实施方式中，所述第一处理模块404，还用于根据多图层动画展示请求解析所述位置信息，确定所述多图层动画展示请求在所述多图层动画展示界面中的位置，通过预先设置的最大偏移量计算所述位置相对于多图层动画中的各图层中心的偏移信息。
在本实施例的一个或多个实施方式中，所述第二处理模块406，还用于根据配置数据中各图层的偏移曲线和偏移量计算与所述各图层中心的偏移信息对应的图层显示属性。
在本实施例的一个或多个实施方式中，所述第二处理模块406，还用于根据配置数据中各图层的位置偏移曲线和位置偏移量计算与所述各图层中心的偏移信息对应的位置图层显示属性，通过配置数据中各图层的缩放偏移曲线和缩放偏移量计算与所述各图层中心的偏移信息对应的缩放图层显示属性，通过配置数据中各图层的旋转偏移曲线和旋转偏移量计算与所述各图层中心的偏移信息对应的旋转图层显示属性，和/或通过配置数据中各图层的模糊偏移曲线和模糊偏移量计算与所述各图层中心的偏移信息对应的模糊图层显示属性。
在本实施例的一个或多个实施方式中，所述浏览器还包括：
更新模块，用于根据所述多图层动画展示请求更新本地存储的与所述各图层中心的偏移信息对应的图层显示属性。
在本实施例的一个或多个实施方式中，所述浏览器还包括：
输入模块，被配置为根据所述多图层动画展示请求，将与所述各图层中心的偏移信息对应的图层显示属性和各图层对应的预先生成的贴图输入至渲染器。
在本实施例的一个或多个实施方式中，所述渲染模块408，还用于根据与所述各图层中心的偏移信息对应的图层显示属性设置渲染器，通过所述渲染器对各图层进行渲染。
在本实施例的一个或多个实施方式中，显示模块410，还用于检测到所述多图层动画展示界面不存在交互请求的情况下，在所述多图层动画展示界面展示初始动画，其中，所述初始动画为预先设置的展示动画。
在本实施例的一个或多个实施方式中，所述浏览器还包括：
功能检测模块，用于根据初始化指令检测所述多图层动画展示界面是否具有动画展示功能，在所述多图层动画展示界面不具有动画展示功能的情况下，在所述多图层动画展示界面展示静态画面。
在本实施例的一个或多个实施方式中，所述初始化模块，还被配置为初始化所述多图层动画展示界面。
参见图4B，图4B示出了本申请一实施例提供的一种多图层动画展示浏览器的界面示意图：图中412所指向的框图为所述多图层动画展示浏览器的界面，图中414所指向的框图为多图层动画展示界面，且所述多图层动画展示界面可以根据需求设置在浏览器的任意位置，例如顶部，中部或者底部。图中414A、414B、414C所指向的框图代表图层一、图层二、图层三，且图层的数量可以根据展示需要进行调整，即图层可以有两个、四个、五个等。需要说明的是，图中414A、414B、414C是为了便于理解所述多图层动画展示浏览器的界面中图层的组成，414A、414B、414C框图的大小与位置并不代表图层实际的大小与位置，且多图层动画展示界面414展示的多图层动画为414A、414B、414C渲染并叠加后的结果。
本申请提供的多图层动画展示浏览器，交互检测模块，用于通过所述浏览器的多图层动画展示界面接收交互请求，所述交互请求中携带有交互事件的位置信息和多图层动画展示请求；第一计算模块，用于根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；第二计算模块，用于根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；渲染模块，用于根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画；显示模块，用于响应于所述交互请求，在所述浏览器的多图层动画展示界面对所述目标动画进行展示。所述多图层动画展示浏览器通过多图层动画展示界面接收交互请求，可以实时地监测到用户与多图层动画展示界面的交互，并根据配置数据和用户交互完成多图层动画展示界面展示的动画的转换，不仅使生成的多图层动画层次感强、变化自然，还提高了用户的参与感和体验性。
上述为本实施例的一种多图层动画展示浏览器的示意性方案。需要说明的是，该多图层动画展示浏览器的技术方案与上述的多图层动画展示的交互方法的技术方案属于同一构思，多图层动画展示浏览器的技术方案未详细描述的细节内容，均可以参见上述多图层动画展示的交互方法的技术方案的描述。
本申请一实施例还提供一种多图层动画展示装置，所述装置配置有如前所述多图层动画展示浏览器。
上述为本实施例的一种多图层动画展示装置的示意性方案。需要说明的是，该多图层动画展示装置的技术方案与上述的多图层动画展示的交互方法的技术方案属于同一构思，多图层动画展示装置的技术方案未详细描述的细节内容，均可以参见上述多图层动画展示的交互方法的技术方案的描述。
图5示出了根据本说明书一个实施例提供的一种计算设备500的结构框图。该计算设备500的部件包括但不限于存储器510和处理器520。处理器520与存储器510通过总线530相连接，数据库550用于保存数据。
计算设备500还包括接入设备540，接入设备540使得计算设备500能够经由一个或多个网络560通信。这些网络的示例包括公用交换电话网(PSTN)、局域网(LAN)、广域网(WAN)、个域网(PAN)或诸如因特网的通信网络的组合。接入设备540可以包括有线或无线的任何类型的网络接口(例如，网络接口卡(NIC))中的一个或多个，诸如IEEE802.11无线局域网(WLAN)无线接口、全球微波互联接入(Wi-MAX)接口、以太网接口、通用串行总线(USB)接口、蜂窝网络接口、蓝牙接口、近场通信(NFC)接口，等等。
在本说明书的一个实施例中，计算设备500的上述部件以及图5中未示出的其他部件也可以彼此相连接，例如通过总线。应当理解，图5所示的计算设备结构框图仅仅是出于示例的目的，而不是对本说明书范围的限制。本领域技术人员可以根据需要，增添或替换其他部件。
计算设备500可以是任何类型的静止或移动计算设备，包括移动计算机或移动计算设备(例如，平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动电话(例如，智能手机)、可佩戴的计算设备(例如，智能手表、智能眼镜等)或其他类型的移动设备，或者诸如台式计算机或PC的静止计算设备。计算设备500还可以是移动式或静止式的服务器。
其中，处理器520执行所述计算机指令时实现所述的多图层动画展示的交互方法的步骤。
上述为本实施例的一种计算设备的示意性方案。需要说明的是，该计算设备的技术方案与上述的多图层动画展示的交互方法的技术方案属于同一构思，计算设备的技术方案未详细描述的细节内容，均可以参见上述多图层动画展示的交互方法的技术方案的描述。
本申请一实施例还提供一种计算机可读存储介质，其存储有计算机指令，该指令被处理器执行时实现如前所述多图层动画展示的交互方法的步骤。
上述为本实施例的一种计算机可读存储介质的示意性方案。需要说明的是，该存储介质的技术方案与上述的多图层动画展示的交互方法的技术方案属于同一构思，存储介质的技术方案未详细描述的细节内容，均可以参见上述多图层动画展示的交互方法的技术方案的描述。
上述对本申请特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
所述计算机指令包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。
需要说明的是，对于前述的各方法实施例，为了简便描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定都是本申请所必须的。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。
以上公开的本申请优选实施例只是用于帮助阐述本申请。可选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本申请的内容，可作很多的修改和变化。本申请选取并具体描述这些实施例，是为了更好地解释本申请的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本申请。本申请仅受权利要求书及其全部范围和等效物的限制。

Claims (14)

1.一种多图层动画展示的交互方法，其特征在于，包括：
通过多图层动画展示界面接收交互请求，所述交互请求中携带有交互事件的位置信息和多图层动画展示请求；
根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；
根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；
根据所述图层显示属性对各图层分别进行渲染，并将渲染后的各图层叠加生成目标动画；
响应于所述交互请求，在所述多图层动画展示界面对所述目标动画进行展示。
2.根据权利要求1所述的方法，其特征在于，所述根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息，包括：
根据多图层动画展示请求解析所述位置信息，确定所述多图层动画展示请求在所述多图层动画展示界面中的位置；
通过预先设置的最大偏移量计算所述位置相对于多图层动画中的各图层中心的偏移信息。
3.根据权利要求1所述的方法，其特征在于，所述根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性，包括：
根据配置数据中各图层的偏移曲线和偏移量计算与所述各图层中心的偏移信息对应的图层显示属性。
4.根据权利要求3所述的方法，其特征在于，所述根据配置数据中各图层的偏移曲线和偏移量计算与所述各图层中心的偏移信息对应的图层显示属性，包括：
根据配置数据中各图层的位置偏移曲线和位置偏移量计算与所述各图层中心的偏移信息对应的图层位置显示属性；
通过配置数据中各图层的缩放偏移曲线和缩放偏移量计算与所述各图层中心的偏移信息对应的图层缩放显示属性；
通过配置数据中各图层的旋转偏移曲线和旋转偏移量计算与所述各图层中心的偏移信息对应的图层旋转显示属性；和/或
通过配置数据中各图层的模糊偏移曲线和模糊偏移量计算与所述各图层中心的偏移信息对应的图层模糊显示属性。
5.根据权利要求1所述的方法，其特征在于，在所述根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性之后，所述根据所述图层显示属性对各图层分别进行渲染之前，还包括：
根据所述多图层动画展示请求更新本地存储的与所述各图层中心的偏移信息对应的图层显示属性。
6.根据权利要求1所述的方法，其特征在于，在所述根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性之后，所述根据所述图层显示属性对各图层分别进行渲染之前，还包括：
根据所述多图层动画展示请求，将与所述各图层中心的偏移信息对应的图层显示属性和各图层对应的预先生成的贴图输入至渲染器。
7.根据权利要求6所述的方法，其特征在于，所述根据所述图层显示属性对各图层分别进行渲染，包括：
根据与所述各图层中心的偏移信息对应的图层显示属性设置渲染器，通过所述渲染器对各图层分别进行渲染。
8.根据权利要求1所述的方法，其特征在于，所述方法还包括：
检测到所述多图层动画展示界面不存在交互请求的情况下，在所述多图层动画展示界面展示初始动画，其中，所述初始动画为预先设置的展示动画。
9.根据权利要求1所述的方法，其特征在于，所述方法还包括：
根据初始化指令检测所述多图层动画展示界面是否具有动画展示功能；
在所述多图层动画展示界面不具有动画展示功能的情况下，在所述多图层动画展示界面展示静态画面。
10.根据权利要求9所述的方法，其特征在于，在根据初始化指令检测所述多图层动画展示界面是否具有动画展示功能之后，还包括：
初始化所述多图层动画展示界面。
11.一种多图层动画展示浏览器，其特征在于，包括：
交互检测模块，用于通过所述浏览器的多图层动画展示界面接收交互请求，所述交互请求中携带有交互事件的位置信息和多图层动画展示请求；
第一计算模块，用于根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；
第二计算模块，用于根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；
渲染模块，用于根据所述图层显示属性对各图层分别进行渲染，并将渲染后的各图层叠加生成目标动画；
显示模块，用于响应于所述交互请求，在所述浏览器的多图层动画展示界面对所述目标动画进行展示。
12.一种多图层动画展示装置，其特征在于，配置有如权利要求11的浏览器。
13.一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令，其特征在于，所述处理器执行所述计算机指令时实现权利要求1-10任意一项所述方法的步骤。
14.一种计算机可读存储介质，其存储有计算机指令，其特征在于，该计算机指令被处理器执行时实现权利要求1-10任意一项所述方法的步骤。
CN202110200639.4A 2021-02-23 2021-02-23 多图层动画展示的交互方法及浏览器 Active CN112882637B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110200639.4A CN112882637B (zh) 2021-02-23 2021-02-23 多图层动画展示的交互方法及浏览器

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110200639.4A CN112882637B (zh) 2021-02-23 2021-02-23 多图层动画展示的交互方法及浏览器

Publications (2)

Publication Number Publication Date
CN112882637A CN112882637A (zh) 2021-06-01
CN112882637B true CN112882637B (zh) 2022-07-29

Family

ID=76053752

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110200639.4A Active CN112882637B (zh) 2021-02-23 2021-02-23 多图层动画展示的交互方法及浏览器

Country Status (1)

Country Link
CN (1) CN112882637B (zh)

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113676765B (zh) * 2021-08-20 2024-03-01 上海哔哩哔哩科技有限公司 交互动画展示方法及装置
CN113992981B (zh) * 2021-10-21 2024-03-15 稿定（厦门）科技有限公司 视频图像的处理方法及装置
CN114820895A (zh) * 2022-03-11 2022-07-29 支付宝(杭州)信息技术有限公司 动画数据处理方法、装置、设备及***
CN115827144A (zh) * 2023-02-20 2023-03-21 北京集度科技有限公司 一种页面展示方法、***、电子设备及计算机程序产品
CN116226411B (zh) * 2023-05-06 2023-07-28 深圳市人马互动科技有限公司 一种基于动画的互动项目的交互信息处理方法和装置
CN117251231B (zh) * 2023-11-17 2024-02-23 浙江口碑网络技术有限公司 一种动画资源处理方法、装置、***及电子设备

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102541515B (zh) * 2010-12-08 2014-12-03 腾讯科技（深圳）有限公司 一种实现切屏特效的方法及装置
US9181760B2 (en) * 2013-07-24 2015-11-10 Innovations, Inc. Motion-based view scrolling with proportional and dynamic modes
CN103942050B (zh) * 2014-04-15 2019-01-04 Tcl集团股份有限公司 一种Android平台应用动画实现方法及***
CN107038735B (zh) * 2017-03-31 2021-02-02 武汉斗鱼网络科技有限公司 一种实现实体打开动画的方法及***
CN107340964A (zh) * 2017-06-02 2017-11-10 武汉斗鱼网络科技有限公司 一种视图的动画效果实现方法及装置
CN110704138B (zh) * 2018-06-25 2021-04-23 马上消费金融股份有限公司 动画效果的实现方法、装置及计算机可读存储介质
CN112184856B (zh) * 2020-09-30 2023-09-22 广州光锥元信息科技有限公司 支持多图层特效及动画混合的多媒体处理装置
CN112231029A (zh) * 2020-10-13 2021-01-15 腾讯音乐娱乐科技（深圳）有限公司 应用于主题的帧动画处理方法

Also Published As

Publication number Publication date
CN112882637A (zh) 2021-06-01

Similar Documents

Publication Publication Date Title
CN112882637B (zh) 多图层动画展示的交互方法及浏览器
WO2021008166A1 (zh) 用于虚拟试衣的方法和装置
US8355024B2 (en) Lightweight three-dimensional display
US8456467B1 (en) Embeddable three-dimensional (3D) image viewer
CN112882638B (zh) 多图层动画展示方法及装置
US9240070B2 (en) Methods and systems for viewing dynamic high-resolution 3D imagery over a network
JP2024505995A (ja) 特殊効果展示方法、装置、機器および媒体
US20070260979A1 (en) Distributed processing when editing an image in a browser
US20080225058A1 (en) Effects applied to images in a browser
US9176662B2 (en) Systems and methods for simulating the effects of liquids on a camera lens
CN111459501B (zh) 基于SVG的Web组态画面存储与展示***和方法及介质
RU2598802C2 (ru) Способ, устройство и аппарат воспроизведения анимации
CN113326043B (zh) 网页渲染方法、网页制作方法及网页渲染***
CN110570501A (zh) 一种线条动画绘制方法及其设备、存储介质、电子设备
CN113705156A (zh) 字符处理方法及装置
Letić et al. Real-time map projection in virtual reality using WebVR
CN110990104B (zh) 一种基于Unity3D的纹理渲染方法及装置
CN114913277A (zh) 一种物体立体交互展示方法、装置、设备及介质
US11907646B1 (en) HTML element based rendering supporting interactive objects
Girašek et al. Visualization of temperature fields distribution on power module within web interface
Mendes et al. IMAGO visualization System: an interactive web-based 3D visualization system for cultural heritage applications
CN112418902A (zh) 基于网页的多媒体合成方法和***
US20240119197A1 (en) System and method for maintaining state information when rendering design interfaces in a simulation environment
CN115858069A (zh) 页面动画显示方法及装置
Peterson et al. Frequently Updated Maps and their Public Display

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
GR01 Patent grant
GR01 Patent grant