CN113744377A - 一种动画处理系统、方法、装置、设备及介质 - Google Patents
一种动画处理系统、方法、装置、设备及介质 Download PDFInfo
- Publication number
- CN113744377A CN113744377A CN202010461667.7A CN202010461667A CN113744377A CN 113744377 A CN113744377 A CN 113744377A CN 202010461667 A CN202010461667 A CN 202010461667A CN 113744377 A CN113744377 A CN 113744377A
- Authority
- CN
- China
- Prior art keywords
- animation
- scene
- elements
- information
- target
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000012545 processing Methods 0.000 title claims abstract description 239
- 238000000034 method Methods 0.000 title claims abstract description 34
- 238000009877 rendering Methods 0.000 claims abstract description 132
- 230000000694 effects Effects 0.000 claims description 92
- 230000006378 damage Effects 0.000 claims description 70
- 230000007246 mechanism Effects 0.000 claims description 33
- 238000003672 processing method Methods 0.000 claims description 6
- 238000004590 computer program Methods 0.000 claims description 4
- 238000009434 installation Methods 0.000 claims description 2
- 230000004044 response Effects 0.000 claims description 2
- 230000015654 memory Effects 0.000 description 10
- 230000008569 process Effects 0.000 description 10
- 238000010586 diagram Methods 0.000 description 8
- 102100039718 Gamma-secretase-activating protein Human genes 0.000 description 6
- 101710184700 Gamma-secretase-activating protein Proteins 0.000 description 6
- 230000009471 action Effects 0.000 description 6
- 238000011161 development Methods 0.000 description 4
- 230000008034 disappearance Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 230000007704 transition Effects 0.000 description 4
- 210000004556 brain Anatomy 0.000 description 3
- 230000008859 change Effects 0.000 description 3
- 230000005669 field effect Effects 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 239000002245 particle Substances 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000001133 acceleration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 239000008358 core component Substances 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000006073 displacement reaction Methods 0.000 description 1
- 239000004744 fabric Substances 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000005259 measurement Methods 0.000 description 1
- 210000005036 nerve Anatomy 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000002688 persistence Effects 0.000 description 1
- 238000003825 pressing Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000009897 systematic effect Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
本申请实施例公开了一种动画处理系统、方法、装置、设备及介质，其中，系统包括：配置管理模块和动画处理模块，该配置管理模块，用于生成并管理目标动画的配置信息，动画处理模块，用于按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。本申请实施例提出的动画处理系统，提供了对于目标动画的配置能力，利用该系统可以通过配置的方式实现目标动画的绘制，有利于提高目标动画的绘制效率。
Description
技术领域
本申请涉及互联网技术领域，具体涉及计算机技术领域，尤其涉及一种动画处理系统、一种动画处理方法、一种动画处理装置、一种动画处理设备及一种计算机存储介质。
背景技术
随着互联网技术的飞速发展，由于动画具有很丰富的特效及展示效果，因此应用越来越广泛，被应用到各个互联网使用场景中，在各类应用程序中都占有重要地位。
目前基于H5(Hyper Text Markup Language 5，第五代超文本标记语言)页面的动画实现，主要采用以下几种形式：1.利用视频播放来实现动画的场景，将动画处理成可播放的视频效果，进而在合适的时间进行播放交互；2.通过代码开发的形式进行动画绘制，例如通过css3、js一点点实现动画效果。可见，上述两种动画的实现方式均比较复杂，动画的绘制效率低下。
发明内容
本申请实施例提供了一种动画处理系统、方法、装置、设备及介质，可以基于配置的方式实现目标动画的绘制，有利于提高目标动画的绘制效率。
一方面，本申请实施例提供了一种动画处理系统，该系统包括配置管理模块和动画处理模块，其中，
配置管理模块，用于生成并管理目标动画的配置信息，目标动画的配置信息包括：动画场景的配置信息及动画场景所需的动画元素的配置信息。
动画处理模块，用于按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。
另一方面，本申请实施例提供了一种动画处理方法，该方法应用于动画处理设备，该动画处理设备搭载有动画处理系统，该动画处理系统包括配置管理模块和动画处理模块，该方法包括：
通过动画处理系统对目标动画所需的动画场景和动画场景所需的动画元素进行配置，生成目标动画的配置信息，该目标动画的配置信息包括：动画场景的配置信息及动画场景所需的动画元素的配置信息；
按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。
再一方面，本申请实施例提供了一种动画处理装置，该装置配置于动画处理设备，该动画处理设备搭载有动画处理系统，该动画处理系统包括配置管理模块和动画处理模块，该装置包括：
配置单元，用于通过动画处理系统对目标动画所需的动画场景和动画场景所需的动画元素进行配置，生成目标动画的配置信息，该目标动画的配置信息包括：动画场景的配置信息及动画场景所需的动画元素的配置信息；
动画处理单元，用于按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。
相应地，本申请实施例还提供了一种动画处理设备，该动画处理设备搭载有上述动画处理系统，该搭载方式包括以下任一种或者多种：安装有动画处理系统对应的插件、封装有动画处理系统、搭载有调用动画处理系统的接口和运行有动画处理系统对应的动画处理平台。该动画处理设备包括处理器和存储装置；存储装置，用于存储程序指令；处理器，调用程序指令，用于执行如下步骤：
通过动画处理系统对目标动画所需的动画场景和动画场景所需的动画元素进行配置，生成目标动画的配置信息，目标动画的配置信息包括：动画场景的配置信息及动画场景所需的动画元素的配置信息；
动画处理单元，用于按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。
相应地，本申请实施例还提供了一种计算机存储介质，该计算机存储介质中存储有程序指令，该程序指令被执行时，用于实现上述的各方法。
本申请实施例中的动画处理设备可通过动画处理系统对目标动画所需的动画场景和动画场景所需的动画元素进行配置，生成目标动画的配置信息，并按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。可以基于配置的方式实现目标动画的绘制，有利于提高目标动画的绘制效率。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例的一种动画处理系统的结构示意图；
图2a是本申请实施例的另一种动画处理系统的结构示意图；
图2b是本申请实施例的一种配置管理模块的结构示意图；
图3是本申请实施例的一种动画处理方法的流程示意图；
图4是本申请实施例的一种动画处理页面的示意图；
图5a～图5c是本申请实施例的一种动画处理的场景示意图；
图6是本申请实施例提供的一种动画处理装置的结构示意图；
图7是本申请实施例提供的一种动画处理设备的结构示意图。
具体实施方式
动画是通过一幅幅静止的，内容不同的画面(即帧)快速播放使人们在视觉上产生运动的感觉。这是利用了人类眼睛的视觉暂留原理，利用人的这种生理特性可绘制出具有高度想象力和表现力的动画影片。其原理为：人们在看画面时，画面会在大脑视觉神经中停留大约1/24秒，如果每秒更替24个画面或更多，那么前一个画面还没在人脑中消失之前，下一个画面进入人脑，人们就会觉得画面动起来了，它的基本原理与电影、电视一样，都是视觉原理。
其中，帧就是影像动画中最小单位的单幅影像画面。一帧就是一副静止的画面，连续的帧就形成动画，在1秒内，应用程序一般可以绘制多帧，例如通常为10-80帧。绘制的帧相同，就是一张静态图片，绘制的帧不同，就是动画。
目前，基于H5页面的动画实现包括利用视频播放和代码开发这两种实现方式，其中，利用视频播放来实现动画的方式适合交互较少，转场简单的动画类型。除此之外，上述两种动画的实现方式均比较复杂，动画的绘制效率低下，且对于不同动画的实现，上述两种动画实现方式均需重新重复执行相同的复杂绘制流程(如重新开发代码、重新绘制新的视频等等)，通用性较差，无法实现体系化工程化的动画绘制。
虽然目前可通过Lottie实现体系化工程化的动画绘制，但通过Lottie生成的目标动画可优化维护性较低，且基于Lottie的动画实现方式比较适合单个的动画，而不适合复杂的，流畅完整的，带过场的目标动画(例如，涉及多个游戏场景转换的游戏动画)。其中，Lottie是Airbnb开源的一套跨平台的完整的动画效果解决方案，设计师可以使用AdobeAfter Effects设计出漂亮的动画之后，使用Lottie提供的Bodymovin插件将设计好的动画导出成JSON格式，就可以直接运用在iOS、Android、Web和React Native之上，无需其他额外操作。
基于此，请参见图1，本申请实施例提出了一种可快速绘制目标动画的动画处理系统，该系统包括配置管理模块10和动画处理模块11，其中，配置管理模块10，用于生成并管理目标动画的配置信息，该目标动画的配置信息包括：动画场景的配置信息及动画场景所需的动画元素的配置信息；动画处理模块11，用于按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，从而得到目标动画。该目标动画可以为涉及多个动画场景切换的复杂动画，例如游戏动画，也可以为单个画面(也即涉及一个动画场景)的简单动画。可见，本申请实施例提出的动画处理系统，提供了对于目标动画的配置能力，使得用户在目标动画的绘制过程中，可以更多关注目标动画的相关参数配置，而无需太多关注额外的开发工作逻辑，通用性以及可扩展性更高，有利于提高目标动画的绘制效率。
其中，上述动画处理系统可以搭载于动画处理设备，其具体的搭载方式可以包括以下任一种或者多种：动画处理设备安装有动画处理系统对应的插件、动画处理设备封装有动画处理系统、动画处理设备搭载有调用动画处理系统的接口和运行有动画处理系统对应的动画处理平台。该动画处理设备可以为智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等终端。
可以理解的是，一个目标动画可以包括至少一个动画场景，每个动画场景中包括多个动画元素，该动画元素可以包括图片元素和/或绘制元素(如矢量元素)。其中，上述动画场景所需的动画元素的配置信息可包括动画元素的元素信息和动画元素的动画信息，动画场景的配置信息可包括动画场景和动画元素的对应关系(也即，可以表征各个动画场景需要哪些动画元素)，以及动画场景之间的切换信息。
具体地，上述元素信息可包括图片元素的存储地址和/或绘制元素的参数信息，参数信息包括以下任一种或者多种：绘制元素的元素类型、位置和大小；动画元素的动画信息可用于表征动画元素在对应动画场景中的动画效果，切换动画信息可用于表征动画场景之间切换的过场效果以及切换动画场景时待切换动画场景中动画元素的过场效果。其中，该元素类型例如可以为圆形、矩形、三角形等基础形状，该位置可以为绘制元素在对应动画场景中的位置(例如坐标)，该大小可以为绘制元素的各边尺寸(例如矩形的长和宽的大小)；该存储地址可以为存储图片元素的本地存储地址，也可以为存储图片元素的网络存储地址(例如云存储地址、或者URL(Uniform Resource Locato，统一资源定位符)地址)。
作为一种可行的实施方式，上述配置管理模块10可以包括以下任一种或者多种：资源加载配置模块、绘制元素配置模块、元素动画配置模块和场景动画配置模块，其中，资源加载配置模块，可用于配置目标动画所需动画资源的存储地址，该动画资源包括上述图片元素；绘制元素配置模块，可用于配置绘制元素的上述参数信息；元素动画配置模块，可用于配置动画元素在对应动画场景中的动画效果，并生成表征该动画元素在对应动画场景中的动画效果的动画信息；场景动画配置模块，可用于配置动画场景之间切换的过场效果以及切换动画场景时待切换动画场景中动画元素的过场效果，并生成表征该动画场景之间切换以及切换动画场景时待切换动画场景中动画元素的过场效果的上述切换信息。其中，动画元素在对应动画场景中的动画效果包括单个动画元素的循环动画、多个动画元素按时间线展示的动画等。其中，上述动画场景之间切换的过场效果包括对应动画场景的切入效果和动画场景的切出效果，该切入效果和切出效果可以为按照指定方向的移动、旋转、淡入、淡出等等。
示例性地，假设上述配置管理模块10包括资源加载配置模块、绘制元素配置模块、元素动画配置模块和场景动画配置模块，目标动画包括2个动画场景，分别为动画场景1和动画场景2，动画场景1所需的动画元素为图片元素1，动画场景2所需的动画元素为图片元素2和绘制元素1。用户可通过动画处理设备访问动画处理系统，并配置场景参数，该场景参数包括各个动画场景的出现时间，消失时间以及各个动画场景所需的动画元素，也即配置各个动画场景与动画元素之间的对应关系，该对应关系如表1-1所示。
表1-1
| 动画场景 | 图片元素 | 绘制元素 |
| 动画场景1 | 图片元素1 | 无 |
| 动画场景2 | 图片元素2 | 绘制元素1 |
进一步地，用户可通过资源加载配置模块配置动画场景1所需图片元素1的存储地址为：“https://www.**1”、动画场景2所需图片元素2的存储地址为：“https://www.**2”；通过绘制元素配置动画场景2所需绘制元素1的参数信息；通过元素动画配置模块配置绘制元素1在动画场景2的动画效果为“循环动画”，图片元素1和图片元素2分别在动画场景1和动画场景2中的动画效果均配置为“无”；通过场景动画配置模块，配置动画场景1和动画场景2之间切换的过场效果为：“动画场景1从右往左移出以及动画场景2从右往左移入”，配置切换动画场景时，待切换的动画场景1和动画场景2中动画元素的过场效果为“无”。这种情况下，上述目标动画的配置信息表征的信息可以如表1-1和表1-2所示。
表1-2
在一个实施例中，上述动画处理模块11可以包括动画基础元素模块和动画绘制模块，其中，动画基础元素模块，用于根据动画场景所需的动画元素的元素信息获取动画元素，并基于动画场景和动画元素的对应关系在指定区域中关联存储动画元素与动画场景，在检测到动画处理启动操作时，从指定区域中获取动画场景所需的动画元素，并向动画绘制模块发送携带有动画场景所需的动画元素的绘制指令。动画绘制模块，用于响应该绘制指令对动画场景所需的动画元素进行渲染，得到动画场景对应的动画图像，并基于动画元素的动画信息和动画场景之间的切换信息对动画图像进行动画处理，得到目标动画。其中，该动画处理启动操作可以为用户输入的用于启动动画处理所输入的触发操作，该触发操作的输入方式可以为按压、点击、滑动或者语音等等；该指定区域为开发人员基于实验数据或者实际需求预先设置的存储区域，该存储区域可以指动画处理设备的本地存储区域或者其他存储区域(例如云存储区域、区块链等等)，本申请对此不作具体限定。
上述动画场景的配置信息还可以包括动画场景的出现时间，一个目标动画可以包括多个动画场景，动画基础元素模块在检测到动画处理启动操作时，可按照每个动画场景的出现时间的先后顺序，依序从指定区域中获取每个动画场景所需的动画元素，并向动画绘制模块发送携带有每个动画场景所需的动画元素的绘制指令。进一步地，动画绘制模块，可以响应各个绘制指令在画布中依序渲染每个动画场景所需的动画元素，从而渲染得到每一个动画场景对应的动画图像，也即，完成对每一个动画场景的渲染。
其中，在渲染过程中，可以以每一个动画场景为渲染模块，当渲染完成第一个动画场景后，再通过动画基础元素模块获取第二个动画场景所需的动画元素，并向动画绘制模块发送携带有第二个动画场景所需的动画元素的绘制指令，进一步地，动画绘制模块可以响应该绘制指令，基于第二个动画场景所需的动画元素对第二个动画场景进行渲染，依次类推，直至渲染完成目标动画包括的所有动画场景。
由于渲染得到的每个动画图像中的动画元素不具有动画效果，每个动画图像之间也不具有动画场景之间切换的过场效果。因此，在目标动画的所有动画场景渲染完成之后，动画绘制模块还可以依照上述动画元素的动画信息处理每个动画图像中的动画元素的动画效果，并基于上述动画场景之间的切换信息处理每个动画图像之间切换的过场效果以及动画图像中动画元素的过场效果。
在一个实施例中，上述动画场景所需的动画元素包括图片元素和绘制元素，动画基础元素模块可以包括资源管理模块、封装有多种动画所需的绘制元素的元素管理模块和场景管理模块，该资源管理模块，用于根据图片元素的存储地址获取图片元素，并将图片元素加载到指定区域中；元素管理模块，用于从多种动画所需的绘制元素中获取与上述参数信息匹配的目标绘制元素，并将目标绘制元素加载到指定区域中；场景管理模块用于在指定区域中基于动画场景和动画元素的对应关系将图片元素和上述目标绘制元素分别与动画场景关联。
其中，元素管理模块中预先封装有多种动画所需的绘制元素，包括图片的元素和矢量元素，并封装了多种的元素效果，例如波动效果元素，粒子元素等等。与上述参数信息匹配的目标绘制元素，可以为与绘制元素的元素类型相同的绘制元素。示例性地，假设表1-1中的绘制元素1的元素类型为圆形，那么元素管理模块，可以从多种动画所需的绘制元素中将圆形元素确定为与绘制元素匹配的目标绘制元素，并将该圆形元素加载至指定区域，也即，存储到指定区域。
假设如表1-1所示，目标动画包括2个动画场景，分别为动画场景1和动画场景2，动画场景1所需的动画元素为图片元素1，动画场景2所需的动画元素为图片元素2和绘制元素1。这种情况下，当元素管理模块将与每个绘制元素匹配的目标绘制元素均加载至指定区域后，可以在指定区域中基于动画场景和动画元素的对应关系将图片元素和目标绘制元素分别与动画场景关联，具体关联情况可以为：将图片元素1与动画场景1关联，将图片元素2以及与绘制元素1匹配的目标绘制元素均与动画场景2关联。后续，当需要渲染动画场景1时，可以直接从指定区域中获取与动画场景1关联的图片元素1，当需要渲染动画场景2时，可以直接从指定区域中获取与动画场景2关联的图片元素1以及上述与绘制元素1匹配的目标绘制元素。
在一个实施例中，上述动画绘制模块还可以包括封装有目标渲染引擎的渲染器的渲染模块和封装有目标动画库的动画管理模块，配置管理模块还包括渲染配置模块；其中，渲染配置模块，用于生成渲染器的渲染配置信息，渲染配置信息指示了渲染方式与指定动画处理设备的设备信息的对应关系；渲染模块，用于响应绘制指令检测动画处理系统所运行动画处理设备的设备信息，从渲染配置信息指示的渲染方式与指定动画处理设备的设备信息的对应关系中确定与该动画处理设备的设备信息对应的目标渲染方式，并调用渲染器依照目标渲染方式对动画场景所需的动画元素进行渲染，得到动画场景对应的动画图像；动画管理模块，用于依照动画元素的动画信息处理动画图像中的动画元素的动画效果，并基于动画场景之间的切换信息处理动画图像之间切换的过场效果以及动画图像中动画元素的过场效果。
其中，上述目标渲染引擎可以为2D动画渲染引擎，例如PixiJS、Fabric.js、Paper.js、EaselJS、Collie等；上述目标动画库例如可以为GSAP动画库。其中，PixiJS是一个超快的2D渲染引擎，它自动侦测使用WebGL或者Canvas。开发者无需专门学习WebGL就能感受到强大的硬件加速的力量。PixiJS可以辅助用户用JavaScript或者其他HTML5技术来显示媒体，创建动画或管理交互式图像，从而绘制一个游戏或应用。它拥有语义化的，简洁的API接口并且加入了一些非常有用的特性，比如支持纹理贴图集和为精灵(交互式图像)提供了一个简单的动画系统。它也提供了一个完备的场景图，用户可以在精灵图层里面创建另一个精灵，当然也可以让精灵响应你的鼠标或触摸事件。
在一个实施例中，上述动画场景所需的动画元素包括图片元素和绘制元素，上述配置管理模块还可以包括销毁配置模块，该销毁配置模块，用于配置动画场景所需的动画元素的元素销毁机制，以及动画场景的场景销毁机制，动画场景所需的动画元素的配置信息还包括元素销毁机制，动画场景的配置信息还包括场景销毁机制。其中，每一个动画元素可以对应一个元素销毁机制，每一个元素销毁机制包括元素销毁条件和满足该元素销毁条件时对相应动画元素所需执行的元素销毁动作；每一个动画场景对应一个场景销毁机制，每一个场景销毁机制包括场景销毁条件和满足该场景销毁条件时对相应动画场景所需执行的场景销毁动作。这种情况下，上述资源管理模块，还用于基于元素销毁机制对图片元素进行销毁管理；元素管理模块，还用于基于元素销毁机制对绘制元素进行销毁管理；场景管理模块，还用于基于场景销毁机制对动画场景进行销毁管理。
其中，每一个动画元素对应的元素销毁条件可以为后续动画场景所需的动画元素中不包括该动画元素，也可以理解为后续动画场景无需该动画元素；每一个动画场景对应的场景销毁机制可以为后续动画场景无需该动画场景，也即后续的动画场景为全新动画场景，无需在该动画场景下进行动画元素的叠加。其中，具体的元素销毁机制和场景销毁机制，均可由开发人员基于实验测算数据或者实际需求进行预先配置，本申请对此不作具体限定。
示例性地，参见表1-1，假设目标动画包括2个动画场景，分别为动画场景1和动画场景2，动画场景1所需的动画元素为图片元素1，动画场景2所需的动画元素为图片元素2和绘制元素1。资源管理模块，用于管理图片元素1和图片元素从生成到销毁的整个生命周期，元素管理模块，用于管理绘制元素1从生成到销毁的整个声明周期，场景管理模块，用于管理动画场景1和动画场景2从生成到销毁的整个生命周期。当在画布上渲染完成动画场景1所需的动画元素后，资源管理模块可以检测动画场景2所需的图片元素是否包括图片元素1，若否，则确定动画场景2无需图片元素1，相应可确定图片元素1满足元素销毁条件，资源管理模块可以在当前画布上删除图片元素1(也即，执行元素销毁条件对应的销毁动作)。与之相似的，若场景管理模块检测到动画场景2无需在该动画场景下进行动画元素的叠加，也可以在当前画布上删除动画场景1。采用这样的方式，可以在目标动画的绘制过程中对于需要及时销毁的动画元素及动画场景，进行自动销毁处理，可以在一定程度保证目标动画的性能与流畅度。
在一个实施例中，结合上述2D渲染引擎PixiJS和GSAP动画库，本申请实施例提出了另一种通用可扩展的动画处理系统，其中，PixiJS主要用于支持动画元素的位移和形变，它的核心本质是尽可能快速有效地在屏幕上移动物体，GSAP动画库主要用于提供动画元素的动画支持，PixiJS和GSAP动画库的结合，为实现复杂的目标动画提供了基础的能力保证。请参见图2a，该动画处理系统包括入口、配置管理模块、动画基础元素模块、封装有GSAP动画库的动画管理模块、封装有PixiJS的渲染器的渲染模块。动画基础元素模块包括封装有资源预加载能力的资源管理模块，元素管理模块和场景管理模块。其中，
配置管理模块为动画处理系统的核心组成之一，其为所有的管理模块(资源管理模块，元素管理模块、场景管理模块和动画管理模块)和渲染模块，提供管理设置的能力，使得用户通过设置对应的配置即可。动画处理系统基于针对目标动画的配置信息，即可绘制出对应的目标动画，也即，开发人员利用上述动画处理系统，可通过对目标动画相关参数的配置，实现目标动画的绘制，有利于提高目标动画的绘制效率。
在一个实施例中，参见图2b，上述配置管理模块包括资源加载配置模块、绘制元素配置模块、场景配置模块，元素动画配置模块、场景动画配置模块、渲染配置模块和销毁配置模块。其中，资源加载配置模块，用于配置目标动画所需动画资源的地址。场景配置模块，用于配置目标动画所需动画场景的场景参数，该场景参数包括动画场景的出现时间、动画场景所需挂载的动画元素(即动画场景与动画元素的对应关系)。绘制元素配置模块，用于配置绘制元素的元素类型、位置、大小等等，生成绘制元素的参数信息。元素动画配置模块，用于配置各个动画场景中动画元素自身的动画效果(如循环动画的效果)；场景动画配置模块，用于配置动画场景之间切换的过场效果(如每个新动画场景的进入、老动画场景的消失所涉及的场景变化的动画)，或者还可以配置切换动画场景时待切换动画场景中动画元素的过场效果。渲染配置模块，用于初始化PixiJS的渲染器，生成渲染器的渲染配置信息，该渲染配置信息指示了渲染方式与指定动画处理设备的设备信息的对应关系以及渲染参数，该指定动画处理设备可以为智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等终端，该设备信息包括指定动画处理设备所运行浏览器的版本号、指定动画处理设备的型号(例如手机型号)，该渲染方式可以为WebGL或者Canvas，其中，WebGL对设备性能要求较高，Canvas较为通用；上述渲染参数包括渲染屏幕大小等等。
其中，销毁配置模块，可以用于配置针对目标动画所需动画资源(如音频、图片元素等)、动画场景、动画场景所需动画元素、以及每个动画元素对应动画的销毁机制，后续资源管理模块、元素管理模块、场景管理模块和动画管理模块，可以基于各自的销毁机制，分别对目标动画所需动画资源、动画场景、动画场景所需动画元素、以及每个动画元素对应动画进行销毁管理。采用这样的方式，可以在目标动画的绘制过程中，对于需要及时销毁的动画元素、场景以及动画，进行自动销毁处理，可以在一定程度保证目标动画的性能与流畅度。
本申请实施例中，上述目标动画所需动画资源、动画场景、动画场景所需动画元素、以及每个动画元素对应动画的销毁机制，分别可以称为资源销毁机制、场景销毁机制、动画元素销毁机制和动画元素的动画销毁机制。每一个销毁机制均可以包括销毁对象(如动画资源、动画场景、动画元素等等)、销毁时机、销毁条件和销毁动作，该销毁对象、销毁时机、销毁条件和销毁动作均可由开发人员基于实验测试数据或者实际需求进行预先设置，本申请对此不作具体限定。
示例性地，资源销毁机制、场景销毁机制、动画元素销毁机制和动画元素的动画销毁机制对应的销毁对象、销毁时机、销毁条件和销毁动作例如可如表2所示。
表2
在一个实施例中，上述资源管理模块可包括PixiJS的图片加载模块，音频加载模块、动画资源(如图片和音频等)的引用和动画资源用完的销毁。资源管理模块，可用依照上述资源加载配置模块配置的目标动画所需动画资源的地址，将目标动画所需动画资源提前加载到指定区域中，用于后续目标动画的绘制以及动画资源的使用。
上述元素管理模块，封装有多种动画所需的绘制元素，包括图片元素、矢量元素，并封装了多种的元素效果，比如波动效果元素、粒子元素等等。该元素管理模块，可以用于管理绘制元素从生成到销毁的生命周期，还可以用于依照上述绘制元素配置模块配置的包括元素类型、位置、大小等的参数信息，从自身封装的多种动画所需的绘制元素中获取与该参数信息匹配的目标绘制元素，并将目标绘制元素加载到指定区域中。
上述场景管理模块可以用于管理动画场景从生成到销毁的整个生命周期，还可以用于在指定区域中基于动画场景和动画元素的对应关系将上述资源管理模块预加载的图片元素和上述元素管理模块加载的目标绘制元素，分别与动画场景关联。
上述渲染模块，用于目标动画绘制的最终渲染。具体实现中，渲染模块可以响应针对目标动画的绘制指令，基于上述渲染配置模块配置的渲染配置信息，检测动画处理系统所运行动画处理设备的设备信息，从渲染配置信息指示的渲染方式与指定动画处理设备的设备信息的对应关系中确定与该动画处理设备的设备信息对应的目标渲染方式，后续可以调用渲染器依照目标渲染方式对上述绘制指令携带的动画场景所需的动画元素进行渲染，从而得到动画场景对应的动画图像，也即，完成动画场景的渲染。
上述动画管理模块，封装有GSAP动画库，可以提供单个绘制元素的循环动画，以及多个绘制元素的按时间现展示的动画。它可以基于上述元素动画配置模块和场景动画配置模块分别对于各个动画场景中动画元素自身的动画效果、动画场景之间切换以及切换动画场景时待切换动画场景中动画元素的过场效果的配置，驱动各动画场景中绘制元素动画的进行以及动画场景之间切换动画的进行，还可以管理各个动画的开始与销毁。
示例性地，假设如表1-1所示，目标动画包括2个动画场景，分别为动画场景1和动画场景2，动画场景1和动画场景2所需的开始时间分别为00：00和00：03，动画场景1动画元素为图片元素1，动画场景2所需的动画元素为图片元素2和绘制元素1。用户通过图2a所示的配置管理模块，配置的图片元素1、图片元素2的存储地址，图片元素1、图片元素2和绘制元素1在各自动画场景中的动画效果和过场效果，以及各个动画场景的过场效果如表1-2所示。这种情况下，在通过配置管理模块对目标动画配置完成后，资源管理模块可以预先配置的图片元素1和图片元素2的地址，将图片元素1和图片元素2提前加载到指定区域中，用于后续目标动画的绘制。元素管理模块，可以依照上述绘制元素配置模块配置的绘制元素1的参数信息，从自身封装的多种动画所需的绘制元素中获取与该参数信息匹配的目标绘制元素，并将目标绘制元素加载到指定区域中。场景管理模块可以在指定区域中基于动画场景和动画元素的对应关系将上述预加载的图片元素1、图片元素2，以及该目标绘制元素，分别与动画场景关联，其具体关联情况可以为：将图片元素1与动画场景1关联，将图片元素2以及与绘制元素1匹配的目标绘制元素均与动画场景2关联。
进一步地，用户可以通过上述动画处理系统启动针对目标动画的动画绘制，当动画处理系统检测到用户输入的针对目标动画的动画处理启动操作时，可以触发场景管理模块依照各个动画场景的出现时间的先后顺序，首先从指定区域获取开始时间最早的动画场景1所需的动画元素，也即是从指定区域中获取图片元素1，并向渲染模块发送携带有该图片元素1的绘制指令。进一步地，渲染模块可以响应该绘制指令，基于上述渲染配置模块配置的渲染配置信息，检测动画处理系统所运行动画处理设备的设备信息，从渲染配置信息指示的渲染方式与指定动画处理设备的设备信息的对应关系中确定与该动画处理设备的设备信息对应的目标渲染方式，并可以调用渲染器依照目标渲染方式对上述绘制指令携带的图片元素1进行渲染，从而得到动画场景1对应的动画图像，也即，完成动画场景1的渲染。在检测到动画场景1渲染完整后，场景管理模块可以继续从指定区域获取与动画场景2关联的图片元素和绘制元素，进而调用渲染器采用相似的方式，渲染得到动画场景2对应的动画图像，也即完成动画场景2的渲染。
进一步地，由于渲染得到的每个动画场景对应动画图像中的动画元素不具有动画效果，每个动画图像之间也不具有动画场景之间切换的过场效果。因此，在目标动画的所有动画场景渲染完成之后，可以通过动画管理模块依照表1-2所示的动画效果，将绘制元素1在动画场景2中的动画效果设置为循环动画，动画场景1的过场效果设置为从右往左移出，动画场景2的过场效果设置为从右往左移入，从而完成目标动画的绘制。
基于图1或者图2a所示的动画处理系统，本申请实施例提出了一种动画处理方法，如图3所示，是本申请实施例的一种动画处理方法的流程示意图，本申请实施例的所述方法可以由动画处理设备来执行，该动画处理设备搭载有上述动画处理系统，该动画处理系统包括配置管理模块和动画处理模块。本申请实施例的所述方法包括如下步骤。
S301：通过动画处理系统对目标动画所需的动画场景和动画场景所需的动画元素进行配置，生成目标动画的配置信息，该目标动画的配置信息包括：动画场景的配置信息及动画场景所需的动画元素的配置信息。
S302：按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。
在一个实施例中，动画处理设备搭载有上述动画处理系统，其具体的搭载方式可以包括以下任一种或者多种：动画处理设备安装有动画处理系统对应的插件、动画处理设备封装有动画处理系统、动画处理设备搭载有调用动画处理系统的接口和运行有动画处理系统对应的动画处理平台。用户可以通过动画处理设备访问动画处理系统，并通过动画处理系统针对目标动画所需的动画场景以及动画场景所需的动画元素进行配置，生成动画场景的配置信息及动画场景所需的动画元素的配置信息。
其中，动画场景所需的动画元素的配置信息包括动画元素的元素信息和动画元素的动画信息，动画场景的配置信息包括动画场景和动画元素的对应关系，以及动画场景之间的切换信息。这种情况下，动画处理设备按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画的具体实施方式可以为：根据元素信息获取动画场景所需的动画元素，并基于对应关系在指定区域中关联存储动画元素与动画场景，在检测到动画处理启动操作时，从指定区域中获取动画场景所需的动画元素，对动画场景所需的动画元素进行渲染，得到动画场景对应的动画图像，并基于动画元素的动画信息和动画场景之间的切换信息对动画图像进行动画处理，得到目标动画。
在一个实施例中，上述动画元素包括图片元素和绘制元素，通过动画处理系统针对目标动画所需的动画场景以及动画场景所需的动画元素进行配置的过程，具体还包括：配置目标动画所需图片元素的地址；配置目标动画所需动画场景的场景参数，该场景参数包括动画场景的出现时间、动画场景所需挂载的动画元素(即动画场景与动画元素的对应关系)；配置绘制元素的元素类型、位置、大小等等，生成绘制元素的参数信息；配置各个动画场景中动画元素自身的动画效果(如循环动画的效果)；配置动画场景之间切换的过场效果(如每个新动画场景的进入、老动画场景的消失所涉及的场景变化的动画)，或者还可以配置切换动画场景时待切换动画场景中动画元素的过场效果，在用户配置完成后，动画处理系统可以生成并存储上述目标动画的配置信息。这种情况下，上述元素信息包括图片元素的存储地址和/或绘制元素的参数信息，参数信息包括以下任一种或者多种：绘制元素的元素类型、位置和大小；动画元素的动画信息用于表征动画元素在对应动画场景中的动画效果，切换动画信息用于表征动画场景之间切换的过场效果以及切换动画场景时待切换动画场景中动画元素的过场效果。
其中，上述针对目标动画的配置方式可以是基于JSON数据格式配置对应的文件，例如，配置绘制元素的参数信息，可以通过JSON数据格式配置对应的绘制元素配置文件，该绘制元素配置文件包括绘制元素的参数信息；又例如，配置目标动画所需动画场景的场景参数，以通过JSON数据格式配置对应的场景配置文件，该场景配置文件包括场景参数。
或者，上述针对目标动画的配置方式也可以是基于可视化页面进行的，例如通过资源配置页面，配置目标动画所需图片元素的地址；通过场景配置页面，配置目标动画所需动画场景的场景参数，该场景参数包括动画场景的出现时间、动画场景所需挂载的动画元素(即动画场景与动画元素的对应关系)；通过绘制元素配置页面，配置绘制元素的元素类型、位置、大小等等，生成绘制元素的参数信息；通过元素动画配置页面，配置各个动画场景中动画元素自身的动画效果(如循环动画的效果)；通过场景配置页面，配置动画场景之间切换的过场效果(如每个新动画场景的进入、老动画场景的消失所涉及的场景变化的动画)，或者还可以配置切换动画场景时待切换动画场景中动画元素的过场效果，在用户配置完成后，动画处理设备可以生成并存储上述目标动画的配置信息。
又或者，一个页面可以集成多种配置功能，既可以配置动画场景所需绘制元素的动画效果，也可以包括配置动画场景所需绘制元素的过场效果。示例性地，参见图4所示，假设动画配置页面如图4左图所示，用户可以该动画配置页面中添加至少一个动画场景，配置各个动画场景的过场效果、出现时间，还可以通过触发各个动画场景对应的动画元素设置功能按钮40，开启各个动画场景所需动画元素的动画元素配置页面(如图4右图所示)，用户可以通过动画元素配置页面，配置各个动画场景所需动画元素中图片元素的存储地址、绘制元素的参数信息，以及各个动画元素在对应动画场景中的动画效果、过场效果等等。
在一个实施例中，在动画处理设备对各个动画场景所需的动画元素进行渲染，得到各个动画场景对应的动画图像之后，可以依照动画元素的动画信息处理动画图像中的动画元素的动画效果，并基于动画场景之间的切换信息处理动画图像之间切换的过场效果以及动画图像中动画元素的过场效果，从而得到目标动画。
示例性地，参见图5a～图5c，假设目标动画包括2个动画场景，分别为动画场景1和动画场景2，动画场景1和动画场景2所需的开始时间分别为00：00和00：03，动画场景1所需的动画元素为图片元素1，动画场景2所需的动画元素为图片元素2和绘制元素1；图像元素1如图5a所示，图像元素2如图5b所示，绘制元素1为圆形元素；动画元素的动画信息表征的动画元素在对应动画场景中的动画效果，切换动画信息表征的动画场景之间切换的过场效果以及切换动画场景时待切换动画场景中动画元素的过场效果如表1-2所示。这种情况下，当动画处理设备检测到动画处理启动操作时，可以获取动画场景1所需的图片元素1，对动画场景所需的动画元素进行渲染，得到动画场景1对应的动画图像。进一步地，动画处理设备可以获取动画场景2所需的图像元素2和绘制元素1，并对图像元素2和绘制元素1进行绘制，从而得到动画场景2对应的动画图像，如图5b所示。
进一步地，由于渲染得到的每个动画场景对应动画图像中的动画元素不具有动画效果，每个动画图像之间也不具有动画场景之间切换的过场效果。因此，在目标动画的所有动画场景渲染完成之后，动画处理设备可以通过动画管理模块依照表1-2所示的动画效果，将绘制元素1在动画场景2中的动画效果设置为循环动画，动画场景1的过场效果设置为从右往左移出，动画场景2的过场效果设置为从右往左移入，从而完成目标动画的绘制。该目标动画的示意图可以参考图5c所示。
在一个实施例中，上述动画处理设备可以为智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等终端。动画处理设备还可以预先通过动画处理系统对渲染器进行配置，生成渲染配置信息。这种情况下，上述目标配置信息还包括渲染配置信息，该渲染配置信息指示了渲染方式与指定动画处理设备的设备信息的对应关系。动画处理设备对动画场景所需的动画元素进行渲染，得到动画场景对应的动画图像的具体实施方式可以为：动画处理设备检测自身的设备信息，从渲染配置信息指示的渲染方式与指定动画处理设备的设备信息的对应关系中确定与自身的设备信息对应的目标渲染方式，依照目标渲染方式对动画场景所需的动画元素进行渲染，得到动画场景对应的动画图像。采用这样的方式，可以保证渲染动画场景所采用的渲染方式与动画处理设备自身的性能匹配，有利于保证性能低下的动画处理设备展示目标动画的流畅度。从而减少人为优化性能的成本，开发者只需关注特殊场景的性能问题。
本申请实施例动画处理设备可以通过动画处理系统对目标动画所需的动画场景和动画场景所需的动画元素进行配置，生成目标动画的配置信息，并按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。可以基于配置的方式实现目标动画的绘制，有利于提高目标动画的绘制效率。
本申请实施例还提供了一种计算机存储介质，该计算机存储介质中存储有程序指令，该程序指令被执行时，用于实现上述实施例中描述的相应方法。
再请参见图6，是本申请实施例的一种动画处理装置的结构示意图，本申请实施例的动画处理装置可以设置上述动画处理设备中，可以为运行于动画处理设备中的一个计算机程序(包括程序代码)，该动画处理设备搭载有动画处理系统，该动画处理系统包括配置管理模块和动画处理模块。
本申请实施例的所述装置的一个实现方式中，所述装置包括如下结构。
配置单元60，用于通过动画处理系统对目标动画所需的动画场景和动画场景所需的动画元素进行配置，生成目标动画的配置信息，该目标动画的配置信息包括：动画场景的配置信息及动画场景所需的动画元素的配置信息；
动画处理单元61，用于按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。
在一个实施例中，动画场景所需的动画元素的配置信息包括动画元素的元素信息和动画元素的动画信息，动画场景的配置信息包括动画场景和动画元素的对应关系，以及动画场景之间的切换信息，动画处理单元61，具体用于根据元素信息获取动画场景所需的动画元素，并基于对应关系在指定区域中关联存储动画元素与动画场景，进一步地，在检测到动画处理启动操作时，从指定区域中获取动画场景所需的动画元素，对动画场景所需的动画元素进行渲染，得到动画场景对应的动画图像，并基于动画元素的动画信息和动画场景之间的切换信息对动画图像进行动画处理，得到目标动画。
在一个实施例中，动画场景所需的动画元素包括图片元素和/或绘制元素，元素信息包括图片元素的存储地址和/或绘制元素的参数信息，参数信息包括以下任一种或者多种：绘制元素的元素类型、位置和大小；动画元素的动画信息用于表征动画元素在对应动画场景中的动画效果，切换动画信息用于表征动画场景之间切换的过场效果以及切换动画场景时待切换动画场景中动画元素的过场效果。
在一个实施例中，目标配置信息还包括渲染配置信息，渲染配置信息指示了渲染方式与指定动画处理设备的设备信息的对应关系，动画处理单元61，还具体用于检测上述动画处理设备的设备信息，从渲染配置信息指示的渲染方式与指定动画处理设备的设备信息的对应关系中确定与上述动画处理设备的设备信息对应的目标渲染方式，依照目标渲染方式对动画场景所需的动画元素进行渲染，得到动画场景对应的动画图像。
在本申请实施例中，上述各个单元的具体实现可参考前述各个附图所对应的实施例中相关内容的描述。
本申请实施例中的动画处理装置可以生成目标动画的配置信息，并按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。可以基于配置的方式实现目标动画的绘制，有利于提高目标动画的绘制效率。
再请参见图7，是本申请实施例的一种动画处理设备的结构示意图，该动画处理设备可以搭载有上述动画处理系统，本申请实施例的该动画处理设备包括供电模块等结构，并包括处理器70、存储装置71、输入设备72、输出设备73和网络接口74。所述处理器70、存储装置71、输入设备72、输出设备73和网络接口74之间可以交互数据，由处理器70实现相应的动画处理功能。
所述存储装置71可以包括易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储装置71也可以包括非易失性存储器(non-volatilememory)，例如快闪存储器(flash memory)，固态硬盘(solid-state drive，SSD)等；所述存储装置71还可以包括上述种类的存储器的组合。
所述处理器70可以是中央处理器70(central processing unit，CPU)。在一个实施例中，所述处理器70还可以是图形处理器70(Graphics Processing Unit，GPU)。所述处理器70也可以是由CPU和GPU的组合。在所述动画处理设备中，可以根据需要包括多个CPU和GPU进行相应的动画处理。
在一个实施例中，所述存储装置71用于存储程序指令。所述处理器70可以调用所述程序指令，实现如本申请实施例中上述涉及的各种方法。
输入设备72可以包括触控板、指纹采传感器、麦克风等，输出设备73可以包括显示器(LCD等)、扬声器等，输出设备73可以用于显示目标动画。
在第一个可能的实施方式中，所述动画处理设备的所述处理器70，调用所述存储装置71中存储的程序指令，用于通过动画处理系统对目标动画所需的动画场景和动画场景所需的动画元素进行配置，生成目标动画的配置信息，该目标动画的配置信息包括：动画场景的配置信息及动画场景所需的动画元素的配置信息；按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。
在一个实施例中，动画场景所需的动画元素的配置信息包括动画元素的元素信息和动画元素的动画信息，动画场景的配置信息包括动画场景和动画元素的对应关系，以及动画场景之间的切换信息，处理器70，具体用于根据元素信息获取动画场景所需的动画元素，并基于对应关系在指定区域中关联存储动画元素与动画场景，进一步地，在检测到动画处理启动操作时，从指定区域中获取动画场景所需的动画元素，对动画场景所需的动画元素进行渲染，得到动画场景对应的动画图像，并基于动画元素的动画信息和动画场景之间的切换信息对动画图像进行动画处理，得到目标动画。
在一个实施例中，动画场景所需的动画元素包括图片元素和/或绘制元素，元素信息包括图片元素的存储地址和/或绘制元素的参数信息，参数信息包括以下任一种或者多种：绘制元素的元素类型、位置和大小；动画元素的动画信息用于表征动画元素在对应动画场景中的动画效果，切换动画信息用于表征动画场景之间切换的过场效果以及切换动画场景时待切换动画场景中动画元素的过场效果。
在一个实施例中，目标配置信息还包括渲染配置信息，渲染配置信息指示了渲染方式与指定动画处理设备的设备信息的对应关系，处理器70，还具体用于检测上述动画处理设备的设备信息，从渲染配置信息指示的渲染方式与指定动画处理设备的设备信息的对应关系中确定与上述动画处理设备的设备信息对应的目标渲染方式，依照目标渲染方式对动画场景所需的动画元素进行渲染，得到动画场景对应的动画图像。
在本申请实施例中，上述处理器70的具体实现可参考前述各个附图所对应的实施例中相关内容的描述。
本申请实施例中的动画处理装置可以通过动画处理系统对目标动画所需的动画场景和动画场景所需的动画元素进行配置，生成目标动画的配置信息，并按照目标动画的配置信息对动画场景所需的动画元素进行渲染和动画处理，得到目标动画。可以基于配置的方式实现目标动画的绘制，有利于提高目标动画的绘制效率。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。
以上所揭露的仅为本申请的部分实施例而已，当然不能以此来限定本申请之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本申请权利要求所作的等同变化，仍属于发明所涵盖的范围。
Claims (15)
1.一种动画处理系统，其特征在于，所述系统包括配置管理模块和动画处理模块，其中，
所述配置管理模块，用于生成并管理目标动画的配置信息，所述目标动画的配置信息包括：动画场景的配置信息及所述动画场景所需的动画元素的配置信息；
所述动画处理模块，用于按照所述目标动画的配置信息对所述动画场景所需的动画元素进行渲染和动画处理，得到所述目标动画。
2.如权利要求1所述的系统，其特征在于，所述动画场景所需的动画元素的配置信息包括所述动画元素的元素信息和所述动画元素的动画信息，所述动画场景的配置信息包括所述动画场景和所述动画元素的对应关系，以及所述动画场景之间的切换信息；其中，
所述动画元素包括图片元素和/或绘制元素，所述元素信息包括所述图片元素的存储地址和/或所述绘制元素的参数信息，所述参数信息包括以下任一种或者多种：所述绘制元素的元素类型、位置和大小；所述动画元素的动画信息用于表征动画元素在对应动画场景中的动画效果，所述切换动画信息用于表征动画场景之间切换的过场效果以及切换动画场景时待切换动画场景中动画元素的过场效果。
3.如权利要求1或2所述的系统，其特征在于，所述配置管理模块包括以下任一种或者多种：资源加载配置模块、绘制元素配置模块、元素动画配置模块和场景动画配置模块，其中，
所述资源加载配置模块，用于配置所述目标动画所需动画资源的存储地址，所述动画资源包括图片元素；所述绘制元素配置模块，用于配置绘制元素的参数信息；所述元素动画配置模块，用于配置动画元素在对应动画场景中的动画效果；所述场景动画配置模块，用于配置动画场景之间切换的过场效果以及切换动画场景时待切换动画场景中动画元素的过场效果。
4.如权利要求2所述的系统，其特征在于，所述动画处理模块包括动画基础元素模块和动画绘制模块，其中，
所述动画基础元素模块，用于根据所述动画场景所需的动画元素的元素信息获取所述动画元素，并基于所述动画场景和动画元素的对应关系在指定区域中关联存储所述动画元素与所述动画场景，在检测到动画处理启动操作时，从所述指定区域中获取所述动画场景所需的动画元素，并向所述动画绘制模块发送携带有所述动画场景所需的动画元素的绘制指令；
所述动画绘制模块，用于响应所述绘制指令对所述动画场景所需的动画元素进行渲染，得到所述动画场景对应的动画图像，并基于所述动画元素的动画信息和所述动画场景之间的切换信息对所述动画图像进行动画处理，得到所述目标动画。
5.如权利要求4所述的系统，其特征在于，所述动画场景所需的动画元素包括所述图片元素和所述绘制元素，所述动画基础元素模块包括资源管理模块、封装有多种动画所需的绘制元素的元素管理模块和场景管理模块，所述资源管理模块，用于根据所述图片元素的存储地址获取所述图片元素，并将所述图片元素加载到所述指定区域中；所述元素管理模块，用于从所述多种动画所需的绘制元素中获取与所述参数信息匹配的目标绘制元素，并将所述目标绘制元素加载到所述指定区域中；所述场景管理模块用于在所述指定区域中基于所述动画场景和动画元素的对应关系将所述图片元素和所述绘制元素分别与所述动画场景关联。
6.如权利要求4所述的系统，其特征在于，所述动画绘制模块包括封装有目标渲染引擎的渲染器的渲染模块和封装有目标动画库的动画管理模块，所述配置管理模块还包括渲染配置模块；其中，
所述渲染配置模块，用于生成所述渲染器的渲染配置信息，所述渲染配置信息指示了渲染方式与指定动画处理设备的设备信息的对应关系；
所述渲染模块，用于响应所述绘制指令检测所述动画处理系统所运行动画处理设备的设备信息，从所述渲染配置信息指示的所述渲染方式与指定动画处理设备的设备信息的对应关系中确定与所述动画处理设备的设备信息对应的目标渲染方式，并调用所述渲染器依照所述目标渲染方式对所述动画场景所需的动画元素进行渲染，得到所述动画场景对应的动画图像；
所述动画管理模块，用于依照所述动画元素的动画信息处理所述动画图像中的动画元素的动画效果，并基于所述动画场景之间的切换信息处理所述动画图像之间切换的过场效果以及所述动画图像中动画元素的过场效果。
7.如权利要求5所述的系统，其特征在于，所述配置管理模块还包括销毁配置模块，
其中，所述销毁配置模块，用于配置所述动画场景所需的动画元素的元素销毁机制，以及所述动画场景的场景销毁机制，所述动画场景所需的动画元素的配置信息还包括所述元素销毁机制，所述动画场景的配置信息还包括所述场景销毁机制。
8.如权利要求7所述的系统，其特征在于，所述动画场景所需的动画元素包括所述图片元素和所述绘制元素，所述资源管理模块，还用于基于所述元素销毁机制对所述图片元素进行销毁管理；所述元素管理模块，还用于基于所述元素销毁机制对所述绘制元素进行销毁管理；所述场景管理模块，还用于基于所述场景销毁机制对所述动画场景进行销毁管理。
9.一种动画处理方法，其特征在于，所述方法应用于动画处理设备，所述动画处理设备搭载有动画处理系统，所述动画处理系统包括配置管理模块和动画处理模块，所述方法包括：
通过所述动画处理系统对目标动画所需的动画场景和所述动画场景所需的动画元素进行配置，生成所述目标动画的配置信息，所述目标动画的配置信息包括：所述动画场景的配置信息及所述动画场景所需的动画元素的配置信息；
按照所述目标动画的配置信息对所述动画场景所需的动画元素进行渲染和动画处理，得到所述目标动画。
10.如权利要求9所述的方法，其特征在于，所述动画场景所需的动画元素的配置信息包括所述动画元素的元素信息和所述动画元素的动画信息，所述动画场景的配置信息包括所述动画场景和所述动画元素的对应关系，以及所述动画场景之间的切换信息，所述按照所述目标动画的配置信息对所述动画场景所需的动画元素进行渲染和动画处理，得到所述目标动画，包括：
根据所述元素信息获取所述动画场景所需的动画元素，并基于所述对应关系在指定区域中关联存储所述动画元素与所述动画场景；
在检测到动画处理启动操作时，从所述指定区域中获取所述动画场景所需的动画元素，对所述动画场景所需的动画元素进行渲染，得到所述动画场景对应的动画图像；
基于所述动画元素的动画信息和所述动画场景之间的切换信息对所述动画图像进行动画处理，得到所述目标动画。
11.如权利要求10所述的方法，其特征在于，所述动画场景所需的动画元素包括图片元素和/或绘制元素，所述元素信息包括所述图片元素的存储地址和/或所述绘制元素的参数信息，所述参数信息包括以下任一种或者多种：所述绘制元素的元素类型、位置和大小；所述动画元素的动画信息用于表征动画元素在对应动画场景中的动画效果，所述切换动画信息用于表征动画场景之间切换的过场效果以及切换动画场景时待切换动画场景中动画元素的过场效果。
12.如权利要求10所述的方法，其特征在于，所述目标配置信息还包括渲染配置信息，所述渲染配置信息指示了渲染方式与指定动画处理设备的设备信息的对应关系，所述对所述动画场景所需的动画元素进行渲染，得到所述动画场景对应的动画图像，包括：
检测所述动画处理设备的设备信息；
从所述渲染配置信息指示的渲染方式与指定动画处理设备的设备信息的对应关系中确定与所述动画处理设备的设备信息对应的目标渲染方式；
依照所述目标渲染方式对所述动画场景所需的动画元素进行渲染，得到所述动画场景对应的动画图像。
13.一种动画处理装置，其特征在于，所述装置配置于动画处理设备，所述动画处理设备搭载有动画处理系统，所述动画处理系统包括配置管理模块和动画处理模块，所述装置包括：
配置单元，用于通过所述动画处理系统对目标动画所需的动画场景和所述动画场景所需的动画元素进行配置，生成所述目标动画的配置信息，所述目标动画的配置信息包括：所述动画场景的配置信息及所述动画场景所需的动画元素的配置信息；
动画处理单元，用于按照所述目标动画的配置信息对所述动画场景所需的动画元素进行渲染和动画处理，得到所述目标动画。
14.一种动画处理设备，其特征在于，所述动画处理设备搭载有如权利要求1-8任一项所述的动画处理系统，所述搭载方式包括以下任一种或者多种：安装有所述动画处理系统对应的插件、封装有所述动画处理系统、搭载有调用所述动画处理系统的接口和运行有所述动画处理系统对应的动画处理平台；所述动画处理设备包括处理器和存储装置，所述处理器和存储装置相互连接，其中，所述存储装置用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行如权利要求9-12任一项所述的方法。
15.一种计算机存储介质，其特征在于，该计算机存储介质中存储有程序指令，该程序指令被执行时，用于实现如权利要求9-12任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010461667.7A CN113744377A (zh) | 2020-05-27 | 2020-05-27 | 一种动画处理系统、方法、装置、设备及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010461667.7A CN113744377A (zh) | 2020-05-27 | 2020-05-27 | 一种动画处理系统、方法、装置、设备及介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113744377A true CN113744377A (zh) | 2021-12-03 |
Family
ID=78723816
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010461667.7A Pending CN113744377A (zh) | 2020-05-27 | 2020-05-27 | 一种动画处理系统、方法、装置、设备及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113744377A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114510309A (zh) * | 2022-01-29 | 2022-05-17 | 建信金融科技有限责任公司 | 动画效果的设置方法、装置、设备及介质 |
| CN115546357A (zh) * | 2022-11-24 | 2022-12-30 | 成都华栖云科技有限公司 | 一种html5网页动画的精准定位动画帧方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102289835A (zh) * | 2011-08-30 | 2011-12-21 | 北京瑞信在线系统技术有限公司 | 微动画效果查看方法及装置 |
| CN109933740A (zh) * | 2019-03-29 | 2019-06-25 | 珠海豹好玩科技有限公司 | 动画处理方法、装置、终端及计算机可读存储介质 |
| US20190378319A1 (en) * | 2017-08-31 | 2019-12-12 | Tencent Technology (Shenzhen) Company Limited | Virtual scene display method and apparatus, and storage medium |
| CN110806865A (zh) * | 2019-11-08 | 2020-02-18 | 百度在线网络技术（北京）有限公司 | 动画生成方法、装置、设备及计算机可读存储介质 |
| US20200142572A1 (en) * | 2018-11-07 | 2020-05-07 | Adobe Inc. | Generating interactive, digital data narrative animations by dynamically analyzing underlying linked datasets |
-
2020
- 2020-05-27 CN CN202010461667.7A patent/CN113744377A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102289835A (zh) * | 2011-08-30 | 2011-12-21 | 北京瑞信在线系统技术有限公司 | 微动画效果查看方法及装置 |
| US20190378319A1 (en) * | 2017-08-31 | 2019-12-12 | Tencent Technology (Shenzhen) Company Limited | Virtual scene display method and apparatus, and storage medium |
| US20200142572A1 (en) * | 2018-11-07 | 2020-05-07 | Adobe Inc. | Generating interactive, digital data narrative animations by dynamically analyzing underlying linked datasets |
| CN109933740A (zh) * | 2019-03-29 | 2019-06-25 | 珠海豹好玩科技有限公司 | 动画处理方法、装置、终端及计算机可读存储介质 |
| CN110806865A (zh) * | 2019-11-08 | 2020-02-18 | 百度在线网络技术（北京）有限公司 | 动画生成方法、装置、设备及计算机可读存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| 周国福;: "基于HTML5的2D动画技术研究", 鄂州大学学报, no. 12 * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114510309A (zh) * | 2022-01-29 | 2022-05-17 | 建信金融科技有限责任公司 | 动画效果的设置方法、装置、设备及介质 |
| CN114510309B (zh) * | 2022-01-29 | 2023-08-22 | 建信金融科技有限责任公司 | 动画效果的设置方法、装置、设备及介质 |
| CN115546357A (zh) * | 2022-11-24 | 2022-12-30 | 成都华栖云科技有限公司 | 一种html5网页动画的精准定位动画帧方法 |
| CN115546357B (zh) * | 2022-11-24 | 2023-02-28 | 成都华栖云科技有限公司 | 一种html5网页动画的精准定位动画帧方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP7476292B2 (ja) | 複合現実システムにおいて仮想コンテンツを管理および表示する方法およびシステム | |
| US20230033306A1 (en) | Image rendering method and apparatus, computer device, and storage medium | |
| US11425220B2 (en) | Methods, systems, and computer program products for implementing cross-platform mixed-reality applications with a scripting framework | |
| US20220277530A1 (en) | Augmented reality-based display method and device, and storage medium | |
| US20230057566A1 (en) | Multimedia processing method and apparatus based on artificial intelligence, and electronic device | |
| CN113411664B (zh) | 基于子应用的视频处理方法、装置和计算机设备 | |
| US11587280B2 (en) | Augmented reality-based display method and device, and storage medium | |
| CN111583379B (zh) | 虚拟模型的渲染方法、装置、存储介质与电子设备 | |
| WO2018126899A1 (zh) | 一种视频界面显示方法及装置 | |
| CN111951356B (zh) | 基于json数据格式的动画渲染方法 | |
| CN110825467B (zh) | 渲染方法、装置、硬件装置和计算机可读存储介质 | |
| CN112337091B (zh) | 人机交互方法、装置及电子设备 | |
| CN116302366B (zh) | 面向终端开发的xr应用开发系统与方法、设备及介质 | |
| US20230403437A1 (en) | Graphics engine and graphics processing method applicable to player | |
| CN113744377A (zh) | 一种动画处理系统、方法、装置、设备及介质 | |
| CN110443880B (zh) | 图像渲染方法、装置、存储介质及电子设备 | |
| CN116339737B (zh) | Xr应用编辑方法、设备及存储介质 | |
| CN117009029B (zh) | Xr应用与内容运行方法、设备及存储介质 | |
| CN116342799A (zh) | 图形显示方法、装置、电子设备及可读存储介质 | |
| CN114581594A (zh) | 次表面散射效果的渲染方法及装置、设备、介质 | |
| WO2023169089A1 (zh) | 一种视频播放方法、装置、电子设备、介质和程序产品 | |
| EP4328863A1 (en) | 3d image implementation method and system | |
| US20240370966A1 (en) | Rendering resource-based data processing | |
| KR20240062268A (ko) | Iptv 또는 ott 앱의 홈 메뉴를 위한 그래픽 사용자 인터페이스 제공 방법 및 장치 | |
| CN114723871A (zh) | 图片数据处理方法、装置、电子设备和存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |