[发明专利]动画的响应式驱动方法、装置及电子设备

说明书

本发明提供一种动画的响应式驱动方法、装置及电子设备，其中，方法包括：通过获取页面元素，获取被操作对象，将所述被操作对象赋予监听属性，在赋值器中将所述被操作对象与所述页面元素的预设属性进行关联，所述赋值器包括集中监听式赋值器。由于中是集中式监听，所有的动画逻辑都可以在一个集中点对DOM更新，易于减少不必要的中间步骤，控制DOM的回流和重绘，从而提高了性能。

技术领域

本发明是涉及计算机技术领域，尤其涉及一种动画的响应式驱动方法、装置及电子设备。

背景技术

基于文档对象模型(Document Object Model，DOM)的WEB动画一直以来都不是一件容易的事情，CSS3只能做简单动画，对于一些复杂场景往往因为缺乏必要的编程能力而力不从心。

JavaScript可以控制复杂动画，常规的动画控制基于命令式编程开发，也就是要让一个DOM元素运动起来，先通过JS获取DOM的引用，然后利用DOM的API设置元素的动画样式。这种方式的缺点在于由于应用逻辑的不确定性，导致针对DOM的样式更新是分散在执行逻辑的各个地方的，对DOM API的命令式调用不仅难以维护，且易引发浏览器不必要的重绘和计算，导致动画卡顿等性能问题。

发明内容

为了解决现有技术中动画卡顿的技术问题。

根据第一方面，本发明提供一种动画的响应式驱动方法，包括：获取页面元素；获取被操作对象；将所述被操作对象赋予监听属性；在赋值器中将所述被操作对象与所述页面元素的预设属性进行关联，所述赋值器包括集中监听式赋值器。

可选地，所述将所述被操作对象赋予监听属性包括：通过getter/setter函数、数据劫持或数据代理中的任意一种方式为所述被操作对象设置所述监听属性。

可选地，所述获取页面元素包括：获取所述页面元素的标识信息。

可选地，所述在赋值器中将所述被操作对象与所述页面元素的预设属性进行关联包括：根据所述标识信息查找对应的所述页面元素中的预设属性；将所述监听属性与所述预设属性关联。

可选地，在所述在赋值器中将所述被操作对象与所述页面元素的预设属性进行关联之后包括：获取被操作对象的被赋值动作；基于所述被操作对象的监听属性触发所述赋值器；基于所述监听属性与所述预设属性的关联关系利用所述被赋值动作对所述预设属性进行赋值。

可选地，在所述基于所述监听属性与所述预设属性的关联关系利用所述被赋值动作对所述预设属性进行赋值之后包括：监听所述赋值器中的同一帧页面元素中的更新的赋值；当所述同一帧页面元素中存在多个更新的赋值时，根据所述赋值的更新顺序合并至唯一的最新值。

根据第二方面，本发明实施例提供了一种动画的响应式驱动装置，包括：第一获取单元，用于获取页面元素；第二获取单元，用于获取被操作对象；属性变换单元，用于将所述被操作对象赋予监听属性；关联单元，用于在赋值器中将所述被操作对象与所述页面元素的预设属性进行关联，所述赋值器包括集中监听式赋值器。

可选地，所述属性变换单元还用于通过getter/setter函数、数据劫持或数据代理中的任意一种方式为所述被操作对象设置所述监听属性。

根据第三方面，本发明实施例提供了一种电子设备包括至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器执行如上述第一方面任意一项所述的动画的响应式驱动方法。

根据第四方面，本发明实施例提供了一种非暂态存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行如上述第一方面任一项所述的动画的响应式驱动方法。

本发明实施例具有如下有意效果：