动画镜头处理的方法、系统、设备和介质

技术领域

本申请涉及计算机应用领域，具体而言，本申请涉及一种动画镜头处理的方法、系统、设备和介质。

背景技术

随着前端技术在网页web(全球广域网)开发中日益重要，前端开发人员在项目中使用动画的占比越来越大，越来越多的炫酷动画需要在移动端设备中被展示出来。在移动端视频场景中，经常需要实现镜头Panning Shot(平移)和缩放的效果。现有技术一般直接采用transform(视频过滤器)来实现镜头Panning Shot(平移)和缩放的效果，但是该方法动画镜头效果设置单一的问题，从而影响动画的效果和质量。

发明内容

本发明要解决的技术问题是为了克服现有技术中在对动画实现镜头PanningShot(平移)和缩放的效果时，对动画镜头效果设置单一的问题的缺陷，提供一种动画镜头处理的方法、系统、设备和介质。

本发明是通过下述技术方案来解决上述技术问题：

本发明提供一种动画镜头处理的方法，所述方法包括：

获取动画中的帧图像的目标元素；

结合transform属性，对所述目标元素配置动画animation属性和动画规则；

根据所述动画animation(一种属性)属性和所述动画规则对所述目标元素进行平移和/或缩放。

较佳地，所述对所述目标元素配置动画animation属性包括对所述目标元素配置动画animation-duration(一种属性)属性和animation-timing-function(一种属性)属性。

较佳地，所述获取动画中的帧图像的目标元素的步骤包括：

创建HTML(一种网页格式)网页；

在所述HTML网页的主体中添加图像作为所述帧图像；所述图像为采用img(一种文件压缩格式)进行定义的图像；

获取所述图像的目标元素。

较佳地，对所述目标元素配置动画规则的步骤包括：

构建@keyframes am函数；

基于所述@keyframes am函数，采用transform:scale(x，y)和transform-origin：center作为所述@keyframes am函数的变量，以将transform属性和动画规则结合。

本发明还提供一种动画镜头处理的系统，所述系统包括：

获取模块，用于获取动画中的帧图像的目标元素；

配置模块，用于结合transform属性，对所述目标元素配置动画animation属性和动画规则；

平移缩放模块，用于根据所述动画animation属性和所述动画规则对所述目标元素进行平移和/或缩放。

较佳地，所述对所述目标元素配置动画animation属性包括对所述目标元素配置动画animation-duration属性和animation-timing-function属性。

较佳地，所述获取模块包括：

第一创建单元，用于创建HTML网页；

添加单元，用于在所述HTML网页的主体中添加图像作为所述帧图像；所述图像为采用img进行定义的图像；

获取单元，用于获取所述图像的目标元素。

较佳地，所述配置模块包括：

第二创建单元，用于构建@keyframes am函数；

变量单元，用于基于所述@keyframes am函数，采用transform:scale(x，y)和transform-origin：center作为所述@keyframes am函数的变量，以将transform属性和动画规则结合。

本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如前述的动画镜头处理的方法。

本发明还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如前述的动画镜头处理的方法的步骤。

本发明的积极进步效果在于：

本发明公开了一种动画镜头处理的方法、系统、设备和介质，通过将transform属性与动画animation(简写属性)属性和动画规则进行结合来对动画中的帧图像的目标元素进行属性和动画规则的配置来来实现镜头Panning Shot(平移)和缩放的效果，从而使得动画规则设置更加的丰富，进而提高动画的效果和质量。

附图说明

图1为本发明实施例1中的动画镜头处理的方法的流程图；

图2为本发明实施例1中的步骤S101的流程图；

图3为本发明实施例2中的动画镜头处理的系统的模块示意图；

图4为本发明实施例2中的获取模块示意图；

图5为本发明实施例2中的配置模块示意图；

图6为本发明实施例3的电子设备的结构示意图。

具体实施方式

下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。

实施例1

如图1所示，本实施例公开了动画镜头处理的方法，包括以下步骤：

步骤S101、获取动画中的帧图像的目标元素；本实施例中，动画镜头由一组帧图像构成。目标元素为帧图像中的目标区域。

步骤S102、结合transform属性，对所述目标元素配置动画animation属性和动画规则；animation属性是一个简写属性，用于设置六种动画属性，六种动画属性分别为animation-name(规定需要绑定到选择器的keyframe名称)、animation-duration(规定完成动画所花费的时间，以秒或毫秒计)、animation-timing-function(规定动画的速度曲线)、animation-delay(规定在动画开始之前的延迟)、animation-iteration-count(规定动画应该播放的次数)、animation-direction(规定是否应该轮流反向播放动画)。在本实施例种对所述目标元素配置动画animation属性包括对所述目标元素配置动画animation-duration属性和animation-timing-function属性。transform属性应用于帧图像中的目标元素向2D或3D转换。transform属性可以对帧图像中的目标元素进行旋转、缩放、移动或倾斜。

具体地对所述目标元素配置动画规则的步骤包括：构建@keyframes am函数；

基于所述@keyframes am函数，采用transform:scale(x,y)和transform-origin:center作为所述函数的变量，以将transform属性和动画规则结合。

在一具体的实施例中，构建的@keyframes am函数实例如下：

其中，以百分比来规定改变发生的时间，0％是动画的开始时间，100％动画的结束时间。也可以通过关键词"from"和"to"，等价于0％和100％。

