CN107608993B - 网页动画生成的方法和装置 - Google Patents

Abstract

本发明涉及一种网页动画生成的方法和装置，所述方法包括：获取动画绘制参数，动画绘制参数包括图形样式参数和图形属性参数，图形属性参数包括运动速度，创建Canvas画布，将动画绘制参数传递至配置接口，以使配置接口根据动画绘制参数建立与图形样式参数对应的第一速度对象实例，根据图形属性参数确定第一速度对象实例的当前位置，根据当前位置在Canvas画布绘制与第一速度对象实例对应的物体对象，清除Canvas画布，进入下一帧后进入根据图形属性参数确定第一速度对象实例的当前位置的步骤，能方便灵活的生成可控的动画。

Description

网页动画生成的方法和装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种网页动画生成的方法和装置。

背景技术

随着计算机和网络技术的发展，网页内容不断丰富化，展示效果也不断增强，在网页浏览过程中，经常会包含动画效果，如对于天气内容的网页展示带有下雨下雪等动画。

传统的网页动画生成的方法有的使用DOM节点加CSS3(Cascading StyleSheet，层叠样式表)动画，由于涉及到大量DOM节点以及DOM节点操作，会造成页面重绘重排现象，且CSS3动画过程不可控。有的使用gif图片，gif图片占用空间大，加载时间长，且无法控制动画状态。

发明内容

基于此，有必要针对上述技术问题，提供一种网页动画生成的方法和装置，能方便灵活的生成可控的动画。

一种网页动画生成的方法，所述方法包括：

获取动画绘制参数，所述动画绘制参数包括图形样式参数和图形属性参数，所述图形属性参数包括运动速度，创建Canvas画布；

将所述动画绘制参数传递至配置接口，以使配置接口根据所述动画绘制参数建立与所述图形样式参数对应的第一速度对象实例；

根据所述图形属性参数确定所述第一速度对象实例的当前位置；

根据所述当前位置在所述Canvas画布绘制与所述第一速度对象实例对应的物体对象；

清除所述Canvas画布，进入下一帧后进入所述根据所述图形属性参数确定所述第一速度对象实例的当前位置的步骤。

一种网页动画生成的装置，所述装置包括：

初始化模块，用于获取动画绘制参数，所述动画绘制参数包括图形样式参数和图形属性参数，所述图形属性参数包括运动速度，创建Canvas画布；

对象实例建立模块，用于将所述动画绘制参数传递至配置接口，以使配置接口根据所述动画绘制参数建立与所述图形样式参数对应的第一速度对象实例；

渲染模块，用于根据所述图形属性参数确定所述第一速度对象实例的当前位置，根据所述当前位置在所述Canvas画布绘制与所述第一速度对象实例对应的物体对象；

循环模块，用于清除所述Canvas画布，进入下一帧后进入所述渲染模块根据所述图形属性参数确定所述第一速度对象实例的当前位置。

上述网页动画生成的方法和装置，通过获取包括图形样式参数和图形属性参数的动画绘制参数，图形属性参数包括运动速度，创建Canvas画布，将动画绘制参数传递至配置接口，以使配置接口根据动画绘制参数建立与图形样式参数对应的第一速度对象实例，根据图形属性参数确定第一速度对象实例的当前位置，根据当前位置在Canvas画布绘制与第一速度对象实例对应的物体对象，清除Canvas画布，进入下一帧后进入根据图形属性参数确定所述第一速度对象实例的当前位置的步骤，只需要通过配置接口传递动画绘制参数就可通过动画绘制参数确定对应的动画展示状态，可随意控制动画状态，不需要关注动画的具体实现，将动画的具体实现通过一个封装的组件完成，可通过配置不同的动画绘制参数灵活方便的生成不同的动画，提高了动画状态控制的便利性与可拓展性，减少了动画开发的难度，提高了动画开发的效率。

附图说明

图1为一个实施例中网页动画生成的方法的应用环境图；

图2为一个实施例中图1中终端的内部结构图；

图3为一个实施例中网页动画生成的方法的流程图；

图4为一个实施例中获取动画绘制参数的流程图；

图5为一个实施例中设置requestAnimFrame接口的代码示意图；

