[发明专利]动态效果图片生成方法、装置、电子设备和存储介质

说明书

本发明公开了一种动态效果图片生成方法、装置、电子设备和存储介质。其中，方法包括获取第一图片；所述第一图片由多帧第二图片连续拼接而成，所述第二图片的长度相同、宽度相同；基于所述第一图片创建DIV标签，所述DIV标签的标签背景为所述第一图片；确定所述第一图片的图片属性；根据所述第一图片的图片属性为所述DIV标签设置动画属性；根据所述动画属性利用CSS3技术对所述DIV标签生成动态效果图片。采用本发明提供的方案能生成较高维度的动态效果图片，同时实现成本较低、操作简单。

技术领域

本发明涉及图像动态效果技术领域，尤其涉及一种动态效果图片生成方法、装置、电子设备和存储介质。

背景技术

在目前的web系统中，为了增强文字的理解度及提升人机交互式体验，常常设置图片动态效果。市面上，基于web端常利用视频或者3D开发插件进行图片动态效果的开发。

但上述方式存在一定的弊端。如通过视频进行开发的方式，所需要的项目资源较大，会大大增加项目的开发资源且常会因为资源问题出现卡顿现象，在网络较差的条件下，用户体验差。而3D开发插件（例如three.js、canvas等）对于开发者的专业技能要求较高，且开发耗时较长。

发明内容

为解决图片3D动态效果开发资源需求大、制作成本高(人力、时长等)的技术问题，本发明实施例提供一种动态效果图片生成方法、装置、电子设备和存储介质。

本发明实施例的技术方案是这样实现的：

本发明实施例提供了一种动态效果图片生成方法，方法包括：

获取第一图片；所述第一图片由多帧第二图片连续拼接而成，所述第二图片的长度相同、宽度相同；

基于所述第一图片创建DIV标签，所述DIV标签的标签背景为所述第一图片；

确定所述第一图片的图片属性；

根据所述第一图片的图片属性为所述DIV标签设置动画属性；

根据所述动画属性利用CSS3技术对所述DIV标签生成动态效果图片。

上述方案中，所述获取第一图片包括：

获取待生成的动态效果图片的多帧图像，将所述多帧图像确定为多帧第二图片；

对所述多帧第二图片按照顺序从上到下依次拼接，生成第一图片。

上述方案中，所述确定所述第一图片的图片属性包括：

确定所述第一图片中包含所述第二图片的帧数、所述第二图片的长度、所述第二图片的宽度。

上述方案中，所述根据所述第一图片的图片属性为所述DIV标签设置动画属性包括：

将所述第一图片中包含所述第二图片的帧数设置的动画步数；

将所述第二图片的长度设置为动画中每帧图像的长度；

将所述第二图片的宽度设置为动画中每帧图像的宽度。

上述方案中，根据所述第一图片的图片属性为所述DIV标签设置动画属性之后，所述方法还包括：

对每帧所述第二图片分别设置播放时间和播放方式。

上述方案中，所述根据所述动画属性利用CSS3技术对所述DIV标签生成动态效果图片包括：

根据所述动画属性利用CSS3技术中的逐帧动画功能对所述DIV标签生成动态效果图片。

上述方案中，所述根据所述动画属性利用CSS3技术中的逐帧动画功能对所述DIV标签生成动态效果图片包括：

根据所述动画属性利用CSS3技术中的逐帧动画功能将所述动画的开头定位到所述DIV标签的最顶部位置；

将所述动画的结尾定位到所述DIV标签的最底部位置。

本发明实施例还提供了一种动态效果图片生成装置，动态效果图片生成装置包括：