CN112882638A - 多图层动画展示方法及装置 - Google Patents

多图层动画展示方法及装置 Download PDF

Info

Publication number
CN112882638A
CN112882638A CN202110200640.7A CN202110200640A CN112882638A CN 112882638 A CN112882638 A CN 112882638A CN 202110200640 A CN202110200640 A CN 202110200640A CN 112882638 A CN112882638 A CN 112882638A
Authority
CN
China
Prior art keywords
layer
animation
initial
configuration data
display
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.)
Granted
Application number
CN202110200640.7A
Other languages
English (en)
Other versions
CN112882638B (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 CN202110200640.7A priority Critical patent/CN112882638B/zh
Publication of CN112882638A publication Critical patent/CN112882638A/zh
Application granted granted Critical
Publication of CN112882638B publication Critical patent/CN112882638B/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
    • 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)
  • Data Mining & Analysis (AREA)
  • Computer Graphics (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供一种多图层动画展示方法及装置，其中所述多图层动画展示方法包括：对交互事件进行监测，所述交互事件中携带有交互事件的位置信息和多图层动画展示请求；在监测到交互事件的情况下，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画并展示。所述多图层动画展示方法，不仅简化了多图层动画的制作和实现流程，还提高了用户对展示多图层动画的页面或者应用程序的体验性。

Description

多图层动画展示方法及装置
技术领域
本申请涉及计算机技术领域，特别涉及一种多图层动画展示方法。本申请同时涉及一种多图层动画展示装置，一种计算设备，以及一种计算机可读存储介质。
背景技术
随着计算机技术的快速发展，各种各样的动画形式层出不穷，在有用户交互的动画展示领域，有用户交互的动画展示非常流行。根据用户输入的不同展示不同的动画效果，可以给用户一种耳目一新的感觉，会极大的提高用户对展示该动画的页面或者应用的观看兴趣。
现有技术中，在实现有用户交互的动画效果时，通常方法是由设计师确定动画效果的具体设计以及对应的交互，然后由开发人员评审其可行性，在确认其可行后参照设计稿进行对应效果的实现，最后由设计师对实现效果进行验收，做细微调整后完成开发。
然而上述方法中，开发过程中由于设计师和开发人员间缺乏统一的描述多图层动画的手段，导致此类任务的开发效率低、周期长、且会有开发人员完成的效果与设计预期不一致的情况。因此，急需提供一种简化多图层动画的制作和实现流程、提高开发效率的多图层动画展示方法。
发明内容
有鉴于此，本申请实施例提供了一种多图层动画展示方法。本申请同时涉及一种多图层动画展示装置，一种计算设备，以及一种计算机可读存储介质，以解决现有技术中开发效率低、周期长、以及完成效果与预期效果不一致的技术缺陷。
根据本申请实施例的第一方面，提供了一种多图层动画展示方法，包括：
对交互事件进行监测，所述交互事件中携带有交互事件的位置信息和多图层动画展示请求；
在监测到交互事件的情况下，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；
根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；
根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画并展示。
可选地，所述根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息，包括：
根据多图层动画展示请求解析所述位置信息，通过预先设置的最大偏移量计算所述位置信息的解析结果相对于多图层动画中的各图层中心的偏移信息。
可选地，所述根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性，包括：
根据配置数据中各图层的偏移曲线和偏移量计算与所述各图层中心的偏移信息对应的图层显示属性。
可选地，在对交互事件进行监测之前，还包括：
接收初始化指令，根据所述初始化指令获取各图层初始配置数据并保存；
解析所述各图层初始配置数据，加载所述各图层初始配置数据中包含的文件资源，其中，所述文件资源包括视频和/或图片；
根据所述初始化指令，通过各图层初始配置数据对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。
可选地，解析所述各图层初始配置数据，加载所述各图层初始配置数据中包含的文件资源，包括：
解析所述各图层初始配置数据，将各图层初始配置数据中的文件资源加载为目标元素，其中，所述目标元素包括图片元素和/或视频元素。
可选地，根据所述初始化指令，通过各图层初始配置数据对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示，包括：
根据所述初始化指令，为各图层创建目标元素节点；
通过所述各图层初始配置数据中的初始状态初始化各图层目标元素节点；
根据初始化后的各图层目标元素节点对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。
可选地，在通过所述各图层初始配置数据中的初始状态初始化各图层目标元素节点之后，还包括：
根据各图层初始配置数据中初始状态下的初始缩放和目标元素的尺寸计算各图层的宽度和高度，并确定缩放插值函数的参数值；
根据各图层初始配置数据中初始状态下的初始位置确定位置插值函数的参数值；
根据各图层初始配置数据中初始状态下的初始旋转确定旋转插值函数的参数值；和/或
根据各图层初始配置数据中初始状态下的初始模糊确定模糊插值函数的参数值。
可选地，所述各图层默认为居中显示。
可选地，在将各图层初始配置数据中的文件资源加载为目标元素之后，还包括：
根据所述目标元素生成对应的贴图。
可选地，根据所述初始化指令，通过各图层初始配置数据对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示，包括：
根据各图层初始数据配置中的初始状态初始化渲染各图层所需要的模型顶点数据，确定所述模型顶点数据的读取格式；
初始化渲染器，并将所述贴图输入至所述渲染器；
根据所述各图层初始配置数据设置渲染器，通过所述渲染器对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。
可选地，所述方法还包括：
当所述交互事件的位置信息连续变化时，将所述位置信息按照时间阈值划分为至少两个子位置信息；
根据所述多图层动画展示请求计算至少两个子位置信息相对于交互事件的初始位置的至少两个偏移信息，其中，每个子位置信息对应一个偏移信息；
根据预先保存的配置数据计算与所述至少两个偏移信息对应的至少两个图层显示属性，其中，每个偏移信息对应一个图层显示属性；
根据所述至少两个图层显示属性对各图层进行渲染，将渲染后的各图层叠加生成至少两个目标动画并展示。
可选地，所述配置数据包括图层数组，所述图层数组中的每个元素代表一个图层，每个图层的属性包括图片配置/视频配置、初始状态、偏移状态、以及偏移曲线。
根据本申请实施例的第二方面，提供了一种多图层动画展示装置，包括：
监测模块，被配置为对交互事件进行监测，所述交互事件中携带有交互事件的位置信息和多图层动画展示请求；
第一处理模块，被配置为在监测到交互事件的情况下，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；
第二处理模块，被配置为根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；
展示模块，被配置为根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画并展示。
根据本申请实施例的第三方面，提供了一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行所述计算机指令时实现所述多图层动画展示方法的步骤。
根据本申请实施例的第四方面，提供了一种计算机可读存储介质，其存储有计算机指令，该计算机指令被处理器执行时实现所述多图层动画展示方法的步骤。
本申请提供的多图层动画展示方法，对交互事件进行监测，所述交互事件中携带有交互事件的位置信息和多图层动画展示请求；在监测到交互事件的情况下，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画并展示。所述多图层动画展示方法通过对交互事件进行监测，可以实时地监测到用户与多图层动画之间的交互，根据配置数据和用户交互即可对多图层动画进行操作，使多图层动画在数据配置的基础上能够根据用户交互进行变换，不仅简化了多图层动画的制作和实现流程，还提高了用户对展示多图层动画的页面或者应用程序的体验性。
附图说明
图1是本申请一实施例提供的一种多图层动画展示方法的流程图；
图2A是本申请一实施例提供的一种各图层配置数据的结构示意图；
图2B是本申请一实施例提供的一种调节图片源循环时长的效果示意图；
图2C是本申请一实施例提供的一种调节初始位置的效果示意图；
图2D是本申请一实施例提供的一种调节初始缩放的效果示意图；
图2E是本申请一实施例提供的一种调节初始旋转的效果示意图；
图3是本申请一实施例提供的一种应用于浏览器的多图层动画展示方法的处理流程图；
图4是本申请一实施例提供的一种多图层动画展示装置的结构示意图；
图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：对交互事件进行监测，所述交互事件中携带有交互事件的位置信息和多图层动画展示请求。
具体的，所述多图层动画是指由多个图层组成并根据各图层的显示效果进行叠加从而生成的动画，所述多图层动画可以在网页页面或者应用程序中特定的一个区域进行展示；所述交互事件是指用户通过鼠标在多图层动画上滑动和/或点击、或者对于触摸控制的显示屏用户直接通过手指等在多图层动画上滑动的事件，即所述交互事件可以是鼠标事件，也可以是触控事件；所述位置信息是指用户通过鼠标或者手指在多图层动画上滑动或者点击的位置信息；所述多图层动画展示请求是指根据所述位置信息进行多图层动画展示的请求。
实际应用中，用户可以通过浏览器或者应用程序访问多图层动画，当所述多图层动画出现在屏幕中之后，会立即进入检测状态，检测用户是否通过鼠标或者手指在多图层动画上滑动或者点击，即对交互事件进行监测。
例如，用户通过浏览器打开一个网页，而该网页上正好有对应的多图层动画。当该网页中的多图层动画完整地展示在网页上之后，就可以监测是否有用户通过控制鼠标在多图层动画上滑动或者点击。又如，用户通过手机打开了一个应用程序，在该应用程序的主页上也有一个多图层动画，当该应用程序中的多图层动画初始化完成之后，该应用程序就可以监测多图层动画上是否有用户手指滑动或者点击。
本申请中通过对交互事件进行实时监测，一旦交互事件发生就可以及时地监测到，可以有效地提高对位置信息和多图层动画展示请求的获取效率，同时也为后续响应交互事件做好了准备。
需要说明的是，在对交互事件进行监测之前，在网页页面或者应用程序主页上就已经显示有动画，即初始动画。而初始动画是在用户打开含有多图层动画的网页或者应用程序时就自动展示的动画。由此可见，在用户打开所述含有多图层动画的网页或者应用程序时，需要生成初始动画并展示，具体实现过程可以为：
接收初始化指令，根据所述初始化指令获取各图层初始配置数据并保存；
解析所述各图层初始配置数据，加载所述各图层初始配置数据中包含的文件资源，其中，所述文件资源包括视频和/或图片；
根据所述初始化指令，通过各图层初始配置数据对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。
具体的，所述初始化指令为用户打开包含有多图层动画的网页或者应用程序时自动生成的指令；所述各图层初始配置数据为设计师在设计多图层动画时预先保存的一些数据。
实际应用中，在用户打开一个包含有多图层动画的网页或者应用程序时，本地将接收到一个初始化指令，之后根据初始化指令通过异步请求从服务器获取已保存的用于生成初始动画的各图层初始配置数据。将所述各图层初始配置数据进行解析，根据各图层初始配置数据中的图片配置/视频配置加载文件资源。另外，当每个图层中视频和/或图片有多个时，可以为其设置展示时间，这样可以提高多图层动画的动态层次感，使生成的动画更生动形象。根据初始化指令中的渲染指令开始渲染各图层，渲染各图层时需要依据各图层初始配置数据中的初始状态这一属性对各图层进行渲染，并混合、叠加各图层生成动画并展示，即展示初始动画。如此，通过各图层初始配置数据生成初始动画，可以在较短的时间内完成初始动画的展示，有助于提高用户体验性。
例如，在用户通过手机中的浏览器打开网页A，其中，网页A中包含多图层动画。在用户打开网页A时，浏览器立即接收到一个初始化指令，并根据初始化指令向网页A对应的服务器获取用于展示多图层动画的各图层初始配置数据。之后，对各图层初始配置数据进行解析，假设有两个图层：图层一和图层二。其中，图层一中有一张图片和图层二中有两张图片，也就是说配置文件为三张图片。由于图层一中只含有一张图片，不能为其设定时间。对于图层二，设定每个图片的展示时间为一秒，即图层二中的两张图片以一秒为间隔交替展示。在加载文件资源之后，根据图层一初始配置数据中的初始状态对图层一的图片进行渲染，根据图层二初始配置数据中的初始状态对图层二的图片进行渲染，再将渲染后图层一和图层二进行叠加生成初始动画。
需要说明的是，已保存的配置数据是由设计师通过配置和预览工具进行配置的：渲染器将所需要的配置数据结构以图形化的形式呈现给设计师，方便设计师对配置数据进行修改和调试；在设计师对配置数据进行修改和调试之后，将其保存在服务器中，并为其配置读写服务，方便客户端进行获取。
具体的，所述配置数据包括图层数组，所述图层数组中的每个元素代表一个图层，每个图层的属性包括图片配置/视频配置、初始状态、偏移状态、以及偏移曲线。参见图2A，所述配置数据包含至少两个图层，以图层一201为例进行说明。图层一201包含有图片配置/视频配置201A、初始状态201B、偏移状态201C和偏移曲线201D四个属性。其中，图片配置/视频配置201A用于获取展示多图层动画的图片和/或视频，可以有一个图片源/视频源，也可以有多个图片源/视频源，当有多个图片源/视频源时，可以为每个图片/视频设置播放时长；初始状态201B用于设置的初始动画，即未监测到交互事件时展示的动画，初始状态201B包括初始位置201B1、初始缩放201B2、初始旋转201B3、初始模糊201B4四个属性；偏移状态用于设置目标动画，即监测到交互事件时显示的动画，偏移状态201C包括位置偏移量201C1、缩放偏偏移量201C2、旋转偏移量201C3、模糊偏移量201C4；偏移曲线201D为用户输入与偏移状态201C之间的映射关系，包括位置偏移曲线201D1、缩放偏移曲线201D2、旋转偏移曲线201D3、模糊偏移曲线201D4。以上述结构设置配置数据，对各图层配置数据的不同属性进行划分，有利于后台运行可以快速找到展示多图层动画所需的属性，降低了后台数据处理的压力。
下面以图层一为例，对图片配置/视频配置、初始状态、偏移状态、以及偏移曲线进行介绍：
参见图2B，假设图层一的图片配置/视频配置属性中有两个图片源，分别为图片源一201A1和图片源二201A2，其中图片源一201A1对应太阳图，图片源二201A2对应月亮图，为太阳图设置播放时长为2秒，即设置201A1-T为2秒；为月亮图设置播放时长为3秒，即设置201A2-T为3秒，这样在展示图层一时，太阳图展示2秒后展示月亮图，月亮图展示3秒后展示太阳图，以此往复，形成日夜交替的变化。此外，通过改变图片源更换图片，如将太阳图变更为门打开的图片，将月亮图变更为门关闭的图，通过设置循环时长，形成开门闭门的动画。
以上述的太阳图为例，若图层一中只含有太阳图，即太阳图就代表了图层一，参见图2C，对于初始状态中的初始位置来说，可以调节图层一(太阳图)在窗口中显示的位置，如将图层一(太阳图)设置在窗口中的左上角或者右下角。参见图2D，对于初始状态中的初始缩放来说，可以调节图层一(太阳图)在窗口中显示的大小，例如图层一(太阳图)的长宽给各为1CM，将初始缩放的值调节为2时，在窗口上显示的图层一(太阳图)长宽各为2CM。参见图2E，对于初始状态中的初始旋转来说，可以旋转图层一(太阳图)，例如将初始旋转的值调节为+180，则图层一(太阳图)以其中心为轴，顺时针旋转180度；又如将初始旋转的值调节为-90，则图层一(太阳图)以其中心为轴，逆时针旋转90度。对于初始状态中的初始模糊来说，可以调节图层一(太阳图)的模糊程度。
图层一的偏移状态是指在交互事件发生时图层一的偏移状态，而图层一的偏移曲线为交互事件与偏移状态的映射关系。例如，交互事件通过位置偏移曲线映射位置偏移量的一个值，通过缩放偏移曲线映射缩放偏移量的一个值，通过旋转偏移曲线映射旋转偏移量的一个值，通过模糊偏移曲线映射模糊偏移量的一个值。
在当前环境支持多图层动画展示的情况下，解析所述配置数据，根据图片配置/视频配置中的图片源/视频源加载图片/视频。具体过程可以为：解析所述各图层初始配置数据，将各图层初始配置数据中的文件资源全部加载为目标元素，其中，所述目标元素包括图片元素和/或视频元素。解析所述各图层初始配置数据时，需要先加载渲染各图层所需要的图片或者视频，而图片或者视频时依据配置数据中的图片源/视频源进行加载，即将各图层初始配置数据中的文件资源全部加载为目标元素。当文件资源即为图片源时，将其加载为图片元素，当文件资源即为视频源时，将其加载为视频元素。这样在渲染各图层之前，先将渲染所需的图片元素或者视频元素进行加载，能够保证在后续渲染各图层的稳定进行。例如，有两个图层：图层一和图层二，其中图层一和图层二初始配置数据中的图片配置/视频配置属性中均为只有图片源，即说明配置数据中的文件资源全部为图片源，根据图片源将图片源所对应的图片加载为图片元素。
渲染图层生成动画都是通过渲染器来实现的，在本申请中渲染器可以使用CSS3或WebGL技术实现。
对于基于CSS3实现的渲染器来说，在将各图层初始配置数据中的文件资源全部加载为目标元素之后，需要根据所述初始化指令，为各图层创建目标元素节点；通过所述各图层初始配置数据中的初始状态初始化各图层目标元素节点；根据初始化后的各图层目标元素节点对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。需要说明的是，每一个目标元素对应一个目标元素节点。首先根据初始化指令创建目标元素节点，若目标元素为图片元素，则创建图片元素节点，若目标元素为视频元素，则创建视频元素节点。根据各图层初始配置数据中初始状态下的初始位置、初始缩放、初始旋转、初始模糊初始化图片元素节点或者视频元素节点，再由基于CSS3实现的渲染器根据初始化完成的图片元素节点或者视频元素节点进行渲染对应各图层，再将各图层混合叠加生成初始动画并展示。如此，在展示初始化动画时，只需要从各图层初始配置数据中就可以得到渲染各图层所需要的所有数据，大大降低了后台进行数据处理时需要多次获取数据的次数，提高了数据处理效率，减少了生成初始动画并展示的耗时。
另外，在基于CSS3实现的渲染器中，在通过所述各图层初始配置数据中的初始状态初始化目标元素节点之后，还需要对基于CSS3实现的渲染器中的一些函数的参数进行调整、修正。这样有利于基于CSS3实现的渲染器在后期渲染各图层时可以避免出现数据错误导致渲染失败。具体实现过程也可为：
根据各图层初始配置数据中初始状态下的初始缩放和目标元素的尺寸计算各图层的宽度和高度，并确定缩放插值函数的参数值；
根据各图层初始配置数据中初始状态下的初始位置确定位置插值函数的参数值；
根据各图层初始配置数据中初始状态下的初始旋转确定旋转插值函数的参数值；和/或
根据各图层初始配置数据中初始状态下的初始模糊确定模糊插值函数的参数值。
对于基于CSS3实现的渲染器来说，会根据初始缩放和目标元素的尺寸计算图层的宽度和高度，一般情况下，所述各图层默认为居中显示。这样可以简化渲染各图层时的流程。同时确定缩放插值函数的参数值，以便于在网页页面或者应用程序窗口大小变化或其他情况下，渲染器根据缩放插值函数重新渲染以适配新的尺寸。同时确定位置插值函数、旋转插值函数和/或旋转插值函数的参数值，即确定translate函数、rotate函数和/或blur函数的参数值。
例如，基于CSS3实现的渲染器接收到初始化指令后，在目标元素为图片元素的情况下，根据图片元素为各图层创建图片元素节点，并根据各图层中初始状态初始化图片元素节点。之后，设置基于CSS3实现的渲染器中一些函数的参数值。首先根据图层一中图片的宽高和初始缩放计算出展示时图片的宽高，如图片长为50厘米，宽为30厘米，初始缩放为0.5，则缩放后图片长25厘米，宽为15厘米。并结合计算出图层一的尺寸，图层二的尺寸计算方法一样。根据初始缩放、初始位置、初始旋转和/或初始模糊确定缩放插值函数、位置插值函数、旋转插值函数和/或旋转插值函数的参数值。
在本申请中，生成多图层动画还可以通过基于WebGL实现的渲染器进行渲染图层来实现。与基于CSS3实现的渲染器不同的是，基于WebGL实现的渲染器在所述将各图层初始配置数据中的文件资源全部加载为目标元素之后，需要根据所述目标元素生成对应的贴图。所述贴图为WebGLTexture，是基于WebGL实现的渲染器进行渲染时的一种专用形式的图。然后再根据所述初始化指令，通过所述各图层初始配置数据对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示，具体实现过程包括：
根据各图层初始数据配置中的初始状态初始化渲染各图层所需要的模型顶点数据，确定所述模型顶点数据的读取格式；
初始化渲染器，并将所述贴图输入至所述渲染器；
根据所述各图层初始配置数据设置渲染器，通过所述渲染器对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。
基于WebGL实现的渲染器根据各图层对应的初始状态对渲染各图层所需要的模型顶点数据进行初始化，同时声明GPU中顶点数据的读取格式，即确定所述模型顶点数据的读取格式。然后初始化基于WebGL实现的渲染器中用于渲染图层的着色器，并将生成的贴图传递给渲染器中的着色器。着色器根据各图层初始配置数据中的初始状态执行WebGL绘制函数drawArrays使用着色器进行渲染各图层生成初始动画，并将结果输出在<canvas>元素上，也即展示初始动画。在解析所述配置数据之前，还需要初始化<canvas>元素，获取其WebGL上下文，设置WebGL视口、图片翻转，启用深度测试和混入功能。在着色器渲染各图层之后，然后使用WebGL的深度测试和混入功能处理遮挡和透明效果，输出最终渲染结果，即初始动画。如此，可以通过WebGL技术快速生成初始动画，提高渲染效率。
以单个图层为例，根据该图层中的初始位置、初始旋转、初始缩放以及初始模糊来确定图层的位置、大小、旋转角度和模糊程度，在此基础上，由于图层为矩形，有四个顶点，可以确定图层四个顶点的位置等，即初始化渲染各图层所需要的模型顶点数据，并且需要确定所述模型顶点数据的读取格式，有利于后续需要时读取顺利。
本申请中，通过对交互事件进行检测，便于对用户的输入进行及时响应并及时变更动画，提高用户体验性。
步骤104：在监测到交互事件的情况下，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息。
具体的，所述各图层为组成多图层动画的每个图层。在检测到交互事件时，响应多图层动画展示请求从而对交互事件的位置信息进行处理，即根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息。这样可以确定位置信息对于各图层的偏移程度，即偏移信息。确定位置信息与各图层的偏移程度，有利于确定各图层分别对于位置信息的变化，这样从各图层的变化展示目标动画，会使目标动画更加协调、生动。
实际应用中，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息的具体过程可以为：根据多图层动画展示请求解析所述位置信息，通过预先设置的最大偏移量计算所述位置信息的解析结果相对于多图层动画中的各图层中心的偏移信息。
需要说明的是，所述位置信息可以是鼠标位置移动的距离、鼠标点击的位置或者对于触摸屏手指在多图层动画上移动的距离等。先对位置信息进行解析，可以通过位置信息的解析结果和最大偏移量计算当前偏移程度，即通过预先设置的最大偏移量计算所述位置信息的解析结果相对于多图层动画中的各图层中心的偏移信息。
例如，用户通过鼠标在多图层动画上滑动，鼠标的滑动会产生一个位置信息和多图层动画展示请求，对鼠标滑动的位置信息进行解析，再根据每个图层的最大偏移量确定相对于各图层的偏移程度，即相对于多图层动画中的各图层中心的偏移信息。
本申请中，通过对交互事件中的位置信息进行解析，确定偏移信息，为后续基于交互事件生成多图层动画做好了准备基础。
步骤106：根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性。
具体的，所述图层显示属性是指对应交互事件位置信息的各图层的图层显示属性，即与偏移信息对应的各图层的图层显示属性。在根据多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息的基础上，进一步的，根据配置数据计算与各图层中心的偏移信息对应的图层显示属性。各图层的图层显示属性是确定各图层渲染效果的重要因素，确定与各图层中心的偏移信息对应的图层显示属性为后续渲染各图层做好了基础工作。
在实际应用中，计算所述各图层中心的偏移信息对应的图层显示属性时，需要根据配置数据中各图层的偏移曲线和偏移状态两个属性，即根据配置数据中各图层的偏移曲线和偏移量计算与所述各图层中心的偏移信息对应的图层显示属性。所述偏移曲线表征的是偏移信息与偏移量之间的映射关系，即表征交互事件的位置信息与偏移量之间的映射关系。这样可以统一偏移信息对各图层图层显示属性影响的标准，使同样的偏移信息对于各图层来说产生的影响相同，避免了最终生成的动画在同样操作的情况下不一致的问题。
需要说明的是，计算与所述各图层中心的偏移信息对应的图层显示属性时，可以是位置图层显示属性、缩放图层显示属性、旋转图层显示属性、模糊图层显示属性中的任意一种属性，也可以是其中的几种，需要根据各图层的偏移曲线和偏移量来确定。例如，图层一的偏移曲线只有位置偏移曲线一个属性，对应的，图层一的偏移量也只有位置偏移量一个属性，因此，对于图层一来说，只能计算位置图层显示属性。
实际应用中，以图层A为例，图层A的偏移曲线这一属性设置了位置偏移曲线、缩放偏移曲线、旋转偏移曲线以及模糊偏移曲线，而图层A的偏移状态这一属性设置了位置偏移量、缩放偏移量、旋转偏移量以及模糊偏移量，此时在计算图层显示属性时：根据位置偏移曲线和位置偏移量计算位置图层显示属性；根据缩放偏移曲线和缩放偏移量计算缩放图层显示属性；根据旋转偏移曲线和旋转偏移量计算旋转图层显示属性；根据模糊偏移曲线和模糊偏移量计算模糊图层显示属性。
本申请中在确定各图层中心的偏移信息之后，可以根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性，从而有利于后续根据图层显示属性对各图层进行渲染，进一步为生成目标动画做好了准备基础。
步骤108：根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画并展示。
具体的，在确定与所述各图层中心的偏移信息对应的图层显示属性的基础上，进一步地，根据获得的图层显示属性进行渲染。需要说明的是，渲染时根据各图层对应的图层显示属性分别渲染各图层，目标动画不是直接渲染得到的，而是通过逐个渲染各图层，根据渲染后的各图层混合效果，得到最终的目标动画，这样生成的目标动画层次感更明显。
例如，有两个图层：图层一和图层二，根据图层一的图层显示属性渲染图层一，根据图层二的图层显示属性渲染图层二，将渲染后的图层一和图层二进行叠加、混合渲染效果，生成目标动画。
另外，在实际应用中的交互事件可能是连续变化的，此时会导致交互事件的位置信息也跟着连续变化，对于这种情况，可以按照时间阈值将位置信息进行分割，在对其进行处理，具体实现过程可以为：
当所述交互事件的位置信息连续变化时，将所述位置信息按照时间阈值划分为至少两个子位置信息；
根据所述多图层动画展示请求计算至少两个子位置信息相对于交互事件的初始位置的至少两个偏移信息，其中，每个子位置信息对应一个偏移信息；
根据预先保存的配置数据计算与所述至少两个偏移信息对应的至少两个图层显示属性，其中，每个偏移信息对应一个图层显示属性；
根据所述至少两个图层显示属性对各图层进行渲染，将渲染后的各图层叠加生成至少两个目标动画并展示。
具体的，所述初始位置是指鼠标进入多图层动画时的位置。所述时间阈值可以是事先设定好的，可以根据系统性能进行调试，若时间阈值越小，划分的子位置信息越多，生成的目标动画越多，展示过程会更连贯，效果更好，但数据处理量会增多，后台压力较大；若时间阈值越大，划分的子位置信息越少，数据处理量少，后台压力较小，但生成的目标动画展示效果较差。可以均衡两者，调整时间阈值。在将位置信息划分为至少两个子位置信息后，分别计算每一个子位置信息相对于交互事件的初始位置的偏移信息。在此基础上，通过配置数据分别计算每一个偏移信息对应的图层显示属性。最后分别根据每一个图层显示属性对各图层进行渲染生成对应的目标动画，其中一个图层显示属性对应一个目标动画。
例如，用户在多图层动画上先往左滑动鼠标在往右滑动鼠标，致使位置信息连续变化。此时，根据时间域值将位置信息划分为两个子位置信息，其中，子位置信息一对应鼠标左滑，子位置信息二对应鼠标右滑。根据子位置信息一计算对应初始位置的偏移信息一，根据子位置信息二计算对应初始位置的偏移信息二。之后基于偏移信息一和偏移信息二分别得到图层显示属性一和图层显示属性二。根据图层显示属性一对各图层进行渲染，生成鼠标往左滑对应的目标动画展示；根据图层显示属性二对各图层进行渲染，生成鼠标往右滑对应的目标动画展示。
本申请提供的多图层动画展示方法，对交互事件进行监测，所述交互事件中携带有交互事件的位置信息和多图层动画展示请求；在监测到交互事件的情况下，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画并展示。所述多图层动画展示方法通过对交互事件进行监测，可以实时地监测到用户与多图层动画之间的交互，根据配置数据和用户交互即可对多图层动画进行操作，使多图层动画在数据配置的基础上能够根据用户交互进行变换，不仅简化了多图层动画的制作和实现流程，还提高了用户对展示多图层动画的页面或者应用程序的体验性。
下述结合附图3，以本申请提供的多图层动画展示方法在浏览器中的应用为例，对所述多图层动画展示方法进行进一步说明。其中，图3示出了本申请一实施例提供的一种应用于浏览器的多图层动画展示方法的处理流程图，具体包括以下步骤：
步骤302：设计终端通过配置和预览工具接收配置数据。
设计终端为设计师提供配置和预览工具，设计师根据所需要的动画效果在设计终端通过配置和预览工具进行设置配置数据，从而使设计终端通过配置和预览工具接收配置数据。
步骤304：设计终端保存配置数据并设置读写服务。
设计终端对接收到的配置数据进行保存，并为配置数据设置读写服务。之后将配置数据上传给服务器，以便于浏览器在响应用户需求展示多图层动画时能够顺利读取配置数据。
步骤306：浏览器接收初始化指令。
当用户在客户端打开浏览器并访问含有多图层动画的页面时，会给浏览器发送初始化指令，从而使浏览器接收并响应初始化指令。
步骤308：浏览器获取配置数据。
浏览器根据页面访问请求，通过异步请求从服务器获取已保存的配置数据，其中，异步请求是指CPU的分时处理。
步骤310：浏览器初始化渲染器。
浏览器启动渲染各图层所需的渲染器并初始化。
步骤312：浏览器解析配置数据，并加载图片资源。
浏览器解析配置数据，根据配置数据中的图片配置将资源文件加载图片资源。
步骤314：浏览器设置渲染器
浏览器根据数据配置中的初始状态下的初始位置、初始缩放、初始旋转、初始模糊设置渲染器。
步骤316：浏览器通过渲染器渲染各图层生成初始动画并展示。
浏览器通过设置完成的渲染器对各图层进行渲染，并将渲染后的各图层进行叠加，生成初始动画并展示。
步骤318：浏览器监测到交互事件。
当检测到用户通过鼠标在多图层动画上滑动时，浏览器会监测到有交互事件发生。
步骤320：浏览器计算图层显示属性。
浏览器根据交互事件中多图层动画展示请求计算鼠标位置信息相对于多图层动画中的各图层中心的偏移信息。
步骤322：浏览器计算图层显示属性。
浏览器根据配置数据计算与所述各图层中心的偏移信息对应的图层显示属性。
步骤324：浏览器根据图层显示属性渲染各图层。
浏览器通过渲染器根据对应于偏移信息的各图层的图层显示属性去渲染各图层。
步骤326：浏览器混合各图层生成目标动画并展示。
浏览器将渲染后的各图层进行叠加、混和，最终生成目标动画并展示。
本申请提供的多图层动画展示方法，设计终端通过配置和预览工具接收配置数据；设计终端保存配置数据并设置读写服务；浏览器接收初始化指令；浏览器获取配置数据；浏览器初始化渲染器；浏览器解析配置数据，并加载图片资源；浏览器设置渲染器；浏览器通过渲染器渲染各图层生成初始动画并展示；浏览器监测到交互事件；浏览器计算图层显示属性；浏览器计算图层显示属性；浏览器根据图层显示属性渲染各图层；浏览器混合各图层生成目标动画并展示。所述多图层动画展示方法通过对交互事件进行监测，可以实时地监测到用户与多图层动画之间的交互，根据配置数据和用户交互即可对多图层动画进行操作，使多图层动画在数据配置的基础上能够根据用户交互进行变换，不仅简化了多图层动画的制作和实现流程，还提高了用户对展示多图层动画的页面或者应用程序的体验性。
与上述方法实施例相对应，本申请还提供了多图层动画展示装置实施例，图4示出了本申请一实施例提供的一种多图层动画展示装置的结构示意图。如图4所示，该装置包括：
监测模块402，被配置为对交互事件进行监测，所述交互事件中携带有交互事件的位置信息和多图层动画展示请求；
第一处理模块404，被配置为在监测到交互事件的情况下，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；
第二处理模块406，被配置为根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；
展示模块408，被配置为根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画并展示。
在本实施例的一个或多个实施方式中，所述第一处理模块404，还被配置为根据多图层动画展示请求解析所述位置信息，通过预先设置的最大偏移量计算所述位置信息的解析结果相对于多图层动画中的各图层中心的偏移信息。
在本实施例的一个或多个实施方式中，所述第二处理模块406，还被配置为根据配置数据中各图层的偏移曲线和偏移量计算与所述各图层中心的偏移信息对应的图层显示属性。
在本实施例的一个或多个实施方式中，所述装置还包括：
初始化模块，接收初始化指令，根据所述初始化指令获取各图层初始配置数据并保存；
解析模块，被配置为解析所述各图层初始配置数据，加载所述各图层初始配置数据中包含的文件资源，其中，所述文件资源包括视频和/或图片；
展示模块408，还被配置为根据所述初始化指令，通过各图层初始配置数据对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。
在本实施例的一个或多个实施方式中，所述解析模块，还被配置为解析所述各图层初始配置数据，将各图层初始配置数据中的文件资源加载为目标元素，其中，所述目标元素包括图片元素和/或视频元素。
在本实施例的一个或多个实施方式中，所述解析模块，还被配置为根据所述初始化指令，为各图层创建目标元素节点，通过所述各图层初始配置数据中的初始状态初始化各图层目标元素节点；根据初始化后的各图层目标元素节点对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。
在本实施例的一个或多个实施方式中，所述初始化模块，还被配置为根据各图层初始配置数据中初始状态下的初始缩放和目标元素的尺寸计算各图层的宽度和高度，并确定缩放插值函数的参数值，根据各图层初始配置数据中初始状态下的初始位置确定位置插值函数的参数值，根据各图层初始配置数据中初始状态下的初始旋转确定旋转插值函数的参数值，和/或根据各图层初始配置数据中初始状态下的初始模糊确定模糊插值函数的参数值。
在本实施例的一个或多个实施方式中，所述解析模块，还被配置为默认所述各图层为居中显示。
在本实施例的一个或多个实施方式中，所述解析模块，还被配置为根据所述目标元素生成对应的贴图。
在本实施例的一个或多个实施方式中，所述展示模块408，还被配置为根据各图层初始数据配置中的初始状态初始化渲染各图层所需要的模型顶点数据，确定所述模型顶点数据的读取格式，初始化渲染器，并将所述贴图输入至所述渲染器，根据所述各图层初始配置数据设置渲染器，通过所述渲染器对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。
在本实施例的一个或多个实施方式中，所述第一处理模块404，还被配置为当所述交互事件的位置信息连续变化时，将所述位置信息按照时间阈值划分为至少两个子位置信息，根据所述多图层动画展示请求计算至少两个子位置信息相对于交互事件的初始位置的至少两个偏移信息，其中，每个子位置信息对应一个偏移信息；
第二处理模块406，还被配置为根据预先保存的配置数据计算与所述各图层中心的至少两个偏移信息对应的至少两个图层显示属性，其中，每个偏移信息对应一个图层显示属性；
展示模块408，还被配置为根据所述至少两个图层显示属性对各图层进行渲染，将渲染后的各图层叠加生成至少两个目标动画并展示。
在本实施例的一个或多个实施方式中，所述第二处理模块406，还被配置为所述配置数据包括图层数组，所述图层数组中的每个元素代表一个图层，每个图层的属性包括图片配置/视频配置、初始状态、偏移状态、以及偏移曲线。
本申请提供的多图层动画展示装置，监测模块，被配置为对交互事件进行监测，所述交互事件中携带有交互事件的位置信息和多图层动画展示请求；第一处理模块，被配置为在监测到交互事件的情况下，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；第二处理模块，被配置为根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；展示模块，被配置为根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画并展示。所述多图层动画展示装置通过对交互事件进行监测，可以实时地监测到用户与多图层动画之间的交互，根据配置数据和用户交互即可对多图层动画进行操作，使多图层动画在数据配置的基础上能够根据用户交互进行变换，不仅简化了多图层动画的制作和实现流程，还提高了用户对展示多图层动画的页面或者应用程序的体验性。
上述为本实施例的一种多图层动画展示装置的示意性方案。需要说明的是，该多图层动画展示装置的技术方案与上述的多图层动画展示方法的技术方案属于同一构思，多图层动画展示装置的技术方案未详细描述的细节内容，均可以参见上述多图层动画展示方法的技术方案的描述。
图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 (15)

1.一种多图层动画展示方法，其特征在于，包括：
对交互事件进行监测，所述交互事件中携带有交互事件的位置信息和多图层动画展示请求；
在监测到交互事件的情况下，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；
根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；
根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画并展示。
2.根据权利要求1所述的方法，其特征在于，所述根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息，包括：
根据多图层动画展示请求解析所述位置信息，通过预先设置的最大偏移量计算所述位置信息的解析结果相对于多图层动画中的各图层中心的偏移信息。
3.根据权利要求1所述的方法，其特征在于，所述根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性，包括：
根据配置数据中各图层的偏移曲线和偏移量计算与所述各图层中心的偏移信息对应的图层显示属性。
4.根据权利要求1所述的方法，其特征在于，在对交互事件进行监测之前，还包括：
接收初始化指令，根据所述初始化指令获取各图层初始配置数据并保存；
解析所述各图层初始配置数据，加载所述各图层初始配置数据中包含的文件资源，其中，所述文件资源包括视频和/或图片；
根据所述初始化指令，通过各图层初始配置数据对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。
5.根据权利要求4所述的方法，其特征在于，解析所述各图层初始配置数据，加载所述各图层初始配置数据中包含的文件资源，包括：
解析所述各图层初始配置数据，将各图层初始配置数据中的文件资源加载为目标元素，其中，所述目标元素包括图片元素和/或视频元素。
6.根据权利要求4所述的方法，其特征在于，根据所述初始化指令，通过各图层初始配置数据对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示，包括：
根据所述初始化指令，为各图层创建目标元素节点；
通过所述各图层初始配置数据中的初始状态初始化各图层目标元素节点；
根据初始化后的各图层目标元素节点对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。
7.根据权利要求6所述的方法，其特征在于，在通过所述各图层初始配置数据中的初始状态初始化各图层目标元素节点之后，还包括：
根据各图层初始配置数据中初始状态下的初始缩放和目标元素的尺寸计算各图层的宽度和高度，并确定缩放插值函数的参数值；
根据各图层初始配置数据中初始状态下的初始位置确定位置插值函数的参数值；
根据各图层初始配置数据中初始状态下的初始旋转确定旋转插值函数的参数值；和/或
根据各图层初始配置数据中初始状态下的初始模糊确定模糊插值函数的参数值。
8.根据权利要求7所述的方法，其特征在于，所述各图层默认为居中显示。
9.根据权利要求5所述的方法，其特征在于，在将各图层初始配置数据中的文件资源加载为目标元素之后，还包括：
根据所述目标元素生成对应的贴图。
10.根据权利要求9所述的方法，其特征在于，根据所述初始化指令，通过各图层初始配置数据对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示，包括：
根据各图层初始数据配置中的初始状态初始化渲染各图层所需要的模型顶点数据，确定所述模型顶点数据的读取格式；
初始化渲染器，并将所述贴图输入至所述渲染器；
根据所述各图层初始配置数据设置渲染器，通过所述渲染器对各图层进行渲染，将渲染后的各图层叠加生成初始动画并展示。
11.根据权利要求1所述的方法，其特征在于，所述方法还包括：
当所述交互事件的位置信息连续变化时，将所述位置信息按照时间阈值划分为至少两个子位置信息；
根据所述多图层动画展示请求计算至少两个子位置信息相对于交互事件的初始位置的至少两个偏移信息，其中，每个子位置信息对应一个偏移信息；
根据预先保存的配置数据计算与所述至少两个偏移信息对应的至少两个图层显示属性，其中，每个偏移信息对应一个图层显示属性；
根据所述至少两个图层显示属性对各图层进行渲染，将渲染后的各图层叠加生成至少两个目标动画并展示。
12.根据权利要求1所述的方法，其特征在于，所述配置数据包括图层数组，所述图层数组中的每个元素代表一个图层，每个图层的属性包括图片配置/视频配置、初始状态、偏移状态、以及偏移曲线。
13.一种多图层动画展示装置，其特征在于，包括：
监测模块，被配置为对交互事件进行监测，所述交互事件中携带有交互事件的位置信息和多图层动画展示请求；
第一处理模块，被配置为在监测到交互事件的情况下，根据所述多图层动画展示请求计算所述位置信息相对于多图层动画中的各图层中心的偏移信息；
第二处理模块，被配置为根据预先保存的配置数据计算与所述各图层中心的偏移信息对应的图层显示属性；
展示模块，被配置为根据所述图层显示属性对各图层进行渲染，并将渲染后的各图层叠加生成目标动画并展示。
14.一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令，其特征在于，所述处理器执行所述计算机指令时实现权利要求1-12任意一项所述方法的步骤。
15.一种计算机可读存储介质，其存储有计算机指令，其特征在于，该计算机指令被处理器执行时实现权利要求1-12任意一项所述方法的步骤。
CN202110200640.7A 2021-02-23 2021-02-23 多图层动画展示方法及装置 Active CN112882638B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110200640.7A CN112882638B (zh) 2021-02-23 2021-02-23 多图层动画展示方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110200640.7A CN112882638B (zh) 2021-02-23 2021-02-23 多图层动画展示方法及装置

Publications (2)

Publication Number Publication Date
CN112882638A true CN112882638A (zh) 2021-06-01
CN112882638B CN112882638B (zh) 2022-08-26

Family

ID=76053777

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110200640.7A Active CN112882638B (zh) 2021-02-23 2021-02-23 多图层动画展示方法及装置

Country Status (1)

Country Link
CN (1) CN112882638B (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113628306A (zh) * 2021-08-11 2021-11-09 广州虎牙科技有限公司 文本显示方法、装置、电子设备及可读存储介质
CN114820895A (zh) * 2022-03-11 2022-07-29 支付宝(杭州)信息技术有限公司 动画数据处理方法、装置、设备及系统
CN117251231A (zh) * 2023-11-17 2023-12-19 浙江口碑网络技术有限公司 一种动画资源处理方法、装置、系统及电子设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107038735A (zh) * 2017-03-31 2017-08-11 武汉斗鱼网络科技有限公司 一种实现实体打开动画的方法及系统
CN107340964A (zh) * 2017-06-02 2017-11-10 武汉斗鱼网络科技有限公司 一种视图的动画效果实现方法及装置
CN110047120A (zh) * 2019-03-27 2019-07-23 腾讯科技（深圳）有限公司 一种动画展示方法及装置
CN111309897A (zh) * 2020-02-27 2020-06-19 中诚信征信有限公司 一种大数据知识图谱可视化方法及装置
CN111443914A (zh) * 2020-03-30 2020-07-24 北京字节跳动网络技术有限公司 动画展示方法以及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107038735A (zh) * 2017-03-31 2017-08-11 武汉斗鱼网络科技有限公司 一种实现实体打开动画的方法及系统
CN107340964A (zh) * 2017-06-02 2017-11-10 武汉斗鱼网络科技有限公司 一种视图的动画效果实现方法及装置
CN110047120A (zh) * 2019-03-27 2019-07-23 腾讯科技（深圳）有限公司 一种动画展示方法及装置
CN111309897A (zh) * 2020-02-27 2020-06-19 中诚信征信有限公司 一种大数据知识图谱可视化方法及装置
CN111443914A (zh) * 2020-03-30 2020-07-24 北京字节跳动网络技术有限公司 动画展示方法以及装置

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113628306A (zh) * 2021-08-11 2021-11-09 广州虎牙科技有限公司 文本显示方法、装置、电子设备及可读存储介质
CN114820895A (zh) * 2022-03-11 2022-07-29 支付宝(杭州)信息技术有限公司 动画数据处理方法、装置、设备及系统
CN117251231A (zh) * 2023-11-17 2023-12-19 浙江口碑网络技术有限公司 一种动画资源处理方法、装置、系统及电子设备
CN117251231B (zh) * 2023-11-17 2024-02-23 浙江口碑网络技术有限公司 一种动画资源处理方法、装置、系统及电子设备

Also Published As

Publication number Publication date
CN112882638B (zh) 2022-08-26

Similar Documents

Publication Publication Date Title
CN112882638B (zh) 多图层动画展示方法及装置
CN112882637B (zh) 多图层动画展示的交互方法及浏览器
CN110235181B (zh) 用于生成跨浏览器兼容动画的系统和方法
Rivi et al. In-situ visualization: State-of-the-art and some use cases
JP2024505995A (ja) 特殊効果展示方法、装置、機器および媒体
CN108959392B (zh) 在3d模型上展示富文本的方法、装置及设备
CN111459501B (zh) 基于SVG的Web组态画面存储与展示系统和方法及介质
Butcher et al. Building immersive data visualizations for the web
CN110570501A (zh) 一种线条动画绘制方法及其设备、存储介质、电子设备
Schwab et al. Scalable scalable vector graphics: Automatic translation of interactive svgs to a multithread vdom for fast rendering
CN115170709A (zh) 动态图像的编辑方法、装置和电子设备
KR20130043241A (ko) 그래픽 이미지들의 시각적 창작 동안의 성능 분석
CN113326043B (zh) 网页渲染方法、网页制作方法及网页渲染系统
Levkowitz et al. Cloud and mobile web-based graphics and visualization
Montag et al. CindyGL: authoring GPU-based interactive mathematical content
Huang et al. Environmental simulation within a virtual environment
Letić et al. Real-time map projection in virtual reality using WebVR
KR20240055025A (ko) 실용 3d 에셋을 위한 추론된 골격 구조
CN110990104B (zh) 一种基于Unity3D的纹理渲染方法及装置
JP2024506879A (ja) 仮想表現を提示するための方法及び装置、コンピュータ機器及び記憶媒体
CN114452646A (zh) 虚拟对象透视处理方法、装置及计算机设备
CN112418902A (zh) 基于网页的多媒体合成方法和系统
CN112330772A (zh) 雷达图生成方法、装置、设备及存储介质
US11907646B1 (en) HTML element based rendering supporting interactive objects
Stirbu et al. Experiences building a multi-display mobile application for exploring mirror worlds

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