图6为一个实施例中调整速度对象实例的个数的代码示意图；

图7为一个实施例中网页动画生成的装置的结构框图；

图8为一个实施例中初始化模块的结构框图；

图9为另一个实施例中网页动画生成的装置的结构框图；

图10为再一个实施例中网页动画生成的装置的结构框图；

图11为又一个实施例中网页动画生成的装置的结构框图；

图12为另一个实施例中网页动画生成的装置的结构框图；

图13为又一个实施例中网页动画生成的装置的结构框图；

图14为一个具体的实施例中网页动画生成组件的组件架构图；

图15为一个具体的实施例中生成的下雨动画示意图和下雪动画示意图。

具体实施方式

图1为一个实施例中网页动画生成的方法运行的应用环境图。如图1所示，该应用环境包括终端110、服务器120，其中终端110和服务器120通过网络进行通信。

终端110可为智能手机、平板电脑、笔记本电脑、台式计算机等，但并不局限于此。终端110通过网络向服务器120发送网页数据请求，服务器120可以响应终端110发送的请求，终端110加载服务器120返回的网页数据并根据网页数据生成显示动画。

在一个实施例中，图1中的终端110的内部结构如图2所示，该终端110包括通过***总线连接的处理器、图形处理单元、存储介质、内存、网络接口、显示屏幕和输入设备。其中，终端110的存储介质存储有操作***，还包括网页动画生成的装置，该装置用于实现一种适用于终端的网页动画生成的方法。该处理器用于提供计算和控制能力，支撑整个终端110的运行。终端110中的图形处理单元用于至少提供显示界面的绘制能力，内存为存储介质中的网页动画生成的装置的运行提供环境，网络接口用于与服务器120进行网络通信，如发送网页数据请求至服务器120，接收服务器120返回的网页数据等。显示屏幕用于显示应用界面等，如显示动画等，输入设备用于接收用户输入的命令或数据等。对于带触摸屏的终端110，显示屏幕和输入设备可为触摸屏。

如图3所示，在一个实施例中，提供了一种网页动画生成的方法，以应用于上述应用环境中的终端来举例说明，包括如下步骤：

步骤S210，获取动画绘制参数，动画绘制参数包括图形样式参数和图形属性参数，所述图形属性参数包括运动速度，创建Canvas画布。

具体的，HTML5是第五次修改版本的超文本标记语言，即HTML(Hypertext MarkupLanguage)，是用于描述网页文档的一种标记语言。HTML文件是由HTML命令组成的描述性文本，通过HTML命令显示文字、图形、动画、声音、表格、链接等。在标准HTML5中Canvas是一个画布元素，可用于在网页上绘制图形，该元素标签可以直接在HTML上进行图形操作。当需要浏览网页时终端发送网页请求，获取到与网页对应的HTML文件，通过解析HTML文件显示网页。HTML5页面添加Canvas元素，相当于在网页上创建一个Canvas画布，就可在Canvas画布上进行绘制，实现动画的生成。动画绘制参数是决定动画的最终显示效果的参数，图形样式参数用于描述动画主体的整体样式，如雨滴、雪花等。图形属性参数用于描述动画主体的显示状态，包括静态和动态的状态，由于动画是动态的，图形属性参数包括运动速度，可通过运动速度得到动画主体在画布中不同帧具体的位置，其中一个物体对象就是一个动画主体，图形属性参数的种类和数值可根据需要展现的动画效果自定义。Canvas画布的大小可根据需要自定义，可将画布尺寸参数携带在动画绘制参数中，也可通过检测当前终端的屏幕大小实时生成自适应的画布尺寸，如画布尺寸为当前终端的屏幕尺寸的3/4，创建的画布包括画布标识，用于唯一标识一个画布。

在一个实施例中，图形属性参数还包括：重力参数、风向参数、风力参数、加速度参数、最大速度参数、最小速度参数、最大物体对象个数参数、最小物体对象个数参数、反弹参数中的至少一种。

