一种HTML5网页动画的精准定位动画帧方法与流程

一种html5网页动画的精准定位动画帧方法
技术领域
1.本发明涉及网页动画技术领域，尤其涉及一种html5网页动画的精准定位动画帧方法。


背景技术：

2.目前，随着互联网技术的不断发展，影视制作也有了较大的进步，在现在的动画产业领域就产生了许多互联网技术生成的动画。比如有图片形式的gif动画、webp动画、apng动画等；矢量类的css3动画、svg动画以及flash动画等。但是本技术发明人在实现本技术实施例中发明技术方案的过程中，发现上述技术至少存在如下技术问题：图片形式动画、矢量类动画、svg动画、flash动画等都存在无法停在动画的某一帧且根据数据动态变化并帧精确控制。然而，在实际使用中又需要准确获取某一帧，原因是：第一，其主要用于web端在线剪辑软件，为了用户更精确的控制动画元素和其它媒体的位置，更方便的编辑出自己想要的成品视频。第二，在web（浏览器）端，gif\webp\apng等动画形式没有api控制帧的定位，仅具备简单的从头播到尾或循环n次播放。第三，现有的图片动画是无法更改内容的，可以看作是一组固定的图片序列帧。
3.因此，急需要提出一种逻辑简单、准确可靠获取任一帧的html5网页动画的精准定位动画帧方法。


技术实现要素：

