CN111311715A - 一种网页中添加动画效果的方法及装置 - Google Patents

Abstract

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

Description

一种网页中添加动画效果的方法及装置

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

预定义单元，接收通过声明式指令的方式预定义的DOM元素的元素标识；将所述元素标识以设定格式存储于页面结构化数据。

可选的，所述获取单元，具体用于监听用户在动画配置时选择的组件，在监听到ENABLE_NAIMATE事件时，获取该事件抛出的所述组件内层目标DOM 元素的元素标识。

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

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

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

一种电子设备，包括：

处理器；

用于存储处理器可执行指令的存储器；

所述处理器被配置为上述任一项所述的网页中添加动画效果的方法。

本申请实施例，提供了一种网页中添加动画效果的方案，旨在能够真正以 DOM元素为粒度提供动画效果支持。具体地通过预定义组件内层的DOM元素的元素标识，利用该元素标识建立平台与组件之间的沟通渠道，使得平台可以根据元素标识定位到需要添加动画效果的组件内层的DOM元素；进而对组件内层DOM元素添加动画效果的支持。如此，动画效果支持范围可以覆盖第三方组件，从而最大化平台能力的支持范围。使得网页开发者的开发工作更为简单方便。

附图说明

图1是本申请一示例性实施例示出的一种网页中添加动画效果的方法的流程图；

图2是本申请一示例性实施例示出的动效设计器的界面示意图；

图3是本申请一示例性实施例示出的一种网页中添加动画效果的装置的硬件结构图；

图4是本申请一示例性实施例示出的一种网页中添加动画效果的装置的模块示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的方式并不代表与本申请相一致的所有方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

在本申请使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

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

在相关技术中，由唯一DOM元素组成的组件称之为基础组件，且该DOM 元素仅仅是组件外层的DOM元素。因此，在平台对基础组件提供动画效果支持时，实际是在基础组件外层的DOM元素上添加CSS动画效果。然而，外层 DOM元素本身存在一定的局限性，例如外层DOM元素无法添加业务逻辑，因此也就无法实现与业务相关的动画效果。例如，对于动效展示用户热评这一需求，首先需要基于业务逻辑获取用户热评，然后才可以基于获取的用户热评来添加动效；当时外层DOM元素由于无法添加业务逻辑，也就无法获取用户热评，在添加动画效果的对象无法获取的情况下，就算展示动画效果也没有任何意义。

在实际网页开发中，常见页面中大多数前端的组件都是非单一DOM元素 (即非基础组件)，这些非基础组件不仅可以包括外层DOM元素，还可以包括内层DOM元素。大部分页面需求都需要在非基础组件的内层DOM元素上实现，针对例如抽奖小游戏、轮播图、用户热评、商户列表等需求。但是现有平台并不支持直接对组件内层DOM元素上添加动画效果，所以针对这些需求就需要开发者自己编写相关代码手动实现动画效果。这显然加长了网页的开发周期。

为此，本申请提供了一种网页中添加动画效果的方案；旨在能够真正以 DOM元素为粒度提供动画效果支持的方案，对组件内DOM元素也可以添加动画效果；且支持范围可以覆盖第三方组件，从而最大化平台能力的支持范围。使得网页开发者的开发工作更为简单方便。

以下参考图1所示的本申请一示例性实施例示出的一种网页中添加动画效果的方法流程图，所述方法可以应用于前端开发平台，所述平台可以用于在网页中添加动画效果，该方法具体可以包括如下步骤：

步骤110：在目标组件内层的目标DOM元素被触发时，获取该目标DOM 元素的元素标识。

开发者使用平台开发网页时，可以在网页中添加动画效果。当开发者在平台界面中选中某个组件后，可以针对该组件内层的目标DOM元素中添加需要的动画效果。其中，开发者选中组件内层的目标DOM元素时，就触发了该目标 DOM元素被选中的指令。该指令用于提示平台目标组件内层的目标DOM元素被选中，进而获取该目标DOM元素的元素标识。

所述元素标识是本申请为了实现平台支持组件内层DOM元素添加动画效果而预先定义的标识。预定义元素标识的作用在于在组件与平台之间建立沟通渠道，从而传递参数，使得平台可以定位到需要添加动画效果的组件内层的 DOM元素。

为此，本申请还可以包括预定义元素标识的实施例，具体包括如下步骤：

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

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

该实施例中，DOM元素可以是指组件内的DOM元素。

首先，对于非唯一DOM元素的组件(例如第三方组件)来说，如果需要针对组件内层的DOM元素添加动画效果；那么就需要令平台可以定位出组件内层的DOM元素。

为此，可以通过声明式进行组件内DOM元素的定义。这一步骤称之为预定义，即预先定义了组件内DOM元素；从而使得平台可以基于定义的DOM元素在组件被触发时识别出组件内的DOM元素。这里的预定义具体到不同的前端框架可以采用不同的实现方式。例如可以采用指令、组件或者类的方式。