具体的，重力参数用于描述动画是否支持重力，如向下运动的物体动画在具备重力参数时，能达到更逼真的效果。风向参数用于描述动画中风的方向，向上或向下，加速度参数用于描述动画主体的速度随时间的递增，最大速度参数用于规定动画主体运动的速度上限，最小速度参数用于规定动画主体运动的速度下限。最大物体对象个数参数用于描述动画主体的数目最大值、最小物体对象个数参数用于描述动画主体的数目最小值，反弹参数用于描述反弹动画主体的状态，包括数目、反弹速度、反弹方向等。图形属性参数可根据需要包括上述参数中的一个或多个，当包括多个参数时，多个参数之间相互作用，共同影响动画的显示状态。在一个具体的实施例中，包括如表格1所示的动画绘制参数。

表1

字段	类型	说明
			id	string	Canvas画布标识
type	string	动画主体选择样式
			Wind_power	number	风力
wind_direction	number	风向，正向为上，负向为下
			num_lever	number	递增速率
speed	array	动画主体最大、最小速度
			size	array	动画主体最大、最小面积
gravity	boolean	是否支持重力
			bounce	boolean	是否支持反弹
max_num	number	动画主体最大数目
			set	function	初始化设置

在一个实施例中，步骤S210中创建Canvas画布的步骤包括：获取屏幕像素比，根据屏幕像素比确定Canvas画布的尺寸，根据Canvas画布的尺寸创建Canvas画布。

具体的，屏幕像素比PDR量化了屏幕的物理分辨率和显示清晰度，PDR越大，可采用越大尺寸的Canvas画布，使得动画更精细，与屏幕像素比匹配。在一个实施例中，获取屏幕像素比后，判断屏幕像素比是否超过预设比例，如果超过，则根据屏幕像素比调整Canvas画布的尺寸，如Canvas画布的尺寸为屏幕像素比乘以基准画布尺寸，如iphone6是3倍像素比的手机，即DRP为3，将画布同比增大为基准画布尺寸的3倍。

步骤S220，将动画绘制参数传递至配置接口，以使配置接口根据动画绘制参数建立与图形样式参数对应的第一速度对象实例。

具体的，只需要通过配置接口传递动画绘制参数就可通过动画绘制参数确定对应的动画展示状态，可随意控制动画状态，不需要关注动画的具体实现，将动画的具体实现通过一个封装的组件完成，可通过配置不同的动画绘制参数灵活方便的生成不同的动画，提高了动画状态控制的便利性与可拓展性，减少了动画开发的难度，提高了动画开发的效率，通过接口配置简单高效。第一速度对象实例是指对速度对象类的实例化，速度对象类是对具有速度的物体的抽象，速度对象类的每个速度对象实例，都具有速度，包括横向速度和/或纵向速度，速度单位为位移像素/帧。第一速度对象实例根据动画绘制参数建立，如第一速度对象实例为下落物体对象实例，图形样式参数为雨滴，则建立的第一速度对象实例为雨滴速度对象实例，需要初始化的参数为雨滴对应的参数，根据图形属性参数确定第一速度对象实例的初始坐标、初始速度等。可以理解的是，如果动画绘制参数需要确定的速度对象实例为多个，则第一速度对象实例为多个，多个速度对象实例的图形样式可不同，如同时创建雨滴和雪花，表示天气状况为雨加雪，灵活方便。且每个速度对象实例可具有不同的图形属性参数，如雪花的形状和雨滴的大小都可不同，运动状态也可不同，如速度和加速度不同。

步骤S230，根据图形属性参数确定第一速度对象实例的当前位置，根据当前位置在Canvas画布绘制与第一速度对象实例对应的物体对象。

具体的，第一速度对象实例在不同的帧有不同的位置，随着动画播放时间的变化，可根据初始坐标、速度和其它的与运动相关的参数计算得到第一速度对象实例的当前位置。如当图形属性参数包括风向参数、风力参数、重力参数、加速度参数时，根据多个参数计算得到当前位置，如果图形属性参数包括最小速度和最大速度，还规定速度的上限和下限，避免动画主体的运动太快或太慢。根据当前位置在Canvas画布调用绘制方法绘制与第一速度对象实例对应的物体对象，如在当前位置(x，y)处绘制一个雨滴，如果第一速度对象实例为多个，则确定多个速度对象实例各自的当前位置，绘制不同的速度对象实例对应的物体对象，如在当前位置(w，t)处绘制另一个雨滴，在当前位置(u，v)处绘制一个雪花等。