4.本技术实施例通过提供一种html5网页动画的精准定位动画帧方法，解决了现有技术中图片形式动画、矢量类动画、svg动画、flash动画等都存在无法停在动画的某一帧且根据数据动态变化并帧精确控制的问题，实现了在动画编辑工具中，能够精确到某一画面；解决动画在调整时长、数据、颜色、文字、字体等属性时，用户能即时看到动画的改变；每个动画模板具备自带的编目属性控件，对于外部渲染时，可跟据动画模板的编目属性渲染出不同的属性修改组件。
5.本技术通过本技术的一实施例提供如下技术方案：一种html5网页动画的精准定位动画帧方法，包括：初始化传入的参数，通过初始化传入参数将默认参数替换覆盖，得到config配置；通过资源管理器加载所需要的资源，加载完成后由所述资源管理器发出资源完成事件；所述资源完成事件由应用处理端接收，并通知文字渲染器开始初始化创建显示对象；所述文字渲染器初始化时间轴，为每个元素分配各自范围内的动画及状态；渲染界面通过gsap.时间轴改变每个元素的属性，由pixi引擎重绘界面，产生一帧新的画面。
6.优选的，每个动画模板自带编目属性控件，外部渲染时，可根据动画模板的编目属性渲染出不同的属性修改组件。
7.优选的，所述通过资源管理器加载所需要的资源，加载完成后由所述资源管理器发出资源完成事件，所述资源包括图片、json、文本等资源。
8.优选的，所述文字渲染器初始化创建显示对象完成后，动画编辑器加载动画编目属性；动画编辑器加载动画编目属性，并渲染对应的控件；编目属性至针对自身模板进行改变。
9.优选的，动画编辑器加载动画编目属性包括：动画文字属性改变，通过动画编辑器调用动画的setconfing方法，传入文字属性，所述文字即时被渲染。
10.优选的，动画编辑器加载动画编目属性还包括：动画文本改变，通过动画编辑器调用动画类的setcontent方法，传入新文本，动画重新创建新的文本，清空旧文本并添加新的元素。
11.优选的，动画编辑器加载动画编目属性还包括：动画时长改变，通过动画编辑器调用动画类setduration方法，传入时长，将重新初始化时间轴，当前动画时长改变新的时长。
12.优选的，动画编辑器加载动画编目属性包括：动画高宽改变，通过动画编辑器调用动画类resizepreset方法，传入高宽，实现显示大小转换，所述高宽可支持0-8192数值。
13.优选的，动画编辑器加载动画编目属性包括：动画的变换改变，动画编辑器通过自由变换组件得到变换参数，通过动画编辑器调用settransfrom方法，改变动画主体的位置、角度及大小。
14.优选的，所述文字渲染器初始化时间轴，为每个元素分配各自范围内的动画及状态，包括：设置入动画时长和出动画时长，动画编辑器调用动画的 setinanimduration 和动画的 setoutanimduration方法，传入新的入时长和出时长，改变动画显示速度。
15.优选的，所述文字渲染器初始化时间轴，为每个元素分配各自范围内的动画及状态还包括：定位动画在某一时间点，动画编辑器调用动画的seek方法，传入时间点，将自动定位到该时间点的画面，定位时间精确到三位小数。
16.优选的，所述定位动画在某一时间点，若动画编辑器反复调用seek方法，则会出现播放或倒播。
17.本技术实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：由于采用了文字渲染器初始化时间轴，为每个元素分配自己范围内的动画及状态；渲染界面通过gsap.时间轴改变每个元素的属性，由pixi引擎重绘界面，产生一帧新的画面。进而实现了能够精确到某一画面；解决动画在调整时长、数据、颜色、文字、字体等属性时，用户能即时看到动画的改变；每个动画模板具备自带的编目属性控件，对于外部渲染时，可跟据动画模板的编目属性渲染出不同的属性修改组件。
附图说明
18.为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
19.图1为本技术实施例提供的流程示意图；图2为本技术实施例提供的虚拟装置示意图；
图3为本技术实施例提供的系统示意图。
具体实施方式
20.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
21.参见图1—图3所示，一种html5网页动画的精准定位动画帧方法，包括：s101：初始化传入的参数，通过初始化传入参数将默认参数替换覆盖，得到config配置；其中，config配置包括字体、字号、颜色、位置和大小等参数，通过初始化传入参数将默认参数进行替换，为pixi.js引擎进一步处理提供条件s102：通过资源管理器201加载所需要的资源，加载完成后由所述资源管理器201发出资源完成事件；其中，所需要的资源包括网页动画参数、资源包括图片、json和文本等各种资源。
22.具体地，网页动画参数包括config配置中的字体、字号、颜色、位置和大小参数等，动画参数中所用的文字可以由多组文字构成。资源管理器201加载完成后由资源管理器201发出资源完成事件。
23.s103：所述资源完成事件由应用处理端202接收，并通知文字渲染器203开始初始化创建显示对象；文字渲染器203接收到应用处理端202发出的通知，对所加载的资源文字部分进行渲染；具体为，对所创建的图标和汉字进行渲染。
24.s104：所述文字渲染器203初始化时间轴，为每个元素分配各自范围内的动画及状态；s105：渲染界面通过gsap.时间轴改变每个元素的属性，由pixi引擎重绘界面，产生一帧新的画面。
25.具体来说，所述每个元素的属性包括动画高宽、动画时长、动画文本和动画出入时间及总时长等。
26.在本发明的一种实施例中，每个动画模板自带编目属性控件，外部渲染时，可根据动画模板的编目属性渲染出不同的属性修改组件。
27.具体来说，动画编辑器204加载动画编目属性，并渲染对应的控件；编目属性至针对自身模板进行改变。大部分的的加载资源都存在字号、字体、颜色、粗细、描边和对齐等编目属性，可以在外部渲染时对编目属性进行修改得到效果更好的动画。
28.在本发明的一种实施例中，所述文字渲染器初始化创建显示对象完成后，动画编辑器加载动画编目属性包括：对文字的渲染为动画文字属性改变，通过动画编辑器204调用动画的setconfing方法，传入文字属性，所述文字即时被渲染。其中可以改变文字字体，颜色和轮廓等，文字的字体包括但不限于汉仪酷雅黑和汉仪中圆简、汉仪行楷简等；还涉及动画文本改变，通过动画编辑器204调用动画类的setcontent方法，传入新文本，动画重新创
建新的文本，清空旧文本并添加新的元素。
29.在本发明的一种实施例中，所述文字渲染器初始化创建显示对象完成后，动画编辑器加载动画编目属性还包括：对动画的改变涉及动画的时长改变、动画高宽改变和动画的变换改变。
30.具体地，动画时长改变，通过动画编辑器204调用动画类setduration方法，传入时长，将重新初始化时间轴，当前动画时长改变新的时长。例如：动画编辑器204或播放器调用动画类的setduration方法，传入10000，即可将当前动画的时长从5000毫秒变为10000毫秒。动画此时需要重新初始化时间轴，将时间轴的长度修改为10000毫秒。
31.具体地，动画高宽改变，通过动画编辑器204调用动画类resizepreset方法，传入高宽，实现显示大小转换，所述高宽可支持0-8192数值。例如：动画编辑器204或播放器调用动画类的resizepreset方法，传入新的高宽(1080,1920)，则将动画的宽度从1920改为1080，高度从1080改为1920，实现了横竖屏的转换，并可支持任意大于0，小于8192的数值。
32.具体地，动画的变换改变，动画编辑器204通过自由变换组件得到变换参数，通过动画编辑器204调用settransfrom方法，改变动画主体的位置、角度及大小。
33.在本发明的一种实施例中，设置入动画时长和出动画时长，动画编辑器204调用动画的 setinanimduration 和动画的 setoutanimduration方法，传入新的入时长和出时长，改变动画显示速度。对于某些动画模板，具有入动画和出动画属性。
34.则可调用动画的 setinanimduration 和动画的 setoutanimduration方法，传入新的入出时长，以延缓动画出现消失的时间或加快动画出现消失的时间。
35.setinanimduration(500) 将动画的出现时间改为500毫秒，加快动画显示。
36.setoutanimduration（1500）将动画的消失时间改为1500毫秒，延缓动画的消失。
37.定位动画在某一时间点，动画编辑器204调用动画的seek方法，传入时间点，将自动定位到该时间点的画面，定位时间精确到三位小数。具体原理如下：时间轴在初始化时，已经规定每个文字出现的时机及当时的属性值。每个字皆有动画，则需要将总时长分配给每个字，例如：每个字分得的时长为 5000/8=625ms。对于文字所需要添加动画：第一个文字从0-625ms，文字高度由正常高度变低再变正常高度；第二个文字从625ms-1250ms，文字高度由正常高度变低再变正常高度；依次为所有文字添加动画。收到新的时间点参数，修改每个文字当前的属性值，则产生一帧新的画面。
38.在本发明的一种实施例中，所述定位动画在某一时间点，若动画编辑器204反复调用seek方法，则会出现播放或倒播。动画编辑器204或播放器调用动画的play方法,即可使动画从当前时间播放至结尾。动画编辑器204或播放器通过接收动画的时间头改变事件，则可更新当前动画时间头的显示。动画编辑器204或播放器调用动画的pause方法,则可将正在播放的动画暂停。
39.上述本技术实施例中的技术方案，至少具有如下的技术效果或优点：由于采用了文字渲染器203初始化时间轴，为每个元素分配自己范围内的动画及状态；渲染界面通过gsap.时间轴改变每个元素的属性，由pixi引擎重绘界面，产生一帧新的画面。进而实现了能够精确到某一画面；解决动画在调整时长、数据、颜色、文字、字体等属性时，用户能即时看到动画的改变；每个动画模板具备自带的编目属性控件，对于外部渲
染时，可跟据动画模板的编目属性渲染出不同的属性修改组件。
40.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、cd-rom、光学存储器等）上实施的计算机程序产品的形式。
41.本发明是参照根据本发明实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。
42.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。
43.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。
44.尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
45.显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。