举例说明：

使用Vue.js和Angular进行网页开发时，可以通过自定义全局指令的方式为组件DOM元素进行预定义。指令由业务开发者添加到目标DOM元素上并注入元素标识。元素标识是一个由业务开发者自定的，在组件内具有唯一性的字符串。之后，平台可以将所述元素标识以设定格式存储于页面结构化数据。

平台对支持动画效果的DOM元素的识别可以是基于一种结构化数据。所述结构化数据可以包括JSon格式的结构化数据。当平台接收通过声明式指令的方式预定义的DOM元素的元素标识时，把获得的元素标识以一定格式存入页面结构化数据。这样，用于添加编辑动效的可视化工具能够监听捕捉结构化数据中的变化，从而刷新元素列表。

包含预定义DOM元素的组件存储结构大致如下：

其中，guid是组件标识，组件标识在页面中具有唯一性。组件内所有的预定义的DOM元素的元素标识都存储在组件数据的animationList字段下。编辑DOM元素的动画效果本质上是修改元素标识id对应的animation的值。

最终，由组件的组件标识(即guid)和DOM元素的元素标识(即animationList 字段下的id)共同拼装成为渲染动画效果的CSS选择器。

在实际应用中，由于平台提供的基础组件仅有唯一的DOM元素，因此对于基础组件无需进行元素标识的预定义。只有针对组件中存在多个DOM元素的非基础组件才需要进行预定义，以及识别元素标识的过程。

具体地，前述步骤110中，在所述组件内层的目标DOM元素被触发时，获取所述目标DOM元素的元素标识，包括：

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

该实施例中，当组件在平台上进行渲染时，指令触发ENABLE_ANIMATE 事件并把注入的元素标识作为参数抛出，平台只要监听该事件就能够得到元素标识。

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

平台在获取到元素标识后，可以从预定义元素标识时存储的结构化数据中，查询该元素标识对应的动画效果配置数据。

所述动画效果配置数据可以是平台本身就具备的动画效果配置数据。本申请通过预定义元素标识，从而使得平台可以识别出组件内多个DOM元素中具体哪个DOM元素需要添加动画效果，进而为该DOM元素加载动画效果配置数据。

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

在动效的可视化编辑阶段，平台会提供一种由表单项组成的图形界面，称为动效设计器。动效设计器会捕获结构化数据中的变化，把所有DOM元素(由唯一DOM元素组成的平台组件以及经过标识的第三方组件元素(即非唯一 DOM元素))都陈列在面板中，并把影响动画效果的各种动画配置选项以用户容易理解的方式展现出来以供其进行设置。

动效编辑器的界面和功能如图2所示。

用户可以通过拖拽、点击或者下拉等方式来选择DOM元素动效的一些属性，例如：

1)基本效果

2)开始和结束时间

3)动画时长

4)元素进入和退出方向

5)动画速率(匀速/渐快/渐慢/慢-快-慢)

6)是否循环播放

7)播放次数

8)是否正逆轮播

9)循环周期

如图2所示的界面中，分为3个部分，分别是左侧的总时序图区域；右侧的动画序列和动画设置区域。

其中，总时序图区域用于展示所有元素和对应时间线，可以获得不同元素间关于动画时间的参照信息。用户可以单击选中元素。左侧还设置有动画效果预览区域，通过单击该预览区域可以播放列表中的全部动画。此外，点击空白区域可以收取时间线。右侧为

动画序列区域用于展示当前选中元素的动画序列，可以对动画执行添加、播放、编辑时间、删除、更换顺序等操作。例如可以拖拽改变动画顺序、单击选中动画，单击删除按钮删除该动画，单击添加按钮添加行动和，单击播放按钮播放该元素动画，拖动滑块编辑动画开始和结束时间。

动画设置区域用于展示动画类型面板。一般默认可以隐藏，当选中动画后可以激活该区域显示；所述面板可以配置各种基础动画类型。例如配置三大类 38种的基础动画类型。

此外，动画设置区域下方还设置有动效配置区域，该区域同样默认为隐藏，当选中动画后也可以激活该区域显示。动效配置区域用于在动画设置区域提供的动画效果基础上额外提供自定义动画配置。配置项在不同动画类型间可以稍有区别，从而满足用户个性化需求。

该实施例中，用户在可视化的动效设计器中对目标DOM元素进行编辑时，动效可以即时运行以供预览，并同步修改结构化数据中的相关内容。

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

在用户选中了需要的动画配置选项后，平台就可以基于用户选择的动画配置选项，渲染页面中为所述组件内层的目标DOM元素添加的动画效果。

在一实施例中，平台可以还可以提供多场景差异化渲染。具体地，除了触发ENABLE_ANIMATE事件以外，声明式元素标识的钩子函数中还可以绑定多个事件，并最终根据不同的场景进行差异化渲染。例如绑定CHECK_INSIGHT 事件，该事件仅在最终线上页面渲染时触发，用以检查元素是否在当前可视区域内，从而进行动效的添加/删除等操作。

通过本申请实施例，利用该元素标识建立平台与组件之间的沟通渠道，使得平台可以根据元素标识定位到需要添加动画效果的组件内层的DOM元素；进而对组件内层DOM元素添加动画效果的支持。

一方面，可以实现最大化平台动效能力。通过声明式定位元素，把平台定位元素的能力从组件粒度细化到DOM元素粒度，能够支持组件内的任意DOM 元素使用平台提供的动效能力，还能够为平台上的第三方组件提供动效支持。

另一方面，提高了业务组件的开发效率。由于所有业务内的CSS动效都能够通过利用平台能力，业务开发者仅需要对DOM元素进行预定义，不需要关心动效需求的具体内容，解耦了CSS动效的技术场景和业务场景。

再一方面，可扩展性更强。事件机制的引入使得本申请不仅能用于细化可视化工具的应用范围，任何需要进行元素定位的程序都可以通过监听 ENABLE_ANIMATE事件来获得当前所有预定义的元素标识，比如说组件开发者进行本地调试时，可监听该事件并为元素编写动效预览程序，模拟组件发布后在平台中的交互，提前预判风险。

再一方面，应用性广泛。由于元素标识是预定义的且存储于结构化数据，而结构化数据与前端框架并非强耦合，因此本申请实施例可以在不同的前端框架内实现，只需要为前端框架配置结构化文件即可。本质上都是声明式的参数传递结合事件机制。

与前述网页中添加动画效果的方法的实施例相对应，本申请还提供了网页中添加动画效果的装置的实施例。

本申请网页中添加动画效果的装置的实施例可以应用在服务器上。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图3 所示，为本申请网页中添加动画效果的装置所在的一种硬件结构图，除了图3 所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中通常根据该网页中添加动画效果的实际功能，还可以包括其他硬件，对此不再赘述。

请参考图4，在一种软件实施例中，该网页中添加动画效果的装置对应前述图1的实施例，该网页中添加动画效果的装置具体可以包括：

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

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

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

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

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

预定义单元，接收通过声明式指令的方式预定义的DOM元素的元素标识；将所述元素标识以设定格式存储于页面结构化数据。

可选的，所述获取单元410，具体用于监听用户在动画配置时选择的组件，在监听到ENABLE_NAIMATE事件时，获取该事件抛出的所述组件内层目标 DOM元素的元素标识。

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

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

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

上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上图4描述了网页中添加动画效果的装置的内部功能模块和结构示意，其实质上的执行主体可以为一种电子设备，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为前述任一项的网页中添加动画效果的方法。

在上述电子设备的实施例中，应理解，该处理器可以是中央处理单元(英文：Central Processing Unit，简称：CPU)，还可以是其他通用处理器、数字信号处理器(英文：Digital Signal Processor，简称：DSP)、专用集成电路(英文： Application SpecificIntegrated Circuit，简称：ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，而前述的存储器可以是只读存储器(英文：read-only memory，缩写：ROM)、随机存取存储器(英文：random access memory，简称：RAM)、快闪存储器、硬盘或者固态硬盘。结合本申请实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。

本申请中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于电子设备实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (11)

1.一种网页中添加动画效果的方法，其特征在于，所述方法包括：

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

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

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

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

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

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

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

3.根据权利要求1所述的方法，其特征在于，所述在所述组件内层的目标DOM元素被触发时，获取所述目标DOM元素的元素标识，包括：

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

4.根据权利要求2所述的方法，其特征在于，所述声明式指令还携带有钩子函数；所述钩子函数绑定有若干事件，每种事件对应有不同的渲染方式。

5.根据权利要求1所述的方法，其特征在于，所述动画配置选项，包括以下一种或几种的组合：

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

6.一种网页中添加动画效果的装置，其特征在于，所述装置包括：

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

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

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

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

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

预定义单元，接收通过声明式指令的方式预定义的DOM元素的元素标识；将所述元素标识以设定格式存储于页面结构化数据。

8.根据权利要求6所述的装置，其特征在于，所述获取单元，具体用于监听用户在动画配置时选择的组件，在监听到ENABLE_NAIMATE事件时，获取该事件抛出的所述组件内层目标DOM元素的元素标识。

9.根据权利要求7所述的装置，其特征在于，所述声明式指令还携带有钩子函数；所述钩子函数绑定有若干事件，每种事件对应有不同的渲染方式。

10.根据权利要求6所述的装置，其特征在于，所述动画配置选项，包括以下一种或几种的组合：

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

11.一种电子设备，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

所述处理器被配置为上述权利要求1-5中任一项所述的方法。

Images