步骤S240，清除Canvas画布，进入下一帧后进入所述步骤S230。

具体的，一帧绘制完毕后，可清除Canvas画布，再进入下一帧的绘制，根据图形属性参数确定第一速度对象实例随时间更新后的位置，在更新后的位置绘制第一速度对象实例对应的物体对象。在每帧绘制前，可通过动画回调读取当前帧帧对应的与上一帧不同的图形属性参数，进一步提高动画生成的灵活性。

本实施例中，通过获取包括图形样式参数和图形属性参数的动画绘制参数，图形属性参数包括运动速度，创建Canvas画布，将动画绘制参数传递至配置接口，以使配置接口根据动画绘制参数建立与图形样式参数对应的第一速度对象实例，根据图形属性参数确定第一速度对象实例的当前位置，根据当前位置在Canvas画布绘制与第一速度对象实例对应的物体对象，清除Canvas画布，进入下一帧后进入根据图形属性参数确定所述第一速度对象实例的当前位置的步骤，只需要通过配置接口传递动画绘制参数就可通过动画绘制参数确定对应的动画展示状态，可随意控制动画状态，不需要关注动画的具体实现，将动画的具体实现通过一个封装的组件完成，可通过配置不同的动画绘制参数灵活方便的生成不同的动画，提高了动画状态控制的便利性与可拓展性，减少了动画开发的难度，提高了动画开发的效率。

在一个实施例中，如图4所示，步骤S210中获取动画绘制参数的步骤包括：

步骤S211，获取第一动画绘制参数，第一动画绘制参数包括图形样式参数。

具体的，第一动画绘制参数可以只包括图形样式参数，图形属性参数可采用默认的预设参数，客户只需要选择图形样式，不需要设置其它的参数或只需要设置感兴趣的参数就可生成预设属性的动画，更简单方便。

步骤S212，判断第一动画绘制参数是否满足动画组件参数配置条件，如果不满足，则进入步骤S213，否则直接得到满足动画组件参数配置条件的动画绘制参数。

具体的，动画组件参数配置条件可根据需要自定义，动画组件参数配置条件可根据图形样式参数对应的动画主体必要属性确定，如对于下落物体动画需要向下方向的速度，如果第一动画绘制参数中向下方向的速度为0，则不满足动画组件参数配置条件，需要添加向下速度或重力参数后生成满足下落物体动画的动画绘制参数。动画组件参数配置条件可定义必须包含的图形属性参数，如果第一动画绘制参数不包含，则需要添加默认图形属性参数，默认图形属性参数可根据经验值设定。

步骤S213，获取图形样式参数对应的默认图形属性参数，根据图形样式参数和默认图形属性参数生成满足动画组件参数配置条件的动画绘制参数。

具体的，在第一动画绘制参数不满足动画组件参数配置条件时，获取图形样式参数对应的默认图形属性参数，进一步提高了接口使用的灵活性，不需要专业知识对动画绘制参数进行配置，降低了配置接口的使用难度。

在一个实施例中，根据图形属性参数确定第一速度对象实例的当前位置的步骤之后，还包括：监听动画事件，根据动画的绘制状态发送与动画事件匹配的通知消息至业务层，以使业务层响应所述动画事件。

具体的，动画事件用于在动画的过程中调用脚本的代码来进行操作，动画事件可由业务层根据需要自定义，如需要在动画开始播放前展示提示信息，则新建第一动画事件，第一动画事件的触发条件为动画开始绘制前时刻，则在即将开始动画绘制时，发送与第一动画件事件匹配的通知消息至业务层，如通知消息内容为动画绘制准备完毕，业务层收到此消息可执行与第一动画件事件对应的操作，如展示“动画即将播放”的提示信息。

在一个实施例中，动画事件包括动画开始前事件、动画开始中事件、动画结束事件中的至少一种。

具体的，动画开始前事件是触发条件为动画开始绘制前时刻的事件，动画开始中事件是触发条件为动画绘制过程中时刻的事件，动画结束事件是触发条件为动画绘制结束时刻的事件，动画事件可包括上述事件的一个或多个，可在动画绘制开始前、过程中，结束时执行其它的操作，完成业务层需要执行的操作，丰富动画展现内容。

在一个实施例中，步骤S220之后还包括：将所述第一速度对象实例加入对象列表中。步骤S240中清除Canvas画布，进入下一帧后进入所述步骤S230之后，还包括：根据动画绘制参数建立与图形样式参数对应的第二速度对象实例，将第二速度对象实例加入对象列表中，步骤S230包括：根据图形属性参数确定对象列表中的所有速度对象实例的当前位置，根据当前位置在Canvas画布绘制各个速度对象实例对应的物体对象。

具体的，对象列表用于按顺序存储依次建立的速度对象实例，在有多个速度对象实例时实现统一管理。当前帧绘制完毕，进入下一帧的绘制时，可根据动画绘制参数建立与图形样式参数对应的第二速度对象实例，新增加的第二速度对象实例的个数可为随机的或自定义的，随着动画帧的播放可自定义增加速度对象实例，随播放进度变化动画主体的个数，进一步提高了动画生成的灵活性，提高了动画效果的逼真性。每个新增加的速度对象实例都有对应的动画绘制参数，在进行动画渲染时，计算对象列表中的各个速度对象实例的当前位置，绘制各个速度对象实例对应的物体对象。

在一个实施例中，步骤S230中根据图形属性参数确定第一速度对象实例的当前位置的步骤之后，还包括：判断当前位置是否到达Canvas画布的下边缘，如果是，建立与图形样式参数对应的反弹对象实例，根据图形属性参数确定反弹对象实例的反弹当前位置，根据反弹当前位置在所述Canvas画布绘制与所述反弹对象实例对应的反弹对象。

具体的，反弹对象是指具有反弹属性的物体的抽象，反弹对象实例是反弹对象的实例化，如水滴溅起时的水珠等。可通过当前位置的纵坐标与Canvas画布的下边缘坐标进行比较判断当前位置是否到达Canvas画布的下边缘，如果动画绘制参数表征支持反弹对象，则建立与图形样式参数对应的反弹对象实例，图形样式参数中的反弹参数可规定反弹对象实例的具体状态，如反弹速度，反弹对象实例的大小等。根据图形属性参数确定反弹对象实例的反弹当前位置，从而进行绘制。可将反弹对象实例加入对象列表中，在下一次动画渲染时也需要渲染反弹对象实例。如果反弹对象实例的运动位置超出了Canvas画布的边缘，则反弹对象实例从对象列表中删除。通过增加反弹对象实例进一步增强了动画生成的灵活性和动画效果的逼真性。

在一个实施例中，所述方法还包括：根据网页浏览器前缀判断请求动画帧RAF接口是否可用，如果不可用，则获取预设渲染周期。

具体的，RAF(requestAnimFrame，请求动画帧)接口不需要指定循环间隔时间，浏览器会基于当前页面是否可见、CPU的负荷情况等来自行决定最佳的帧速率，从而更合理地使用CPU，得到流畅的动画效果。不同浏览器的内核不同，在调用时需要加上如webkit、moz等前缀才能使用方法requestAnimFrame，如通过如图5所示的代码可实现渐进增强地设置requestAnimFrame接口，如果当前浏览器不支持RAF接口，则可获取预设渲染周期。

在一个实施例中，方法还包括：获取相邻帧之间的渲染时间间隔，根据渲染时间间隔调整速度对象实例的个数。

具体的，相邻帧之间的渲染时间间隔是每一帧动画渲染的时间差，即下一帧动画开始前减去上一帧动画开始前。由于不同终端物理设备不同，相同的动画绘制参数在进行动画渲染时，耗时不同，需要控制渲染时间间隔在合理范围内，避免渲染时间太长画面不流畅。如果渲染时间间隔超过预设阈值，则减少速度对象实例的个数，减少的具体数目可根据渲染时间间隔自适应调整，如果渲染时间间隔后期达到预设阈值之内，则可自适应增加速度对象实例的个数，可通过相邻帧之间的渲染时间间隔自适应调整动画主体的数目，保证渲染效果和页面流畅性，如可通过如图6所示的代码进行调整。