@keyframes am函数属于本领域现有函数，其功能和调用方式是本领域技术人员清楚的，此处不再赘述。

步骤S103、根据所述动画animation属性和所述动画规则对所述目标元素进行平移和/或缩放。

如图2所示，步骤S101包括：

步骤S1011、创建HTML网页；

步骤S1012、在所述HTML网页的主体中添加图像作为所述帧图像；所述图像为采用img进行定义的图像；

步骤S1013、获取所述图像的目标元素。

本实施例公开了一种动画镜头处理的方法，动画镜头处理的方法通过将transform属性与动画animation(简写属性)属性和动画规则进行结合来对动画中的帧图像的目标元素进行属性和动画规则的配置来来实现镜头Panning Shot(平移)和缩放的效果，从而使得动画规则设置更加的丰富，进而提高动画的效果和质量。

实施例2

如图3所示，本实施例公开了动画镜头处理的系统，包括：

获取模块1，用于获取动画中的帧图像的目标元素；目标元素为帧图像中的目标区域。

配置模块2，用于结合transform属性，对所述目标元素配置动画animation属性和动画规则；其中，对所述目标元素配置动画animation属性包括对所述目标元素配置动画animation-duration属性和animation-timing-function属性。animation属性是一个简写属性，用于设置六种动画属性，六种动画属性分别为animation-name(规定需要绑定到选择器的keyframe名称)、animation-duration(规定完成动画所花费的时间，以秒或毫秒计)、animation-timing-function(规定动画的速度曲线)、animation-delay(规定在动画开始之前的延迟)、animation-iteration-count(规定动画应该播放的次数)、animation-direction(规定是否应该轮流反向播放动画)。在本实施例种对所述目标元素配置动画animation属性包括对所述目标元素配置动画animation-duration属性和animation-timing-function属性。transform属性应用于帧图像中的目标元素向2D或3D转换。transform属性可以对帧图像中的目标元素进行旋转、缩放、移动或倾斜。

平移缩放模块3，用于根据所述动画animation属性和所述动画规则对所述目标元素进行平移和/或缩放。

如图4所示，所述获取模块1包括：

第一创建单元11，用于创建HTML网页；

添加单元12，用于在所述HTML网页的主体中添加图像作为所述帧图像；所述图像为采用img进行定义的图像；

获取单元13，用于获取所述图像的目标元素。

如图5所示，所述配置模块2包括：

第二创建单元21，用于构建@keyframes am函数；

变量单元22，用于基于所述@keyframes am函数，采用transform:scale(x，y)和transform-origin：center作为所述@keyframes am函数的变量，以将transform属性和动画规则结合。在一具体的实施例中，构建的@keyframes am函数实例如下：

其中，以百分比来规定改变发生的时间，0％是动画的开始时间，100％动画的结束时间。也可以通过关键词"from"和"to"，等价于0％和100％。

@keyframes am函数属于本领域现有函数，其功能和调用方式是本领域技术人员清楚的，此处不再赘述。

本实施例公开了一种动画镜头处理的系统，动画镜头处理的系统通过将transform属性与动画animation(简写属性)属性和动画规则进行结合来对动画中的帧图像的目标元素进行属性和动画规则的配置来来实现镜头Panning Shot(平移)和缩放的效果，从而使得动画规则设置更加的丰富，进而提高动画的效果和质量。

实施例3

图6为本发明实施例3提供的一种电子设备的结构示意图。所述电子设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现实施例1所提供的动画镜头处理的方法。图6显示的电子设备40仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图6所示，电子设备40可以以通用计算设备的形式表现，例如其可以为服务器设备。电子设备40的组件可以包括但不限于：上述至少一个处理器41、上述至少一个存储器42、连接不同系统组件(包括存储器42和处理器41)的总线43。

总线43包括数据总线、地址总线和控制总线。

存储器42可以包括易失性存储器，例如随机存取存储器(RAM)421和/或高速缓存存储器422，还可以进一步包括只读存储器(ROM)423。

存储器42还可以包括具有一组(至少一个)程序模块424的程序/实用工具425，这样的程序模块424包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

处理器41通过运行存储在存储器42中的计算机程序，从而执行各种功能应用以及数据处理，例如本发明实施例1所提供的动画镜头处理的方法。

电子设备40也可以与一个或多个外部设备44(例如键盘、指向设备等)通信。这种通信可以通过输入/输出(I/O)接口45进行。并且，模型生成的设备40还可以通过网络适配器46与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器46通过总线43与模型生成的设备40的其它模块通信。应当明白，尽管图中未示出，可以结合模型生成的设备40使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID(磁盘阵列)系统、磁带驱动器以及数据备份存储系统等。

应当注意，尽管在上文详细描述中提及了电子设备的若干单元/模块或子单元/模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

实施例6

本实施例提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现实施例1所提供的动画镜头处理的方法的步骤。

其中，可读存储介质可以采用的更具体可以包括但不限于：便携式盘、硬盘、随机存取存储器、只读存储器、可擦拭可编程只读存储器、光存储器件、磁存储器件或上述的任意合适的组合。

在可能的实施方式中，本发明还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行实现实施例1所提供的动画镜头处理的方法中的步骤。

其中，可以以一种或多种程序设计语言的任意组合来编写用于执行本发明的程序代码，所述程序代码可以完全地在用户设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户设备上部分在远程设备上执行或完全在远程设备上执行。

虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。