页面动画的播放方法、装置及电子设备与流程

本发明涉及动画播放的，尤其是涉及一种页面动画的播放方法、装置及电子设备。

背景技术：

1、随着移动设备和网络技术的发展，大量网站为了丰富网页内容，吸引用户目光，在网页中添加了很多动画效果。基于浏览器内核对网页的解析原理，存在一种css(cascadingstyle sheets，级联样式表)动画。浏览器将网页文档，如html(hypertext markuplanguage，超文本标记语言)文档，解析为dom(document object model，文档对象模型)树和css文件，通过css文件对各个dom节点的页面元素进行渲染。那么对于某个页面元素，如果在不同的时间下，在不同位置、形状、颜色等方面对其以css样式规定，该页面元素则会根据上述css样式，随着时间在不同位置、以不同形态进行渲染展示，即在页面中实现了动画效果。

2、但是，css动画在一般是预先设置在相应的dom节点上的，一旦设置会立即播放，即便该节点并不在可视窗口之内，也会进行播放，往往使用户难以看到完整的动画，所以用户体验并不友好。

技术实现思路

1、有鉴于此，本发明的目的在于提供一种页面动画的播放方法、装置及电子设备，以缓解上述技术问题。

2、第一方面，本发明实施例提供了一种页面动画的播放方法，所述方法包括：响应页面展示动作，遍历目标页面，以基于预设的动画属性从所述目标页面的节点中选取至少一个目标节点；其中，目标节点为配置有动画样式的节点；生成包含所述目标节点和所述目标节点所配置的动画样式的属性值的节点动画属性映射表；清除所述目标节点所配置的所述动画属性，并在图形用户界面展示所述目标页面；监听所述目标节点是否在所述图形用户界面对应的可视范围内；如果是，基于所述节点动画属性映射表在所述目标节点播放所述动画样式对应的动画。

3、结合第一方面，本发明实施例提供了第一方面的第一种可能的实施方式，其中，上述每个所述目标节点均对应配置有第一监听事件；所述监听所述目标节点是否在所述图形用户界面对应的可视范围内的步骤包括：响应针对于所述目标页面的滚动操作，在所述目标页面的滚动过程中，通过所述第一监听事件监听所述目标节点是否在所述图形用户界面对应的可视范围内。

4、结合第一方面的第一种可能的实施方式，本发明实施例提供了第一方面的第二种可能的实施方式，其中，上述通过所述第一监听事件监听所述目标节点是否在所述图形用户界面对应的可视范围内的步骤，包括：获取所述第一监听事件对应的回调函数的返回值；如果所述返回值为预设的第一返回值，则确定所述目标节点在所述图形用户界面对应的可视范围内；其中，所述第一返回值为所述目标节点在所述图形用户界面对应的可视范围内时配置的函数返回值；如果所述返回值为预设的第二返回值，则确定所述目标节点不在所述图形用户界面对应的可视范围内，其中，所述第二返回值为所述目标节点不在所述图形用户界面对应的可视范围内时配置的函数返回值。

5、结合第一方面，本发明实施例提供了第一方面的第三种可能的实施方式，其中，上述节点动画属性映射表用于记录所述目标节点以及该目标节点所配置的动画样式的属性值的对应关系；基于所述节点动画属性映射表在所述目标节点播放所述动画样式对应的动画的步骤，包括：在所述节点动画属性映射表中查找所述目标节点对应的动画样式；将所述动画样式添加至所述目标节点，并触发所述目标节点播放所述动画样式对应的动画。

6、结合第一方面，本发明实施例提供了第一方面的第四种可能的实施方式，其中，上述每个所述目标页面均对应配置有第二监听事件；所述方法还包括：在所述目标节点播放所述动画样式对应的动画过程中，通过所述第二监听事件监听针对于所述目标页面的切换操作；如果监听到第一切换操作，则为所述目标节点配置第一标签，以暂停所述目标节点的动画的播放过程；其中，所述第一切换操作用于将所述图形用户界面对应的可视范围内的所述目标页面切换至其他页面；所述第一标签用于暂停所述目标节点的动画的播放过程。

7、结合第一方面的第四种可能的实施方式，本发明实施例提供了第一方面的第五种可能的实施方式，其中，上述方法还包括：如果监听到针对于所述图形用户界面的第二切换操作，则为所述目标节点配置第二标签，以在所述目标节点继续播放所述动画样式对应的动画；其中，所述第二切换操作用于将所述图形用户界面对应的可视范围从其他页面切换至所述目标页面；所述第二标签用于播放所述目标节点的动画。

8、结合第一方面，本发明实施例提供了第一方面的第六种可能的实施方式，其中，上述遍历目标页面，以基于预设的动画属性从所述目标页面的节点中选取至少一个目标节点的步骤，包括：遍历所述目标页面，从所述目标页面的节点中选取动画属性为所述预设的动画属性的节点为目标节点。

9、第二方面，本发明实施例还提供一种页面动画的播放装置，所述装置包括：遍历模块，用于响应页面展示动作，遍历目标页面，以基于预设的动画属性从所述目标页面的节点中选取至少一个目标节点；其中，目标节点为配置有动画样式的节点；保存模块，用于生成包含所述目标节点和所述目标节点所配置的动画样式的属性值的节点动画属性映射表；清除模块，用于清除所述目标节点所配置的所述动画属性，并在图形用户界面展示所述目标页面；监听模块，用于监听所述目标节点是否在所述图形用户界面对应的可视范围内；播放模块，用于所述监听模块的监听结果为是时，基于所述节点动画属性映射表在所述目标节点播放所述动画样式对应的动画。

10、第三方面，本发明实施例还提供一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的方法的步骤。

11、第四方面，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行上述第一方面所述的方法的步骤。

12、本发明实施例带来了以下有益效果：

13、本发明实施例提供的一种页面动画的播放方法、装置及电子设备，能够响应页面展示动作，遍历目标页面，以基于预设的动画属性从目标页面的节点中选取至少一个配置有动画样式的目标节点；生成包含目标节点和目标节点所配置的动画样式的属性值的节点动画属性映射表；并清除目标节点所配置的动画属性，然后在图形用户界面展示目标页面；监听目标节点是否在图形用户界面对应的可视范围内；如果是，则基于节点动画属性映射表在目标节点播放动画样式对应的动画，通过监听每个目标节点是否在可视范围内，可以在目标节点进入到可视范围内时，去控制在目标节点播放动画样式对应的动画，可以避免动画提前播放而导致的用户无法看到完整动画的情形，有效提升了用户体验。

14、本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

15、为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。