在一个实施例中，如图7所示，提供了一种网页动画生成的装置，包括：

初始化模块310，用于获取动画绘制参数，动画绘制参数包括图形样式参数和图形属性参数，图形属性参数包括运动速度，创建Canvas画布。

对象实例建立模块320，用于将动画绘制参数传递至配置接口，以使配置接口根据动画绘制参数建立与图形样式参数对应的第一速度对象实例。

渲染模块330，用于根据图形属性参数确定第一速度对象实例的当前位置，根据当前位置在所述Canvas画布绘制与第一速度对象实例对应的物体对象。

循环模块340，用于清除Canvas画布，进入下一帧后进入渲染模块330根据图形属性参数确定第一速度对象实例的当前位置。

在一个实施例中，如图8所示，初始化模块310包括：

动画绘制参数获取单元311，用于获取第一动画绘制参数，第一动画绘制参数包括图形样式参数。

标准动画绘制参数生成单元312，用于判断第一动画绘制参数是否满足动画组件参数配置条件，如果不满足，则获取图形样式参数对应的默认图形属性参数，根据图形样式参数和默认图形属性参数生成满足动画组件参数配置条件的动画绘制参数。

在一个实施例中，如图9所示，装置还包括：

监听模块350，用于监听动画事件，根据动画的绘制状态发送与动画事件匹配的通知消息至业务层，以使业务层响应动画事件。

在一个实施例中，动画事件包括动画开始前事件、动画开始中事件、动画结束事件中的至少一种。

在一个实施例中，对象实例建立模块320还用于将第一速度对象实例加入对象列表中，如图10所示，装置还包括：

多实例对象建立模块360，用于根据动画绘制参数建立与图形样式参数对应的第二速度对象实例，将第二速度对象实例加入对象列表中。

渲染模块330还用于根据图形属性参数确定对象列表中的所有速度对象实例的当前位置，根据当前位置在所述Canvas画布绘制各个速度对象实例对应的物体对象。

在一个实施例中，如图11所示，装置还包括：

反弹对象实例建立模块370，用于判断当前位置是否到达Canvas画布的下边缘，如果是，则建立与图形样式参数对应的反弹对象实例。

渲染模块330还用于根据图形属性参数确定反弹对象实例的反弹当前位置，根据反弹当前位置在Canvas画布绘制与反弹对象实例对应的反弹对象。

在一个实施例中，图形属性参数还包括：重力参数、风向参数、风力参数、加速度参数、最大速度参数、最小速度参数、最大物体对象个数参数、最小物体对象个数参数、反弹参数中的至少一种。

在一个实施例中，如图12所示，装置还包括：

兼容模块380，用于根据网页浏览器前缀判断请求动画帧RAF接口是否可用，如果不可用，则获取预设渲染周期。

在一个实施例中，初始化模块310还用于获取屏幕像素比，根据屏幕像素比确定Canvas画布的尺寸，根据Canvas画布的尺寸创建Canvas画布。

在一个实施例中，如图13所示，装置还包括：

调整模块390，用于获取相邻帧之间的渲染时间间隔，根据渲染时间间隔调整速度对象实例的个数。

在一个具体的实施例中，网页动画生成的方法封装为一个网页动画生成组件，如图14所示，网页动画生成组件对外提供2个接口，分别为默认调用接口510和配置接口520，默认调用接口510和配置接口520都可调用组件的组成模块来完成网页动画的生成，可以通过默认调用接口510调用组件的默认动画绘制参数通过初始化操作模块530进行初始化，也可以通过配置接口520采用自定义的动画绘制参数调用样式设置模块540，样式设置模块540根据动画绘制参数建立对应的速度对象实例，根据图形属性参数确定速度对象实例的当前位置。样式设置操作执行后，动画的绘制状态改变，触发状态监听模块550发送与动画事件匹配的通知消息至业务层，以使业务层响应所述动画事件。然后调用动画渲染模块560根据当前位置在Canvas画布绘制与速度对象实例对应的物体对象。如图15所示，为一个具体的实施例中生成的下雨动画示意图，如图15a，下雪动画示意图，如图15b。

