CN109636885A - 一种用于h5页面的序列帧动画制作方法和系统 - Google Patents
一种用于h5页面的序列帧动画制作方法和系统 Download PDFInfo
- Publication number
- CN109636885A CN109636885A CN201811439446.9A CN201811439446A CN109636885A CN 109636885 A CN109636885 A CN 109636885A CN 201811439446 A CN201811439446 A CN 201811439446A CN 109636885 A CN109636885 A CN 109636885A
- Authority
- CN
- China
- Prior art keywords
- raw data
- frame
- animation
- canvas
- picture
- 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
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明提供一种用于H5页面的序列帧动画制作方法，所述方法包括：截获创建界面指令；截获对可操作界面添加原始素材指令；截获对原始素材进行预处理指令；截获显示动画指令，读取目标素材并进行配置形成动画后，播放动画。所述截获对原始素材进行预处理指令，该指令采用如下方式实现：创建Canvas画布；判断用户在Canvas画布上所创建的渲染环境，分为WebGL模式(即三维立体模式)和渲染环境为2D模式(即二维平面模式)；将所获取的目标素材，存储至系统。该制作方法和系统应用于营销策划平台，面向各终端用户，使非专业营销人士能进行策划或浏览活动的动画页面，可以十分便利地制作高清序列帧动画，实现营销活动的策划，使营销内容丰富生动，达到较好的营销效果。
Description
技术领域
本发明涉及计算机技术领域，特别是涉及一种用于H5页面的序列帧动画制作方法和系统。
背景技术
随着互联网的发展，企业营销活动的种类越来越多，其内容也越来越丰富；其中，H5页面作为一种在移动媒体传播的使用HTML5(Hyper Text Markup Language 5，第五代超文本标记语言)技术标准的互联网营销广告载体，已经越来越正规化和产业化。而H5动画作为H5页面这类产品核心竞争力之一，一般可以划分为两种：一种可以定义为物理运动动画，即显示元素的大小、位置、角度、透明度等属性持续发生变化形成动画，这类动画虽能承担许多营销业务的需求，但是它的表现能力有限，也无法传达一些较为细腻的动画内容；另外一种则图像的素材本身内容的不断改变而形成动画，在实际生活中，常见的是GIF动图(Graphics Interchange Format，图像互换格式)，它是通过存储多幅彩色图像，然后逐幅读出显示到屏幕上，同时替换下一幅图像，利用每一幅图像之间的连续差异来构成动画，按这种过程呈现出来的动画，一般称为逐帧动画或序列帧动画。
虽GIF动图使用范围十分广泛，但它同样存在问题：首先，由于它使用一个只有256个栏位的颜色版来管理显示颜色，第257种颜色只能归并到256种颜色中的某一种颜色，所以颜色损耗造成的失真非常严重；其次，由于它无法按比例进行半透明显示，只有透明和不透明两种状态，所以镂空的GIF动图存在毛边和锯齿等无法消除的问题，十分影响视觉体验。
发明内容
为解决以上技术问题，本发明提供一种用于H5页面的序列帧动画制作方法和系统，该制作方法和系统应用于营销策划平台，面向各终端用户，使非专业营销人士能进行策划或浏览活动的动画页面，可以十分便利地制作高清序列帧动画，实现营销活动的策划，使营销内容丰富生动，具有便捷操作、低成本、高效益的传播效率，达到较好的营销效果。
本发明采用的技术方案如下：
一种用于H5(Hyper Text Markup Language 5，HTML5，第五代超文本标记语言)页面的序列帧动画制作方法，所述方法包括：
S1.截获创建界面指令，将所述创建界面指令携带的指令信息传送至系统；根据该指令信息，生成可操作界面；
S2.截获对可操作界面添加原始素材指令，将所述添加原始素材指令携带的指令信息传送至系统；根据该指令信息，在可操作界面上添加多类型的原始素材，并将原始素材存储至系统中，标记为等待预处理状态；
S3.截获对原始素材进行预处理指令，将所述预处理指令携带的指令信息传送至系统；根据该指令信息，对原始素材进行预处理为目标素材，并将所述目标素材保存至系统中；
S4.截获显示动画指令，将所述显示动画指令携带的指令信息传送至系统，根据该指令信息，读取目标素材并进行配置形成动画后，播放动画。
所述截获对可操作界面添加原始素材指令，该指令采用如下方式实现：
S21.获取用户在可操作界面区域内的鼠标操作；
S22.判断是否存在点击添加原始素材按钮的鼠标操作，若是存在，执行步骤S23；
S23.若鼠标操作为：点击第一按钮，则执行步骤S23a；若鼠标操作为：点击第二按钮，则执行步骤S23b；若鼠标操作为：点击第三按钮，则执行步骤S23c；
S24.将执行步骤S23后获取到的原始素材添加至可操作界面，标记为等待预处理状态。
具体的，点击第一按钮添加的原始素材为组图，点击第二按钮添加的原始素材为长图片，点击第三按钮添加的原始素材为GIF动图。
所述执行步骤S23a，包括：
S23a-1.接收原始素材，所述原始素材为组图，该组图内的图片具有特定排列顺序，且组中每张图片的尺寸均相同；
S23a-2.将该组图片中的每一张图标记为序列帧中的每一帧，并记录单帧的长宽值，以及该序列帧所包含的帧数。
所述执行步骤S23b，包括：
S23b-1.接收原始素材，所述原始素材为横排或竖排的长图片；
S23b-2.获取用户在可操作界面上输入的长图片参数，计算并存储单帧的长宽值以及该长图片包含的帧数，将该长图片的每一帧标记为序列帧中的每一帧。
优选的，所述长图片由若干张尺寸相同的小图片拼接。
优选的，所述长图片参数为小图片的长宽值或所包含的小图片张数。
具体的，当原始素材为横排长图片时，要求长图片中的若干张小图片，其第二张在第一张的右边(或左边)，第三张在第二张的右边(或左边)，依次类推；当原始素材为竖排长图片时，同理，要求长图片中的若干张小图片，其第二张在第一张的下边(或上边)，第三张在第二张的下边(或上边)，依次类推。同时要求每张小图片在长图片中占据同样大小的区域，即每张小图片尺寸相同(类似于电影胶卷一帧帧排列)。
所述执行步骤S23c，包括：
S23c-1.接收原始素材，所述原始素材为GIF动图；
S23c-2.将所述GIF动图解析成若干张图片，记录单帧的长宽值以及GIF动图所包含的帧数，并将该GIF动图的每一帧标记为序列帧中的每一帧。
执行所述指令S23后，还包括步骤：序列帧是否设定为循环播放，并将设定结果存储为动画配置数据。
所述截获对原始素材进行预处理指令，该指令采用如下方式实现：
S31.创建Canvas画布；
S32.判断用户在Canvas画布上所创建的渲染环境，若渲染环境为WebGL模式(即三维立体模式)，则执行步骤S32a；若渲染环境为2D模式(即二维平面模式)，则执行步骤S32b；
S33.将执行步骤S32后所获取的目标素材，存储至系统。
具体的，WebGL(Web Graphics Library)是一种3D绘图协议，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。
具体的，由于在webgl模式中，原始素材(即图片)被视为一种纹理，而纹理的尺寸必须是2的n次方(2n)，即2×2、32×32、128×128等，而在移动媒体上，由于设备及浏览器性能所限，不能创建尺寸过大的纹理，比如8192×8192往往会造成黑屏、浏览器崩溃、卡壳等现象，所以需要对素材进行重组。
所述执行步骤S32a，包括：
S32a-1.获取状态为等待预处理的原始素材；
S32a-2.确定WebGL模式渲染环境的最大长度阈值Max，设定WebGL模式下渲染环境的最大矩形区域为Max*Max，该区域为限制方阵；
其中：Max为2n，n≥1；
S32a-3.确定限制方阵Max*Max内可容纳原始素材的最大总帧数N，计算方式如下：
Nx＝[Max/x]；
Ny＝[Max/y]；
N＝Nx*Ny；
其中：
x、y分别为获取到的原始素材序列帧单帧尺寸的长度、宽度；(即x为长度，y为宽度)；
Nx为该限制方阵一行能容纳的帧数，Ny为该限制方阵容纳的行数；
N为该限制方阵容纳的最大总帧数；
S32a-4.确定保存限制方阵Max*Max所需的实际存储空间，计算方式如下：
X＝Nx*x；
Y＝Ny*y；
其中：X和Y为保存该限制方阵内所有帧需要的实际长度与宽度；
若原始素材所含帧数M大于限制方阵的最大总帧数N，则建立T个限制方阵Max*Max；其中：T＝[M/N]，[M/N]为向上取整；
S32a-5.使用2D模式下渲染环境对原始素材进行预处理并保存，预处理方式如下：
创建长度为X、宽度为Y的Canvas画布，按照原始素材的序列帧顺序，依次在该Canvas画布上绘制，假设该原始素材的第一帧坐标为(0,0)，则第二帧为(0，x)，第三帧为(0，x*2)，……，第Nx帧为(0，x*(Nx-1))，第Nx+1帧为(y，0)，第Nx+2帧为(y，x)，第Nx+3帧为(y，x*2)，……，依次类推，直到原始素材最后一帧在Canvas画布的第Ny行绘制完成，生成Canvas图像；
S32a-6.将Canvas图像存储至系统，并标记为P1；记录该Canvas图像中所绘制的每一帧的坐标数据，并标记为D1；
S32a-7.判断原始素材所含帧数M是否大于限制方阵的最大总帧数N；若M≤N，则直接执行S32a-8；若M＞N，则清空Canvas画布的绘制内容，并绘制剩下(T-1)个限制方阵的内容，生成Canvas图像存储至系统，并标记为P2、P3……PT；同时记录每张Canvas图像中所绘制的每一帧的坐标数据，并标记为D2、D3……DT；
S32a-8.判断原始素材所含帧数M是否大于限制方阵的最大总帧数N；
若M≤N，则将P1保存为图片资源，并将D1合成JSON存储为动画配置数据；
若M＞N，则将P1、P2、P3……PT保存为图片资源，并将D1、D2、D3……DT合成JSON存储为动画配置数据；
所述P1、P2、P3……PT、动画配置数据为目标素材。
所述执行步骤S32b，包括：
S32b-1.获取状态为等待预处理的原始素材；
S32b-2.创建长度为X，宽度为Y的Canvas画布；其中：长度X为原始素材所含总帧数M乘以单帧长度x，即X＝M*x；宽度Y为原始素材所含总帧数M乘以单帧宽度y，即Y＝M*y；
S32b-3.按照原始素材的序列帧顺序，从左到右依次在该Canvas画布上绘制，每一帧占据长度为x，宽度为y的区域，直到原始素材最后一帧在该Canvas画布上绘制完成，生成Canvas图像；
S32b-4.将Canvas图像存储至系统，并保存为图片资源；同时将每帧的坐标发送至系统存储为动画配置数据。
所述截获显示动画指令，该指令采用如下方式实现：
S41.打开H5页面，读取目标素材；
S42.在Canvas画布划定播放区域上，按动画配置数据所携带的序列帧顺序及坐标信息，将图片资源按帧绘制到播放区域，形成动画。
优选的，在步骤S42中，所述图片资源按帧绘制的方式为：循环地进行绘制、擦除单帧。即绘制一帧、擦除、再绘制一帧、再擦除一帧的循环，将动画展现出来。
优选的，在步骤S42中，读取序列帧的动画配置数据，若所述序列帧设定为循环播放，则所述图片资源的最后一帧绘制完毕后，擦除并循环至第一帧重新绘制；若所述序列帧设定为非循环播放，则所述图片资源的最后一帧绘制完毕后，最后一帧不再擦除。
优选的，所述图片资源的存储格式为png、jpg、bmp、tif或webp。
本发明还提供了一种用于H5页面的序列帧动画制作系统，包括：
创建界面模块，用于用户通过终端设备在网页上创建可操作界面；
原始素材添加模块，用于获取用户选取的原始素材，并将其发送至可操作界面，并将置于可操作界面的原始素材标记为等待预处理状态；
原始素材预处理模块，用于获取标记为等待预处理状态的原始素材，并处理为目标素材后发送至动画显示模块；
动画显示模块，用于将目标素材配置形成动画后，进行播放。
所述原始素材添加模块包括：
鼠标位置判断单元，用于获取用户在可操作界面的鼠标位置以及操作；
操作信息提取单元，用于提取用户在可操作界面的鼠标操作信息，并发送至序列帧生成模块；
序列帧生成单元，用于根据鼠标操作信息，将不同类型的原始素材处理为序列帧，标记为等待预处理状态，并将该序列帧存储至系统。
所述原始素材预处理模块包括：
Canvas画布创建单元，用于创建Canvas画布；
渲染环境创建单元，用于用户在Canvas画布上创建WebGL模式渲染环境或2D模式渲染环境；
WebGL模式处理单元，用于将等待预处理状态的原始素材，在WebGL模式渲染环境下，进行预处理，生成目标素材，并存储至系统；
2D模式处理单元，用于将等待预处理状态的原始素材，在2D模式渲染环境下，进行预处理，生成目标素材，并存储至系统。
所述动画显示模块包括：
目标素材配置单元，用于读取目标素材，所述目标素材包括图片资源与动画配置数据，所述图片资源根据动画配置数据所携带的信息，按帧发送至图片资源播放单元；
动画播放单元，用于接收图片资源，在绘制区域内循环地进行绘制、擦除单帧图片，即绘制一帧、擦除、再绘制一帧、再擦除一帧的循环，将动画展现出来。
优选的，所述终端设备为移动端或PC端。
本发明又提供了一种电子装置，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时，实现如本发明前述的用于H5页面的序列帧动画制作方法。
本发明又提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明前述的用于H5页面的序列帧动画制作方法。
本发明附加的方面和优点将在实施例中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。
本发明的有益效果：
本发明提供了一种用于H5页面的序列帧动画制作方法和系统，该制作方法和系统应用于营销策划平台，面向各终端用户，使非专业营销人士能进行策划或浏览活动的动画页面，通过将Canvas画布技术、WebGL 3D绘图协议以及2D模式的结合，使得用户能十分便利地制作高清序列帧动画，实现营销活动的策划，使营销内容丰富生动，具有便捷操作、低成本、高效益的传播效率，达到较好的营销效果。
附图说明
图1为本发明的序列帧动画制作方法的流程示意图；
图2为本发明的序列帧动画制作方法的步骤S2的具体步骤流程图；
图3为本发明的序列帧动画制作方法的步骤S3的具体步骤流程图；
图4为本发明的序列帧动画制作方法的步骤S4的具体步骤流程图；
图5为本发明的序列帧动画制作方法的实施例的原始素材序列帧示意图；
图6为本发明的序列帧动画制作方法的实施例的Canvas图像绘制示意图。
具体实施方式
下面结合附图对本发明的具体实施方式作进一步说明。
如图1～6所示，用户通过本发明提供的用于H5页面的序列帧动画制作方法，将为一张含有四帧图片的横排长图片(即原始素材)处理为动画；处理方法如下：
S1.截获创建界面指令，此时生成一个可操作界面；
S2.截获对可操作界面添加原始素材(一张含有十帧小图片的横排长图片)指令，在可操作界面上添加多类型的原始素材，即添加一张含有四帧图片的横排长图片，将该图片存储至系统中，并标记为等待预处理状态；
S3.截获对原始素材(一张含有十帧小图片的横排长图片)进行预处理指令，对原始素材(一张含有十帧小图片的横排长图片)进行预处理为目标素材(十帧小图片以及动画配置数据)，并将所述目标素材保存至系统中；
S4.截获显示动画指令，读取目标素材(十帧小图片以及动画配置数据)并进行配置(即根据动画配置数据所记录的坐标位置，在Canvas画布上逐帧绘制)形成动画后，播放动画。
为了更加具体的了解序列帧动画的制作过程，下面更加详细地说明步骤S2、S3、S4的具体操作；
步骤S1.所述截获对可操作界面添加原始素材(一张含有十帧小图片的横排长图片)指令，该指令采用如下方式实现：
S21.获取用户在可操作界面区域内的鼠标操作；
S22.判断是否存在点击添加原始素材按钮的鼠标操作，此时获取到用户存在点击添加图片的操作，执行步骤S23；
S23.判断到鼠标操作为：点击第二按钮(即添加长图片)，执行步骤S23b；
所述执行步骤S23b，包括：
S23b-1.接收一张含有四帧图片的横排长图片；
S23b-2.获取用户在可操作界面上输入的长图片参数(即输入长图片的长度为40，宽度为4)，计算并存储单帧的长宽值(单帧长宽值均为4)以及该长图片包含的帧数M＝10，将该长图片的每一帧标记为序列帧中的每一帧，并将该序列帧设定为循环播放，将设定结果存储为动画配置数据；如图5所示；
S24.将执行步骤S23后获取到的原始素材(帧数M＝10的序列帧)添加至可操作界面，标记为等待预处理状态；
步骤S2.所述截获对原始素材进行预处理指令，该指令采用如下方式实现：
S31.创建Canvas画布；
S32.判断用户在Canvas画布上所创建的渲染环境，该渲染环境为WebGL模式(即三维立体模式)，执行步骤S32a；
所述执行步骤S32a，包括：
S32a-1.获取状态为等待预处理的原始素材(帧数M＝10的序列帧)；
S32a-2.确定WebGL模式渲染环境的最大长度阈值Max＝32，设定WebGL模式下渲染环境的最大矩形区域为32*32，该区域为限制方阵；
其中：Max为2n，n＝5；
S32a-3.确定限制方阵32*32内可容纳原始素材的最大总帧数N，计算方式如下：
Nx＝[Max/x]，即Nx＝8；
Ny＝[Max/y]，即Ny＝8；
N＝Nx*Ny，即N＝64；
其中：
x、y分别为获取到的原始素材序列帧单帧尺寸的长度、宽度；(即x＝4，y＝4)；
Nx为该限制方阵一行能容纳的帧数，Ny为该限制方阵容纳的行数；
N为该限制方阵容纳的最大总帧数；
S32a-4.确定保存限制方阵32*32所需的实际存储空间，计算方式如下：
X＝Nx*x，即X＝32
Y＝Ny*y；即Y＝32
其中：X和Y为保存该限制方阵内所有帧需要的实际长度与宽度；
S32a-5.使用2D模式下渲染环境对原始素材(帧数M＝十帧的序列帧)进行预处理并保存，预处理方式如下：
创建长度为X＝32、宽度为Y＝32的Canvas画布，按照原始素材的序列帧顺序，依次在该Canvas画布上绘制，该原始素材的第一帧坐标为(0,0)，则第二帧为(0，4)，第三帧为(0，8)，第四帧为(0，12)，……，第八帧(0，28)，第九帧为(4，0)，第十帧为(4，4)，生成Canvas图像；如图6所示；
S32a-6.将Canvas图像存储至系统，并标记为P1；记录该Canvas图像中所绘制的每一帧的坐标数据，并标记为D1；
S32a-7.判断原始素材所含帧数M＝10是否大于限制方阵的最大总帧数N＝64；由于M≤N，直接执行S32a-8；
S32a-8.判断原始素材所含帧数M＝10是否大于限制方阵的最大总帧数N＝64；
由于M≤N，将P1保存为图片资源，并将D1合成JSON存储为动画配置数据；
所述P1、动画配置数据为目标素材。
S33.将执行步骤S32后所获取的目标素材，存储至系统。
步骤S4.所述截获显示动画指令，该指令采用如下方式实现：
S41.打开H5页面，读取P1、动画配置数据；
S42.在Canvas画布划定播放区域上，按动画配置数据所携带的序列帧顺序及坐标信息，将图片资源按帧绘制到播放区域，形成动画。
根据上述说明书的揭示和教导，本发明所属领域的技术人员还可以对上述实施方式进行变更和修改。因此，本发明并不局限于上面揭示和描述的具体实施方式，对发明的一些修改和变更也应当落入本发明的权利要求的保护范围内。此外，尽管本说明书中使用了一些特定的术语，但这些术语只是为了方便说明，并不对本发明构成任何限制。
Claims (10)
1.一种用于H5页面的序列帧动画制作方法，其特征在于：所述方法包括：
S1.截获创建界面指令，将所述创建界面指令携带的指令信息传送至系统；根据该指令信息，生成可操作界面；
S2.截获对可操作界面添加原始素材指令，将所述添加原始素材指令携带的指令信息传送至系统；根据该指令信息，在可操作界面上添加多类型的原始素材，并将原始素材存储至系统中，标记为等待预处理状态；
S3.截获对原始素材进行预处理指令，将所述预处理指令携带的指令信息传送至系统；根据该指令信息，对原始素材进行预处理为目标素材，并将所述目标素材保存至系统中；
S4.截获显示动画指令，将所述显示动画指令携带的指令信息传送至系统，根据该指令信息，读取目标素材并进行配置形成动画后，播放动画。
2.根据权利要求1所述的序列帧动画制作方法，其特征在于：所述截获对可操作界面添加原始素材指令，该指令采用如下方式实现：
S21.获取用户在可操作界面区域内的鼠标操作；
S22.判断是否存在点击添加原始素材按钮的鼠标操作，若是存在，执行步骤S23；
S23.若鼠标操作为：点击第一按钮，则执行步骤S23a；若鼠标操作为：点击第二按钮，则执行步骤S23b；若鼠标操作为：点击第三按钮，则执行步骤S23c；
S24.将执行步骤S23后获取到的原始素材添加至可操作界面，标记为等待预处理状态。
3.根据权利要求2所述的序列帧动画制作方法，其特征在于：
所述执行步骤S23a，包括：
S23a-1.接收原始素材，所述原始素材为组图，该组图内的图片具有特定排列顺序，且组中每张图片的尺寸均相同；
S23a-2.将该组图片中的每一张图标记为序列帧中的每一帧，并记录单帧的长宽值，以及该序列帧所包含的帧数；
所述执行步骤S23b，包括：
S23b-1.接收原始素材，所述原始素材为横排或竖排的长图片；
S23b-2.获取用户在可操作界面上输入的长图片参数，计算并存储单帧的长宽值以及该长图片包含的帧数，将该长图片的每一帧标记为序列帧中的每一帧；
所述执行步骤S23c，包括：
S23c-1.接收原始素材，所述原始素材为GIF动图；
S23c-2.将所述GIF动图解析成若干张图片，记录单帧的长宽值以及GIF动图所包含的帧数，并将该GIF动图的每一帧标记为序列帧中的每一帧。
4.根据权利要求1所述的序列帧动画制作方法，其特征在于：所述截获对原始素材进行预处理指令，该指令采用如下方式实现：
S31.创建Canvas画布；
S32.判断用户在Canvas画布上所创建的渲染环境，若渲染环境为WebGL模式，则执行步骤S32a；若渲染环境为2D模式，则执行步骤S32b；
S33.将执行步骤S32后所获取的目标素材，存储至系统。
5.根据权利要求4所述的序列帧动画制作方法，其特征在于：所述执行步骤S32a，包括：
S32a-1.获取状态为等待预处理的原始素材；
S32a-2.确定WebGL模式下渲染环境的最大长度阈值Max，设定WebGL模式下渲染环境的最大矩形区域为Max*Max，该区域为限制方阵；
其中：Max为2n，n≥1；
S32a-3.确定限制方阵Max*Max内可容纳原始素材的最大总帧数N，计算方式如下：
Nx＝[Max/x]；
Ny＝[Max/y]；
N＝Nx*Ny；
其中：
x、y分别为获取到的原始素材序列帧单帧尺寸的长度、宽度；
Nx为该限制方阵一行能容纳的帧数，Ny为该限制方阵容纳的行数；
N为该限制方阵容纳的最大总帧数；
S32a-4.确定保存限制方阵Max*Max所需的实际存储空间，计算方式如下：
X＝Nx*x；
Y＝Ny*y；
其中：X和Y为保存该限制方阵内所有帧需要的实际长度与宽度；
若原始素材所含帧数M大于限制方阵的最大总帧数N，则建立T个限制方阵Max*Max；其中：T＝[M/N]；
S32a-5.使用2D模式下渲染环境对原始素材进行预处理并保存，预处理方式如下：
创建长度为X、宽度为Y的Canvas画布，按照原始素材的序列帧顺序，依次在该Canvas画布上绘制，假设该原始素材的第一帧坐标为(0,0)，则第二帧为(0，x)，第三帧为(0，x*2)，……，第Nx帧为(0，x*(Nx-1))，第Nx+1帧为(y，0)，第Nx+2帧为(y，x)，第Nx+3帧为(y，x*2)，……，依次类推，直到原始素材最后一帧在Canvas画布的第Ny行绘制完成，生成Canvas图像；
S32a-6.将Canvas图像存储至系统，并标记为P1；记录该Canvas图像中所绘制的每一帧的坐标数据，并标记为D1；
S32a-7.判断原始素材所含帧数M是否大于限制方阵的最大总帧数N；若M≤N，则直接执行S32a-8；若M＞N，则清空Canvas画布的绘制内容，并绘制剩下(T-1)个限制方阵的内容，生成Canvas图像存储至系统，并标记为P2、P3……PT；同时记录每张Canvas图像中所绘制的每一帧的坐标数据，并标记为D2、D3……DT；
S32a-8.判断原始素材所含帧数M是否大于限制方阵的最大总帧数N；
若M≤N，则将P1保存为图片资源，并将D1合成JSON存储为动画配置数据；
若M＞N，则将P1、P2、P3……PT保存为图片资源，并将D1、D2、D3……DT合成JSON存储为动画配置数据；
所述P1、P2、P3……PT、动画配置数据为目标素材。
6.根据权利要求4所述的序列帧动画制作方法，其特征在于：所述执行步骤S32b，包括：
S32b-1.获取状态为等待预处理的原始素材；
S32b-2.创建长度为X，宽度为Y的Canvas画布；其中：长度X为原始素材所含总帧数M乘以单帧长度x，即X＝M*x；宽度Y为原始素材所含总帧数M乘以单帧宽度y，即Y＝M*y；
S32b-3.按照原始素材的序列帧顺序，从左到右依次在该Canvas画布上绘制，每一帧占据长度为x，宽度为y的区域，直到原始素材最后一帧在该Canvas画布上绘制完成，生成Canvas图像；
S32b-4.将Canvas图像存储至系统，并保存为图片资源；同时将每帧的坐标发送至系统存储为动画配置数据。
7.根据权利要求1所述的序列帧动画制作方法，其特征在于：所述截获显示动画指令，该指令采用如下方式实现：
S41.打开H5页面，读取目标素材；
S42.在Canvas画布划定播放区域上，按动画配置数据所携带的序列帧顺序及坐标信息，将图片资源按帧绘制到播放区域，形成动画。
8.一种用于H5页面的序列帧动画制作系统，其特征在于：所述系统包括：
创建界面模块，用于用户通过终端设备在网页上创建可操作界面；
原始素材添加模块，用于获取用户选取的原始素材，并将其发送至可操作界面，并将置于可操作界面的原始素材标记为等待预处理状态；
原始素材预处理模块，用于获取标记为等待预处理状态的原始素材，并处理为目标素材后发送至动画显示模块；
动画显示模块，用于将目标素材配置形成动画后，进行播放；
所述原始素材添加模块包括：
鼠标位置判断单元，用于获取用户在可操作界面的鼠标位置以及操作；
操作信息提取单元，用于提取用户在可操作界面的鼠标操作信息，并发送至序列帧生成模块；
序列帧生成单元，用于根据鼠标操作信息，将不同类型的原始素材处理为序列帧，标记为等待预处理状态，并将该序列帧存储至系统；
所述原始素材预处理模块包括：
Canvas画布创建单元，用于创建Canvas画布；
渲染环境创建单元，用于用户在Canvas画布上创建WebGL模式渲染环境或2D模式渲染环境；
WebGL模式处理单元，用于将等待预处理状态的原始素材，在WebGL模式渲染环境下，进行预处理，生成目标素材，并存储至系统；
2D模式处理单元，用于将等待预处理状态的原始素材，在2D模式渲染环境下，进行预处理，生成目标素材，并存储至系统；
所述动画显示模块包括：
目标素材配置单元，用于读取目标素材，所述目标素材包括图片资源与动画配置数据，所述图片资源根据动画配置数据所携带的信息，按帧发送至图片资源播放单元；
动画播放单元，用于接收图片资源，在绘制区域内循环地进行绘制、擦除单帧图片，即绘制一帧、擦除、再绘制一帧、再擦除一帧的循环，将动画展现出来。
9.一种电子装置，其特征在于：包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时，实现如权利要求1-7中任一所述的序列帧动画制作方法。
10.一种计算机可读介质，其上存储有计算机程序，其特征在于：该程序被处理器执行时实现如权利要求1-7中任一所述的序列帧动画制作方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811439446.9A CN109636885B (zh) | 2018-11-28 | 2018-11-28 | 一种用于h5页面的序列帧动画制作方法和系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811439446.9A CN109636885B (zh) | 2018-11-28 | 2018-11-28 | 一种用于h5页面的序列帧动画制作方法和系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109636885A true CN109636885A (zh) | 2019-04-16 |
| CN109636885B CN109636885B (zh) | 2023-07-04 |
Family
ID=66070035
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811439446.9A Active CN109636885B (zh) | 2018-11-28 | 2018-11-28 | 一种用于h5页面的序列帧动画制作方法和系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109636885B (zh) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110111279A (zh) * | 2019-05-05 | 2019-08-09 | 腾讯科技（深圳）有限公司 | 一种图像处理方法、装置及终端设备 |
| CN110717135A (zh) * | 2019-09-20 | 2020-01-21 | 广州坚和网络科技有限公司 | 一种用于广告信息展示的列表中镂空卡片信息展示方法 |
| CN110989878A (zh) * | 2019-11-01 | 2020-04-10 | 百度在线网络技术（北京）有限公司 | 小程序中的动画展示方法、装置、电子设备及存储介质 |
| CN111640170A (zh) * | 2020-04-17 | 2020-09-08 | 深圳市大富网络技术有限公司 | 骨骼动画生成方法、装置、计算机设备及存储介质 |
| CN113885830A (zh) * | 2021-10-25 | 2022-01-04 | 北京字跳网络技术有限公司 | 一种音效展示方法及终端设备 |
| CN114445313A (zh) * | 2022-01-28 | 2022-05-06 | 北京百度网讯科技有限公司 | 图像处理方法及装置、电子设备和存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107610207A (zh) * | 2017-10-23 | 2018-01-19 | 北京奇艺世纪科技有限公司 | 一种生成gif图片的方法、装置及系统 |
| WO2018050003A1 (zh) * | 2016-09-14 | 2018-03-22 | 阿里巴巴集团控股有限公司 | 3D canvas网页元素的渲染方法、装置及电子设备 |
| CN108665520A (zh) * | 2018-04-24 | 2018-10-16 | 微梦创科网络科技（中国）有限公司 | 一种页面动画渲染的方法及装置 |
-
2018
- 2018-11-28 CN CN201811439446.9A patent/CN109636885B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2018050003A1 (zh) * | 2016-09-14 | 2018-03-22 | 阿里巴巴集团控股有限公司 | 3D canvas网页元素的渲染方法、装置及电子设备 |
| CN107610207A (zh) * | 2017-10-23 | 2018-01-19 | 北京奇艺世纪科技有限公司 | 一种生成gif图片的方法、装置及系统 |
| CN108665520A (zh) * | 2018-04-24 | 2018-10-16 | 微梦创科网络科技（中国）有限公司 | 一种页面动画渲染的方法及装置 |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110111279A (zh) * | 2019-05-05 | 2019-08-09 | 腾讯科技（深圳）有限公司 | 一种图像处理方法、装置及终端设备 |
| CN110717135A (zh) * | 2019-09-20 | 2020-01-21 | 广州坚和网络科技有限公司 | 一种用于广告信息展示的列表中镂空卡片信息展示方法 |
| CN110989878A (zh) * | 2019-11-01 | 2020-04-10 | 百度在线网络技术（北京）有限公司 | 小程序中的动画展示方法、装置、电子设备及存储介质 |
| CN110989878B (zh) * | 2019-11-01 | 2021-07-20 | 百度在线网络技术（北京）有限公司 | 小程序中的动画展示方法、装置、电子设备及存储介质 |
| CN111640170A (zh) * | 2020-04-17 | 2020-09-08 | 深圳市大富网络技术有限公司 | 骨骼动画生成方法、装置、计算机设备及存储介质 |
| CN113885830A (zh) * | 2021-10-25 | 2022-01-04 | 北京字跳网络技术有限公司 | 一种音效展示方法及终端设备 |
| CN114445313A (zh) * | 2022-01-28 | 2022-05-06 | 北京百度网讯科技有限公司 | 图像处理方法及装置、电子设备和存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109636885B (zh) | 2023-07-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109636885A (zh) | 一种用于h5页面的序列帧动画制作方法和系统 | |
| Baggio | Mastering OpenCV with practical computer vision projects | |
| CN110377285B (zh) | 一种生成页面骨架屏的方法、装置及计算机设备 | |
| CN110703978B (zh) | 信息显示方法、阅读器以及计算机存储介质 | |
| TWI598753B (zh) | Web page display method and web page display device based on graphic processing | |
| CN108959392B (zh) | 在3d模型上展示富文本的方法、装置及设备 | |
| CN111752557A (zh) | 一种展示方法及装置 | |
| CN112073794B (zh) | 动画处理方法、装置、计算机可读存储介质和计算机设备 | |
| CN104850388A (zh) | 网页绘制方法及装置 | |
| CN106095437A (zh) | 用户界面从右到左rtl的布局方式的实现方法及装置 | |
| CN111951356B (zh) | 基于json数据格式的动画渲染方法 | |
| CN109445891B (zh) | 画面组态及展示方法、装置、计算机可读存储介质 | |
| CN104866318A (zh) | 一种多窗口中标签页的展示方法及装置 | |
| CN111459501A (zh) | 基于SVG的Web组态画面存储与展示系统和方法及介质 | |
| Petzold | Programming Windows Phone 7 | |
| CN115439609B (zh) | 基于地图服务的三维模型渲染方法、系统、设备及介质 | |
| CN103606179A (zh) | 一种动画图像显示方法及装置 | |
| Kelly et al. | Basic introduction to pygame | |
| US20130063464A1 (en) | Primitive rendering using a single primitive type | |
| CN106126084B (zh) | 一种用于电纸墨水屏幕的显示方法 | |
| CN110781425A (zh) | 移动端h5页面的显示方法、装置、设备及存储介质 | |
| Haase et al. | Filthy rich clients: Developing animated and graphical effects for desktop java applications | |
| CN113835684B (zh) | 自动生成图片配置文件的方法及装置 | |
| CN115391692A (zh) | 视频处理方法和装置 | |
| CN111625237B (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |