[发明专利]一种网页中添加动画效果的方法及装置

说明书

本申请提供一种网页中添加动画效果的方法及装置。其中，所述方法包括：监听用户在动画配置时选择的组件，在所述组件内层的目标DOM元素被触发时，获取所述目标DOM元素的元素标识；从存储预定义元素标识的结构化数据中，查询所述元素标识对应的动画效果配置数据；基于所述动画效果配置数据向用户展示所述目标DOM元素对应的动画配置选项；基于用户选择的动画配置选项，渲染页面中为所述组件内层的目标DOM元素添加的动画效果。应用本申请，可以实现对组件内DOM元素添加动画效果。

技术领域

本申请涉及互联网技术领域，尤其涉及一种网页中添加动画效果的方法及装置。

背景技术

随着网页制作技术越来越趋于前端组件化，在前端开发平台(以下简称为平台)上使用平台提供的各种组件就可以快速地开发网页。所述平台提供有预先编写好通用的组件，使用者按照实际需求将这些组件拼接后就可以生成相应的网页页面。

现有平台虽然支持给组件添加动画效果，但是只支持给组件外层元素添加，对组件内部的元素则没有提供相应支持，因此添加动画效果的范围存在很强的局限性。

发明内容

有鉴于此，本申请提供一种网页中添加动画效果的方法及装置和电子设备。用于解决上述的不支持组件内层DOM元素添加动画效果的问题。

具体地，本申请是通过如下技术方案实现的：

一种网页中添加动画效果的方法，所述方法包括：

监听用户在动画配置时选择的组件，在所述组件内层的目标DOM元素被触发时，获取所述目标DOM元素的元素标识；

从存储预定义元素标识的结构化数据中，查询所述元素标识对应的动画效果配置数据；

基于所述动画效果配置数据向用户展示所述目标DOM元素对应的动画配置选项；

基于用户选择的动画配置选项，渲染页面中为所述组件内层的目标DOM元素添加的动画效果。

可选的，所述方法还包括：

接收通过声明式指令的方式预定义的DOM元素的元素标识；

将所述元素标识以设定格式存储于页面结构化数据。

可选的，所述在所述组件内层的目标DOM元素被触发时，获取所述目标DOM元素的元素标识，包括：

在监听到ENABLE_NAIMATE事件时，获取该事件抛出的所述组件内层目标DOM元素的元素标识。

可选的，所述声明式指令还携带有钩子函数；所述钩子函数绑定有若干事件，每种事件对应有不同的渲染方式。

可选的，所述动画配置选项，包括以下一种或几种的组合：

基本效果，开始和结束时间、动画时长、元素进入和退出方向、动画速率、是否循环播放、播放次数、是否正逆轮播、循环周期。

一种网页中添加动画效果的装置，所述装置包括：

获取单元，用于监听用户在动画配置时选择的组件，在所述组件内层的目标DOM元素被触发时，获取所述目标DOM元素的元素标识；

查询单元，用于从存储预定义元素标识的结构化数据中，查询所述元素标识对应的动画效果配置数据；

展示单元，用于基于所述动画效果配置数据向用户展示所述目标DOM元素对应的动画配置选项；

添加单元，用于基于用户选择的动画配置选项，渲染页面中为所述组件内层的目标DOM元素添加的动画效果。

可选的，所述装置还包括：