在一个具体的实施例中，网页动画生成组件包括速度对象，速度对象的实例包括下落物体对象实例和反弹对象实例，通过相应的方法连接三个对象之间的操作和实现本组件的功能逻辑操作。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述程序可存储于一计算机可读取存储介质中，如本发明实施例中，该程序可存储于计算机***的存储介质中，并被该计算机***中的至少一个处理器执行，以实现包括如上述各方法的实施例的流程。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (20)

1.一种网页动画生成的方法，所述方法包括：

获取物体对象的动画绘制参数，所述动画绘制参数包括图形样式参数和图形属性参数，创建Canvas画布；所述图形属性参数包括运动速度，以及重力参数、风向参数、风力参数、加速度参数、最大速度参数、最小速度参数、最大物体对象个数参数、最小物体对象个数参数、反弹参数中的至少一种，其中，包括至少两个参数时，不同参数之间相互作用，共同影响网页动画的显示状态；

将所述动画绘制参数传递至配置接口，以使配置接口根据所述动画绘制参数建立与所述图形样式参数对应的第一速度对象实例；第一速度对象实例是指对速度对象类的实例化，速度对象类是对具有速度的物体的抽象，速度对象类的每个速度对象实例，都具有速度；

根据所述图形属性参数计算得到所述第一速度对象实例的当前位置；

根据所述当前位置在所述Canvas画布绘制与所述第一速度对象实例对应的物体对象；

清除所述Canvas画布，进入下一帧后进入所述根据所述图形属性参数计算得到所述第一速度对象实例的当前位置；

根据所述动画绘制参数建立与所述图形样式参数对应的第二速度对象实例，将所述第二速度对象实例加入对象列表中，以适配不同的动画帧播放环境。

2.根据权利要求1所述的方法，其特征在于，所述获取动画绘制参数的步骤包括：

获取第一动画绘制参数，所述第一动画绘制参数包括图形样式参数；

判断所述第一动画绘制参数是否满足动画组件参数配置条件，如果不满足，则获取所述图形样式参数对应的默认图形属性参数；

根据所述图形样式参数和默认图形属性参数生成满足动画组件参数配置条件的动画绘制参数。

3.根据权利要求1所述的方法，其特征在于，所述根据所述图形属性参数确定所述第一速度对象实例的当前位置的步骤之后，还包括：

监听动画事件，根据动画的绘制状态发送与动画事件匹配的通知消息至业务层，以使业务层响应所述动画事件。

4.根据权利要求3所述的方法，其特征在于，所述动画事件包括动画开始前事件、动画开始中事件、动画结束事件中的至少一种。

5.根据权利要求1所述的方法，其特征在于，所述将所述动画绘制参数传递至配置接口，以使配置接口根据所述动画绘制参数建立与所述图形样式参数对应的第一速度对象实例的步骤之后，还包括；

将所述第一速度对象实例加入对象列表中；

所述根据所述图形属性参数确定所述第一速度对象实例的当前位置，根据所述当前位置在所述Canvas画布绘制与所述第一速度对象实例对应的物体对象的步骤包括：

根据所述图形属性参数确定所述对象列表中的所有速度对象实例的当前位置，根据所述当前位置在所述Canvas画布绘制各个速度对象实例对应的物体对象。

6.根据权利要求1所述的方法，其特征在于，所述根据所述图形属性参数确定所述第一速度对象实例的当前位置的步骤之后，还包括：

判断所述当前位置是否到达所述Canvas画布的下边缘，如果是，则建立与所述图形样式参数对应的反弹对象实例；

根据所述图形属性参数确定所述反弹对象实例的反弹当前位置；

根据所述反弹当前位置在所述Canvas画布绘制与所述反弹对象实例对应的反弹对象。

7.根据权利要求1所述的方法，其特征在于，所述方法还包括：

根据网页浏览器前缀判断请求动画帧RAF接口是否可用，如果不可用，则获取预设渲染周期。

8.根据权利要求1所述的方法，其特征在于，所述创建Canvas画布的步骤包括：

获取屏幕像素比，根据所述屏幕像素比确定所述Canvas画布的尺寸；

根据所述Canvas画布的尺寸创建Canvas画布。

9.根据权利要求1所述的方法，其特征在于，所述方法还包括：

获取相邻帧之间的渲染时间间隔，根据所述渲染时间间隔调整速度对象实例的个数。

10.一种网页动画生成的装置，其特征在于，所述装置包括：

初始化模块，用于获取物体对象的动画绘制参数，所述动画绘制参数包括图形样式参数和图形属性参数，创建Canvas画布；所述图形属性参数包括运动速度，以及重力参数、风向参数、风力参数、加速度参数、最大速度参数、最小速度参数、最大物体对象个数参数、最小物体对象个数参数、反弹参数中的至少一种，其中，包括至少两个参数时，不同参数之间相互作用，共同影响网页动画的显示状态；

对象实例建立模块，用于将所述动画绘制参数传递至配置接口，以使配置接口根据所述动画绘制参数建立与所述图形样式参数对应的第一速度对象实例；第一速度对象实例是指对速度对象类的实例化，速度对象类是对具有速度的物体的抽象，速度对象类的每个速度对象实例，都具有速度；

渲染模块，用于根据所述图形属性参数计算得到所述第一速度对象实例的当前位置，根据所述当前位置在所述Canvas画布绘制与所述第一速度对象实例对应的物体对象；

循环模块，用于清除所述Canvas画布，进入下一帧后进入所述渲染模块根据所述图形属性参数计算得到所述第一速度对象实例的当前位置；

多实例对象建立模块，用于根据所述动画绘制参数建立与所述图形样式参数对应的第二速度对象实例，将所述第二速度对象实例加入对象列表中，以适配不同的动画帧播放环境。

11.根据权利要求10所述的装置，其特征在于，所述初始化模块包括：

动画绘制参数获取单元，用于获取第一动画绘制参数，所述第一动画绘制参数包括图形样式参数；

标准动画绘制参数生成单元，用于判断所述第一动画绘制参数是否满足动画组件参数配置条件，如果不满足，则获取所述图形样式参数对应的默认图形属性参数，根据所述图形样式参数和默认图形属性参数生成满足动画组件参数配置条件的动画绘制参数。

12.根据权利要求10所述的装置，其特征在于，所述装置还包括：

监听模块，用于监听动画事件，根据动画的绘制状态发送与动画事件匹配的通知消息至业务层，以使业务层响应所述动画事件。

13.根据权利要求12所述的装置，其特征在于，所述动画事件包括动画开始前事件、动画开始中事件、动画结束事件中的至少一种。

14.根据权利要求10所述的装置，其特征在于，

所述渲染模块还用于根据所述图形属性参数确定所述对象列表中的所有速度对象实例的当前位置，根据所述当前位置在所述Canvas画布绘制各个速度对象实例对应的物体对象。

15.根据权利要求10所述的装置，其特征在于，所述装置还包括：

反弹对象实例建立模块，用于判断所述当前位置是否到达所述Canvas画布的下边缘，如果是，则建立与所述图形样式参数对应的反弹对象实例；

所述渲染模块还用于根据所述图形属性参数确定所述反弹对象实例的反弹当前位置，根据所述反弹当前位置在所述Canvas画布绘制与所述反弹对象实例对应的反弹对象。

16.根据权利要求10所述的装置，其特征在于，所述装置还包括：

兼容模块，用于根据网页浏览器前缀判断请求动画帧RAF接口是否可用，如果不可用，则获取预设渲染周期。

17.根据权利要求10所述的装置，其特征在于，所述初始化模块还用于获取屏幕像素比，根据所述屏幕像素比确定所述Canvas画布的尺寸，根据所述Canvas画布的尺寸创建Canvas画布。

18.根据权利要求10所述的装置，其特征在于，所述装置还包括：

调整模块，用于获取相邻帧之间的渲染时间间隔，根据所述渲染时间间隔调整速度对象实例的个数。

19.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至9中任一项所述的方法的步骤。

20.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至9中任一项所述的方法的步骤。