CN109669746B - 基于ui的在线h5动画课件显示方法、装置、计算机设备 - Google Patents

Abstract

本申请涉及UI设计技术领域，特别涉及一种基于UI的在线H5动画课件显示方法、装置、计算机设备。所述方法包括：当用户在画布中添加组件时，在时间轴显示组件的入场时间点和离场时间点，并在组件的入场时间点的下方显示组件的标识；若用户在组件的入场时间点选择入场效果时，则在组件的入场时间点显示用户选择入场效果的入场效果标识；若用户在组件的离场时间点选择离场效果时，则在组件的离场时间点显示用户选择离场效果的离场效果标识。旨在解决现有的web在线H5动画课件制作，用户不能通过页面知道入动画的显示先后顺序，以及动画效果，导致在课件制作过程中增加用户操作难度的问题。

Description

基于UI的在线H5动画课件显示方法、装置、计算机设备

技术领域

本申请涉及UI设计技术领域，特别涉及一种基于UI的在线H5动画课件显示方法、装置、计算机设备。

背景技术

现有web在线H5动画课件制作，根据用户插入动画的先后顺序，在课件中进行先后显示，在同一页面中，如果插入较多的动画时，用户不能通过页面知道之前插入动画的显示先后顺序，以及动画效果，导致在课件制作过程，增加用户操作难度的问题。

发明内容

针对现有技术不足，本申请提出一种基于UI的在线H5动画课件显示方法、装置、计算机设备，旨在解决现有的web在线H5动画课件制作，用户不能通过页面知道入动画的显示先后顺序，以及动画效果，导致在课件制作过程中增加用户操作难度的问题。

本申请提出的技术方案是：

一种基于UI的在线H5动画课件显示方法，在线H5动画课件的当前页面配置一时间轴；所述方法包括：

当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识；

若所述用户在所述组件的入场时间点选择入场效果时，则在所述组件的入场时间点显示所述用户选择入场效果的入场效果标识；

若所述用户在所述组件的离场时间点选择离场效果时，则在所述组件的离场时间点显示所述用户选择离场效果的离场效果标识。

进一步地，在所述当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识的步骤中，包括：当用户在画布中添加第一组件时，在所述时间轴显示所述第一组件的入场时间点和离场时间点，并在所述第一组件的入场时间点的下方显示所述第一组件的标识；

当用户在画布中添加第二组件时，判断所述第二组件的入场时间点与所述第一组件的入场时间点是否相同；

若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识；若所述第二组件的入场时间点与所述第一组件的入场时间点不相同，则在所述时间轴显示所述第二组件的入场时间点和离场时间点，并在所述第二组件的入场时间点的下方显示所述第二组件的标识。

进一步地，在所述若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识的步骤之后，包括：

当用户将光标停留在所述数量标识上时，在所述数量标识的上方显示所述第一组件的标识、所述第二组件的标识；若用户点击所述第一组件的标识，则在所述时间轴显示所述第一组件的入场时间点和离场时间点；

若用户点击所述第二组件的标识，则在所述时间轴显示所述第二组件的入场时间点和离场时间点。

进一步地，在所述时间轴上配置活动时间点标识；所述当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识的步骤中，包括：

当用户在画布中添加组件时，识别所述活动时间点标识在所述时间轴的位置；

根据所述活动时间点标识在所述时间轴的位置，在所述时间轴显示所述组件的入场时间点；

根据所述时间轴的末端的时间点，在所述时间轴显示所述组件的离场时间点；

在所述组件的入场时间点的下方显示所述组件的标识。

进一步地，在所述时间轴的末端的一侧配置控制所述时间轴增加或者减少总时长的控制键，其中，所述控制键包括增加所述时间轴总时长的增加时长控制键和减少所述时间轴总时长的减少时长控制键，在所述组件的入场时间点的下方显示所述组件的标识的步骤之后，包括：

当接收用户点击所述增加时长控制键时，增加所述时间轴的总时长；

当接收用户点击所述减少时长控制键时，减少所述时间轴的总时长。

进一步地，在所述时间轴上配置时间刻度标识，在所述当接收用户点击所述减少时长控制键时，减少所述时间轴的总时长的步骤中，包括：

当接收用户点击所述减少时长控制键时，识别在所述时间刻度标识中倒数第二刻度的时间点是否存在所述组件的标识；

若在所述时间刻度标识中倒数第二刻度的时间点存在所述组件的标识，则将所述组件的标识移至在所述时间刻度标识中的倒数第三刻度的时间点，去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识；

若在所述时间刻度标识中倒数第二刻度的时间点不存在所述组件的标识，则去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识。

进一步地，在所述时间轴的首端的一侧配置预览播放键，在所述预览播放键的下方显示所述时间轴总时长、所述活动时间点标识当前在所述时间轴的位置对应的时间点，在所述组件的入场时间点的下方显示所述组件的标识的步骤之后，包括：

当接收用户点击预览播放键时，控制所述活动时间点标识在所述时间轴上向所述时间轴的末端移动；

若所述活动时间点标识为所述组件的入场时间点时，则播放所述组件的入场时间点对应的入场效果；

若所述活动时间点标识为所述组件的离场时间点时，则播放所述组件的离场时间点对应的离场效果。

本申请还提供一种基于UI的在线H5动画课件显示装置，在线H5动画课件的当前页面配置一时间轴；所述装置包括：

第一显示模块，用于当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识；

第二显示模块，用于若所述用户在所述组件的入场时间点选择入场效果时，则在所述组件的入场时间点显示所述用户选择入场效果的入场效果标识；

第三显示模块，用于若所述用户在所述组件的离场时间点选择离场效果时，则在所述组件的离场时间点显示所述用户选择离场效果的离场效果标识。

本申请还提供一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述的方法的步骤。

本申请还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述的方法的步骤。

根据上述的技术方案，本申请有益效果：配置一时间轴，通过时间轴显示各组件的入场时间点、离场时间点、入场时间点对应的入场效果标识、离场时间点对应的离场效果标识，使课件的动画全程可视化，降低在课件制作过程中用户操作难度，极大地提高了工作效率，旨在解决现有的web在线H5动画课件制作，用户不能通过页面知道入动画的显示先后顺序，以及动画效果，导致在课件制作过程中增加用户操作难度的问题。

附图说明

图1是应用本申请实施例提供的基于UI的在线H5动画课件显示方法的流程图；

图2是应用本申请实施例提供的基于UI的在线H5动画课件显示装置的功能模块图；

图3是应用本申请实施例提供的计算机设备的结构示意框图；

图4是应用本申请实施例提供的在线H5动画课件显示界面。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

如图1和图4所示，本申请实施例提出一种基于UI的在线H5动画课件显示方法，在线H5动画课件的当前页面配置一时间轴。

在线H5动画课件的当前页面配置时间轴，在线H5动画课件中，通过用户点击添加页面按键的操作添加页面，在成为添加页面之后，添加的页面为当前页面，在用户打开在线H5动画课件之后，默认加载一个页面为当前页面，为此，在当前页面上配置时间轴，具体地，时间轴分布于当前页面的画布下方。

UI是User Interface(用户界面)的简称。

H5是HTML5的简写，就是HTML的高级版本。

所述方法包括以下步骤：

步骤S101、当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识。

检测用户是否在画布中添加组件，当检测到用户在画布中添加组件时，在时间轴上显示组件的入场时间点和离场时间点，以及在组件的入场时间点的下方显示组件的标识。在本实施例中，组件包括文字组件、图片组件、背景组件和配音组件。用户在画布中添加组件时，可以在文字组件、图片组件、背景组件和配音组件中选择其中一种组件进行添加。

在组件的入场时间点中，用户可以选择入场效果，在组件的离场时间点中，用户可以选择离场效果，在本实施例中，入场效果包括淡入、放大进入、缩小进入、向右飞入、向左飞入、向上飞入、向下飞入、向右淡入、向左淡入、向上淡入、向下淡入、向右弹入、向左弹入、向上弹入、向下弹入、右上旋入、右下旋入、左上旋入、左下旋入、上下翻转、左右翻转、正向旋转、逆向旋转、飞入、弹性放大。离场效果包括淡出、缩小退出、悬挂脱落、向右飞出、向左飞出、向上飞出、向下飞出、向右淡出、向左淡出、向上淡出、向下淡出、左右翻转、正向旋转。

在本实施例中，在步骤S101中，包括：

当用户在画布中添加第一组件时，在所述时间轴显示所述第一组件的入场时间点和离场时间点，并在所述第一组件的入场时间点的下方显示所述第一组件的标识；

当用户在画布中添加第二组件时，判断所述第二组件的入场时间点与所述第一组件的入场时间点是否相同；

若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识；若所述第二组件的入场时间点与所述第一组件的入场时间点不相同，则在所述时间轴显示所述第二组件的入场时间点和离场时间点，并在所述第二组件的入场时间点的下方显示所述第二组件的标识。

当用户在画布中添加第一组件时，第一组件是画布上的第一个组件，同理，也是时间轴上的第一个组件，在时间轴显示第一组件的入场时间点和离场时间点，并在第一组件的入场时间点的下方显示第一组件的标识。当用户在画布中添加第二组件时，第二组件不是画布上的第一个组件，同理，也不是时间轴上的第一个组件，由于第二组件不是时间轴上的第一个组件，触发判断功能，判断第二组件的入场赶时间点与其它的组件的入场时间点是否相同，在本实施例中，由于之前仅存在第一组件，为此，判断第二组件的入场时间点与第一组件的入场时间点是否相同，若第二组件的入场时间点与第一组件的入场时间点相同，则将第一组件的标识更换显示为表示组件数量为两个的数量标识。用户看到表示组件数量为两个的数量标识，就可以知道此处的时间点为两个组件的相同入场时间点。若第二组件的入场时间点与第一组件的入场时间点不相同，则在时间轴显示第二组件的入场时间点和离场时间点，并在第二组件的入场时间点的下方显示第二组件的标识。

在所述若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识的步骤之后，包括：

当用户将光标停留在所述数量标识上时，在所述数量标识的上方显示所述第一组件的标识、所述第二组件的标识；

若用户点击所述第一组件的标识，则在所述时间轴显示所述第一组件的入场时间点和离场时间点；

若用户点击所述第二组件的标识，则在所述时间轴显示所述第二组件的入场时间点和离场时间点。

在时间轴显示表示组件数量为两个的数量标识之后，用户需要对第一组件或者第二组件进行编辑时，用户控制光标置于数量标识上，当用户将光标停留在数量标识上时，在数量标识的上方显示第一组件的标识、第二组件的标识，此时，用户可以选择第一组件的标识或者第二组件的标识，若用户点击第一组件的标识，则在时间轴显示第一组件的入场时间点和离场时间点，用户可以对第一组件的入场时间点和离场时间点进行编辑。若用户点击第二组件的标识，则在时间轴显示第二组件的入场时间点和离场时间点，用户可以对第二组件的入场时间点和离场时间点进行编辑。

在所述若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识的步骤之后，包括：

当用户点击所述数量标识时，在所述时间轴显示所述第一组件与所述第二组件组合后的入场时间点和离场时间点；

若用户更换所述第一组件与所述第二组件组合后的入场时间点，则更换所述第一组件的入场时间点，同时更换所述第二组件的入场时间点；

若用户更换所述第一组件与所述第二组件组合后的离场时间点，则更换所述第一组件的离场时间点，同时更换所述第二组件的离场时间点。

用户点击数量标识，在时间轴显示第一组件与第二组件组合后的入场时间点和离场时间点，由于第一组件、第二组件的入场时间点相同，为此，第一组件与第二组件组合后的入场时间点为第一组件或者第二组件的入场时间点。第一组件与第二组件组合后的离场时间点为在第一组件的离场时间点、第二组件的离场时间点中在时间轴上靠近时间轴的末端的一个。若用户更换第一组件与第二组件组合后的入场时间点，则更换第一组件的入场时间点，以及更换第二组件的入场时间点，也就是说，用户对第一组件与第二组件组合后的入场时间点的更换，是对第一组件、第二组件的入场时间点都进行了更换，方便用户一次操作实现对多个组件同时进行了操作，避免多次的重复操作。若用户更换第一组件与第二组件组合后的离场时间点，则更换第一组件的离场时间点，以及更换第二组件的离场时间点，也就是说，用户对第一组件与第二组件组合后的离场时间点的更换，是对第一组件、第二组件的离场时间点都进行了更换，方便用户一次操作实现对多个组件同时进行了操作，避免多次的重复操作。

在本实施例中，在所述时间轴上配置活动时间点标识，在步骤S101中，包括：

当用户在画布中添加组件时，识别所述活动时间点标识在所述时间轴的位置；

根据所述活动时间点标识在所述时间轴的位置，在所述时间轴显示所述组件的入场时间点；

根据所述时间轴的末端的时间点，在所述时间轴显示所述组件的离场时间点；

在所述组件的入场时间点的下方显示所述组件的标识。

在时间轴上配置活动时间点标识，活动时间点标识所在时间轴上的位置是时间轴上的当前时间点，当用户在画布中添加组件时，根据识别活动时间点标识确定组件的入场时间点，识别活动时间点标识在时间轴的位置，根据活动时间点标识在时间轴的位置，在时间轴显示组件的入场时间点，根据时间轴的末端的时间点，在时间轴显示组件的离场时间点，在组件的入场时间点的下方显示组件的标识。

活动时间点标识就是一个表示在时间轴上当前时间点的一个标识，该标识在时间轴上能够移动。在本实施例中，活动时间点标识为一个三角形标识。

在所述时间轴的末端的一侧配置控制所述时间轴增加或者减少总时长的控制键，其中，所述控制键包括增加所述时间轴总时长的增加时长控制键和减少所述时间轴总时长的减少时长控制键；在所述组件的入场时间点的下方显示所述组件的标识的步骤之后，包括：

当接收用户点击所述增加时长控制键时，增加所述时间轴的总时长；

当接收用户点击所述减少时长控制键时，减少所述时间轴的总时长。

在时间轴的末端的一侧配置控制键，控制键控制时间轴增加或者减少总时长，具体地，控制键包括增加时间轴总时长的增加时长控制键和减少时间轴总时长的减少时长控制键。当接收用户点击增加时长控制键时，增加时间轴的总时长，当接收用户点击减少时长控制键时，减少时间轴的总时长。在本实施例中，每点击一次增加时长控制键，增加时间轴的时长为1秒；每点击一次减少时长控制键，减少时间轴的时长为1秒。

在本实施例中，在所述时间轴上配置时间刻度标识；在所述当接收用户点击所述减少时长控制键时，减少所述时间轴的总时长的步骤中，包括：

当接收用户点击所述减少时长控制键时，识别在所述时间刻度标识中倒数第二刻度的时间点是否存在所述组件的标识；

若在所述时间刻度标识中倒数第二刻度的时间点存在所述组件的标识，则将所述组件的标识移至在所述时间刻度标识中的倒数第三刻度的时间点，去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识；

若在所述时间刻度标识中倒数第二刻度的时间点不存在所述组件的标识，则去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识。

在时间轴上配置时间刻度标识，用户在点击减少时长控制键，若组件的标识在减少的时长范围内，需要对组件的标识进行处理，当接收用户点击减少时长控制键时，识别在时间刻度标识中倒数第二刻度的时间点是否存在组件的标识，若在时间刻度标识中倒数第二刻度的时间点存在组件的标识，则将组件的标识移至在时间刻度标识中的倒数第三刻度的时间点，在组件的标识移至在时间刻度标识中的倒数第三刻度的时间点时，对应地，组件的入场时间点也移至在时间刻度标识中的倒数第三刻度的时间点。去除在时间刻度标识中倒数第一刻度的时间点，形成减少时间轴的总时长之后的时间刻度标识；若在时间刻度标识中倒数第二刻度的时间点不存在组件的标识，则去除在时间刻度标识中倒数第一刻度的时间点，形成减少时间轴的总时长之后的时间刻度标识。

时间刻度标识就是在时间轴上不同的位置标识上不同的时间，在本实施例中，时间刻度标识为多个数字的标识。时间刻度标识中的每一个刻度所表示的时间点可以是默认设定，也可以是用户输入进行设定。

在本实施例中，在所述时间轴的首端的一侧配置预览播放键；在所述预览播放键的下方显示所述时间轴总时长、所述活动时间点标识当前在所述时间轴的位置对应的时间点；在所述组件的入场时间点的下方显示所述组件的标识的步骤之后，包括：

当接收用户点击预览播放键时，控制所述活动时间点标识在所述时间轴上向所述时间轴的末端移动；

若所述活动时间点标识为所述组件的入场时间点时，则播放所述组件的入场时间点对应的入场效果；

若所述活动时间点标识为所述组件的离场时间点时，则播放所述组件的离场时间点对应的离场效果。

在时间轴的首端的一侧配置预览播放键，在预览播放键的下方显示时间轴总时长、活动时间点标识当前在时间轴的位置对应的时间点，也就是说，预览播放键下方显示两个时间，一个时间是时间轴总时长，另一个时间是活动时间点标识当前在时间轴的位置对应的时间点。当接收用户点击预览播放键时，控制活动时间点标识在时间轴上向时间轴的末端移动，活动时间点标识在时间轴上移动过程中，当活动时间点标识为组件的入场时间点时，播放组件的入场时间点对应的入场效果，当活动时间点标识为组件的离场时间点时，播放组件的离场时间点对应的离场效果。

步骤S102、若所述用户在所述组件的入场时间点选择入场效果时，则在所述组件的入场时间点显示所述用户选择入场效果的入场效果标识。

在时间轴显示组件的入场时间点时，在组件的入场时间点默认显示为没有入场效果的入场效果标识，若用户在组件的入场时间点选择入场效果时，则在组件的入场时间点显示用户选择入场效果的入场效果标识。

步骤S103、若所述用户在所述组件的离场时间点选择离场效果时，则在所述组件的离场时间点显示所述用户选择离场效果的离场效果标识。

在时间轴显示组件的离场时间点时，在组件的离场时间点默认显示为没有离场效果的离场效果标识，若用户在组件的离场时间点选择离场效果时，则在组件的离场时间点显示用户选择离场效果的离场效果标识。

通过时间轴显示各组件的入场时间点、离场时间点、入场时间点对应的入场效果标识、离场时间点对应的离场效果标识，使课件的动画全程可视化，降低在课件制作过程中用户操作难度。

综上所述，配置一时间轴，通过时间轴显示各组件的入场时间点、离场时间点、入场时间点对应的入场效果标识、离场时间点对应的离场效果标识，使课件的动画全程可视化，降低在课件制作过程中用户操作难度，极大地提高了工作效率，旨在解决现有的web在线H5动画课件制作，用户不能通过页面知道入动画的显示先后顺序，以及动画效果，导致在课件制作过程中增加用户操作难度的问题。

如图2和图4所示，本申请实施例提出一种基于UI的在线H5动画课件显示装置1，装置1包括第一显示模块11、第二显示模块12和第三显示模块13。

在线H5动画课件的当前页面配置一时间轴。

在线H5动画课件的当前页面配置时间轴，在线H5动画课件中，通过用户点击添加页面按键的操作添加页面，在成为添加页面之后，添加的页面为当前页面，在用户打开在线H5动画课件之后，默认加载一个页面为当前页面，为此，在当前页面上配置时间轴，具体地，时间轴分布于当前页面的画布下方。

UI是User Interface(用户界面)的简称。

H5是HTML5的简写，就是HTML的高级版本。

第一显示模块11，用于当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识。

检测用户是否在画布中添加组件，当检测到用户在画布中添加组件时，在时间轴上显示组件的入场时间点和离场时间点，以及在组件的入场时间点的下方显示组件的标识。在本实施例中，组件包括文字组件、图片组件、背景组件和配音组件。用户在画布中添加组件时，可以在文字组件、图片组件、背景组件和配音组件中选择其中一种组件进行添加。

在组件的入场时间点中，用户可以选择入场效果，在组件的离场时间点中，用户可以选择离场效果，在本实施例中，入场效果包括淡入、放大进入、缩小进入、向右飞入、向左飞入、向上飞入、向下飞入、向右淡入、向左淡入、向上淡入、向下淡入、向右弹入、向左弹入、向上弹入、向下弹入、右上旋入、右下旋入、左上旋入、左下旋入、上下翻转、左右翻转、正向旋转、逆向旋转、飞入、弹性放大。离场效果包括淡出、缩小退出、悬挂脱落、向右飞出、向左飞出、向上飞出、向下飞出、向右淡出、向左淡出、向上淡出、向下淡出、左右翻转、正向旋转。

在本实施例中，第一显示模块11包括：

第一子显示模块，用于当用户在画布中添加第一组件时，在所述时间轴显示所述第一组件的入场时间点和离场时间点，并在所述第一组件的入场时间点的下方显示所述第一组件的标识；

第一子判断模块，用于当用户在画布中添加第二组件时，判断所述第二组件的入场时间点与所述第一组件的入场时间点是否相同；

第二子显示模块，用于若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识；若所述第二组件的入场时间点与所述第一组件的入场时间点不相同，则在所述时间轴显示所述第二组件的入场时间点和离场时间点，并在所述第二组件的入场时间点的下方显示所述第二组件的标识。

当用户在画布中添加第一组件时，第一组件是画布上的第一个组件，同理，也是时间轴上的第一个组件，在时间轴显示第一组件的入场时间点和离场时间点，并在第一组件的入场时间点的下方显示第一组件的标识。当用户在画布中添加第二组件时，第二组件不是画布上的第一个组件，同理，也不是时间轴上的第一个组件，由于第二组件不是时间轴上的第一个组件，触发判断功能，判断第二组件的入场赶时间点与其它的组件的入场时间点是否相同，在本实施例中，由于之前仅存在第一组件，为此，判断第二组件的入场时间点与第一组件的入场时间点是否相同，若第二组件的入场时间点与第一组件的入场时间点相同，则将第一组件的标识更换显示为表示组件数量为两个的数量标识。用户看到表示组件数量为两个的数量标识，就可以知道此处的时间点为两个组件的相同入场时间点。若第二组件的入场时间点与第一组件的入场时间点不相同，则在时间轴显示第二组件的入场时间点和离场时间点，并在第二组件的入场时间点的下方显示第二组件的标识。

装置1包括：

第四显示模块，用于当用户将光标停留在所述数量标识上时，在所述数量标识的上方显示所述第一组件的标识、所述第二组件的标识；

第五显示模块，用于若用户点击所述第一组件的标识，则在所述时间轴显示所述第一组件的入场时间点和离场时间点；若用户点击所述第二组件的标识，则在所述时间轴显示所述第二组件的入场时间点和离场时间点。

在时间轴显示表示组件数量为两个的数量标识之后，用户需要对第一组件或者第二组件进行编辑时，用户控制光标置于数量标识上，当用户将光标停留在数量标识上时，在数量标识的上方显示第一组件的标识、第二组件的标识，此时，用户可以选择第一组件的标识或者第二组件的标识，若用户点击第一组件的标识，则在时间轴显示第一组件的入场时间点和离场时间点，用户可以对第一组件的入场时间点和离场时间点进行编辑。若用户点击第二组件的标识，则在时间轴显示第二组件的入场时间点和离场时间点，用户可以对第二组件的入场时间点和离场时间点进行编辑。

装置1包括：

第六显示模块，用于当用户点击所述数量标识时，在所述时间轴显示所述第一组件与所述第二组件组合后的入场时间点和离场时间点；

第七显示模块，用于若用户更换所述第一组件与所述第二组件组合后的入场时间点，则更换所述第一组件的入场时间点，同时更换所述第二组件的入场时间点；若用户更换所述第一组件与所述第二组件组合后的离场时间点，则更换所述第一组件的离场时间点，同时更换所述第二组件的离场时间点。

用户点击数量标识，在时间轴显示第一组件与第二组件组合后的入场时间点和离场时间点，由于第一组件、第二组件的入场时间点相同，为此，第一组件与第二组件组合后的入场时间点为第一组件或者第二组件的入场时间点。第一组件与第二组件组合后的离场时间点为在第一组件的离场时间点、第二组件的离场时间点中在时间轴上靠近时间轴的末端的一个。若用户更换第一组件与第二组件组合后的入场时间点，则更换第一组件的入场时间点，以及更换第二组件的入场时间点，也就是说，用户对第一组件与第二组件组合后的入场时间点的更换，是对第一组件、第二组件的入场时间点都进行了更换，方便用户一次操作实现对多个组件同时进行了操作，避免多次的重复操作。若用户更换第一组件与第二组件组合后的离场时间点，则更换第一组件的离场时间点，以及更换第二组件的离场时间点，也就是说，用户对第一组件与第二组件组合后的离场时间点的更换，是对第一组件、第二组件的离场时间点都进行了更换，方便用户一次操作实现对多个组件同时进行了操作，避免多次的重复操作。

在本实施例中，在所述时间轴上配置活动时间点标识；第一显示模块11包括：

第一子识别模块，用于当用户在画布中添加组件时，识别所述活动时间点标识在所述时间轴的位置；

第三子显示模块，用于根据所述活动时间点标识在所述时间轴的位置，在所述时间轴显示所述组件的入场时间点；

第四子显示模块，用于根据所述时间轴的末端的时间点，在所述时间轴显示所述组件的离场时间点；

第五子显示模块，用于在所述组件的入场时间点的下方显示所述组件的标识。

在时间轴上配置活动时间点标识，活动时间点标识所在时间轴上的位置是时间轴上的当前时间点，当用户在画布中添加组件时，根据识别活动时间点标识确定组件的入场时间点，识别活动时间点标识在时间轴的位置，根据活动时间点标识在时间轴的位置，在时间轴显示组件的入场时间点，根据时间轴的末端的时间点，在时间轴显示组件的离场时间点，在组件的入场时间点的下方显示组件的标识。

活动时间点标识就是一个表示在时间轴上当前时间点的一个标识，该标识在时间轴上能够移动。在本实施例中，活动时间点标识为一个三角形标识。

在所述时间轴的末端的一侧配置控制所述时间轴增加或者减少总时长的控制键，其中，所述控制键包括增加所述时间轴总时长的增加时长控制键和减少所述时间轴总时长的减少时长控制键；装置1包括：

第一控制模块，用于当接收用户点击所述增加时长控制键时，增加所述时间轴的总时长；

第二控制模块，用于当接收用户点击所述减少时长控制键时，减少所述时间轴的总时长。

在时间轴的末端的一侧配置控制键，控制键控制时间轴增加或者减少总时长，具体地，控制键包括增加时间轴总时长的增加时长控制键和减少时间轴总时长的减少时长控制键。当接收用户点击增加时长控制键时，增加时间轴的总时长，当接收用户点击减少时长控制键时，减少时间轴的总时长。在本实施例中，每点击一次增加时长控制键，增加时间轴的时长为1秒；每点击一次减少时长控制键，减少时间轴的时长为1秒。

在本实施例中，在所述时间轴上配置时间刻度标识；第二控制模块包括：

第二子识别模块，用于当接收用户点击所述减少时长控制键时，识别在所述时间刻度标识中倒数第二刻度的时间点是否存在所述组件的标识；

第一时间刻度变换模块，用于若在所述时间刻度标识中倒数第二刻度的时间点存在所述组件的标识，则将所述组件的标识移至在所述时间刻度标识中的倒数第三刻度的时间点，去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识；若在所述时间刻度标识中倒数第二刻度的时间点不存在所述组件的标识，则去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识。

在时间轴上配置时间刻度标识，用户在点击减少时长控制键，若组件的标识在减少的时长范围内，需要对组件的标识进行处理，当接收用户点击减少时长控制键时，识别在时间刻度标识中倒数第二刻度的时间点是否存在组件的标识，若在时间刻度标识中倒数第二刻度的时间点存在组件的标识，则将组件的标识移至在时间刻度标识中的倒数第三刻度的时间点，在组件的标识移至在时间刻度标识中的倒数第三刻度的时间点时，对应地，组件的入场时间点也移至在时间刻度标识中的倒数第三刻度的时间点。去除在时间刻度标识中倒数第一刻度的时间点，形成减少时间轴的总时长之后的时间刻度标识；若在时间刻度标识中倒数第二刻度的时间点不存在组件的标识，则去除在时间刻度标识中倒数第一刻度的时间点，形成减少时间轴的总时长之后的时间刻度标识。

时间刻度标识就是在时间轴上不同的位置标识上不同的时间，在本实施例中，时间刻度标识为多个数字的标识。时间刻度标识中的每一个刻度所表示的时间点可以是默认设定，也可以是用户输入进行设定。

在本实施例中，在所述时间轴的首端的一侧配置预览播放键；在所述预览播放键的下方显示所述时间轴总时长、所述活动时间点标识当前在所述时间轴的位置对应的时间点；装置1包括：

第三控制模块，用于当接收用户点击预览播放键时，控制所述活动时间点标识在所述时间轴上向所述时间轴的末端移动；

第一播放模块，用于若所述活动时间点标识为所述组件的入场时间点时，则播放所述组件的入场时间点对应的入场效果；若所述活动时间点标识为所述组件的离场时间点时，则播放所述组件的离场时间点对应的离场效果。

在时间轴的首端的一侧配置预览播放键，在预览播放键的下方显示时间轴总时长、活动时间点标识当前在时间轴的位置对应的时间点，也就是说，预览播放键下方显示两个时间，一个时间是时间轴总时长，另一个时间是活动时间点标识当前在时间轴的位置对应的时间点。当接收用户点击预览播放键时，控制活动时间点标识在时间轴上向时间轴的末端移动，活动时间点标识在时间轴上移动过程中，当活动时间点标识为组件的入场时间点时，播放组件的入场时间点对应的入场效果，当活动时间点标识为组件的离场时间点时，播放组件的离场时间点对应的离场效果。

第二显示模块12，用于若所述用户在所述组件的入场时间点选择入场效果时，则在所述组件的入场时间点显示所述用户选择入场效果的入场效果标识。

在时间轴显示组件的入场时间点时，在组件的入场时间点默认显示为没有入场效果的入场效果标识，若用户在组件的入场时间点选择入场效果时，则在组件的入场时间点显示用户选择入场效果的入场效果标识。

第三显示模块13，用于若所述用户在所述组件的离场时间点选择离场效果时，则在所述组件的离场时间点显示所述用户选择离场效果的离场效果标识。

在时间轴显示组件的离场时间点时，在组件的离场时间点默认显示为没有离场效果的离场效果标识，若用户在组件的离场时间点选择离场效果时，则在组件的离场时间点显示用户选择离场效果的离场效果标识。

通过时间轴显示各组件的入场时间点、离场时间点、入场时间点对应的入场效果标识、离场时间点对应的离场效果标识，使课件的动画全程可视化，降低在课件制作过程中用户操作难度。

综上所述，配置一时间轴，通过时间轴显示各组件的入场时间点、离场时间点、入场时间点对应的入场效果标识、离场时间点对应的离场效果标识，使课件的动画全程可视化，降低在课件制作过程中用户操作难度，极大地提高了工作效率，旨在解决现有的web在线H5动画课件制作，用户不能通过页面知道入动画的显示先后顺序，以及动画效果，导致在课件制作过程中增加用户操作难度的问题。

如图3所示，本申请实施例中还提供一种计算机设备，该计算机设备可以是服务器，其内部结构可以如图3所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设计的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储基于UI的在线H5动画课件显示方法的模型等数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种基于UI的在线H5动画课件显示方法。

上述处理器执行上述基于UI的在线H5动画课件显示方法的步骤：当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识；若所述用户在所述组件的入场时间点选择入场效果时，则在所述组件的入场时间点显示所述用户选择入场效果的入场效果标识；若所述用户在所述组件的离场时间点选择离场效果时，则在所述组件的离场时间点显示所述用户选择离场效果的离场效果标识。

在一个实施例中，上述当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识的步骤中，包括：当用户在画布中添加第一组件时，在所述时间轴显示所述第一组件的入场时间点和离场时间点，并在所述第一组件的入场时间点的下方显示所述第一组件的标识；

当用户在画布中添加第二组件时，判断所述第二组件的入场时间点与所述第一组件的入场时间点是否相同；

若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识；若所述第二组件的入场时间点与所述第一组件的入场时间点不相同，则在所述时间轴显示所述第二组件的入场时间点和离场时间点，并在所述第二组件的入场时间点的下方显示所述第二组件的标识。

在一个实施例中，上述若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识的步骤之后，包括：

当用户将光标停留在所述数量标识上时，在所述数量标识的上方显示所述第一组件的标识、所述第二组件的标识；若用户点击所述第一组件的标识，则在所述时间轴显示所述第一组件的入场时间点和离场时间点；

若用户点击所述第二组件的标识，则在所述时间轴显示所述第二组件的入场时间点和离场时间点。

在一个实施例中，上述时间轴上配置活动时间点标识；当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识的步骤中，包括：

当用户在画布中添加组件时，识别所述活动时间点标识在所述时间轴的位置；

根据所述活动时间点标识在所述时间轴的位置，在所述时间轴显示所述组件的入场时间点；

根据所述时间轴的末端的时间点，在所述时间轴显示所述组件的离场时间点；

在所述组件的入场时间点的下方显示所述组件的标识。

在一个实施例中，上述时间轴的末端的一侧配置控制所述时间轴增加或者减少总时长的控制键，其中，所述控制键包括增加所述时间轴总时长的增加时长控制键和减少所述时间轴总时长的减少时长控制键；在所述组件的入场时间点的下方显示所述组件的标识的步骤之后，包括：

当接收用户点击所述增加时长控制键时，增加所述时间轴的总时长；

当接收用户点击所述减少时长控制键时，减少所述时间轴的总时长。

在一个实施例中，上述时间轴上配置时间刻度标识；当接收用户点击所述减少时长控制键时，减少所述时间轴的总时长的步骤中，包括：

当接收用户点击所述减少时长控制键时，识别在所述时间刻度标识中倒数第二刻度的时间点是否存在所述组件的标识；

若在所述时间刻度标识中倒数第二刻度的时间点存在所述组件的标识，则将所述组件的标识移至在所述时间刻度标识中的倒数第三刻度的时间点，去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识；

若在所述时间刻度标识中倒数第二刻度的时间点不存在所述组件的标识，则去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识。

在一个实施例中，上述时间轴的首端的一侧配置预览播放键；在所述预览播放键的下方显示所述时间轴总时长、所述活动时间点标识当前在所述时间轴的位置对应的时间点；在所述组件的入场时间点的下方显示所述组件的标识的步骤之后，包括：

当接收用户点击预览播放键时，控制所述活动时间点标识在所述时间轴上向所述时间轴的末端移动；

若所述活动时间点标识为所述组件的入场时间点时，则播放所述组件的入场时间点对应的入场效果；

若所述活动时间点标识为所述组件的离场时间点时，则播放所述组件的离场时间点对应的离场效果。

本领域技术人员可以理解，图3中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定。

本申请实施例的计算机设备，配置一时间轴，通过时间轴显示各组件的入场时间点、离场时间点、入场时间点对应的入场效果标识、离场时间点对应的离场效果标识，使课件的动画全程可视化，降低在课件制作过程中用户操作难度，极大地提高了工作效率，旨在解决现有的web在线H5动画课件制作，用户不能通过页面知道入动画的显示先后顺序，以及动画效果，导致在课件制作过程中增加用户操作难度的问题。

本申请一实施例还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现一种基于UI的在线H5动画课件显示方法，具体为：当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识；若所述用户在所述组件的入场时间点选择入场效果时，则在所述组件的入场时间点显示所述用户选择入场效果的入场效果标识；若所述用户在所述组件的离场时间点选择离场效果时，则在所述组件的离场时间点显示所述用户选择离场效果的离场效果标识。

在一个实施例中，上述当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识的步骤中，包括：当用户在画布中添加第一组件时，在所述时间轴显示所述第一组件的入场时间点和离场时间点，并在所述第一组件的入场时间点的下方显示所述第一组件的标识；

当用户在画布中添加第二组件时，判断所述第二组件的入场时间点与所述第一组件的入场时间点是否相同；

若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识；若所述第二组件的入场时间点与所述第一组件的入场时间点不相同，则在所述时间轴显示所述第二组件的入场时间点和离场时间点，并在所述第二组件的入场时间点的下方显示所述第二组件的标识。

在一个实施例中，上述若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识的步骤之后，包括：

当用户将光标停留在所述数量标识上时，在所述数量标识的上方显示所述第一组件的标识、所述第二组件的标识；若用户点击所述第一组件的标识，则在所述时间轴显示所述第一组件的入场时间点和离场时间点；

若用户点击所述第二组件的标识，则在所述时间轴显示所述第二组件的入场时间点和离场时间点。

在一个实施例中，上述时间轴上配置活动时间点标识；当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识的步骤中，包括：

当用户在画布中添加组件时，识别所述活动时间点标识在所述时间轴的位置；

根据所述活动时间点标识在所述时间轴的位置，在所述时间轴显示所述组件的入场时间点；

根据所述时间轴的末端的时间点，在所述时间轴显示所述组件的离场时间点；

在所述组件的入场时间点的下方显示所述组件的标识。

在一个实施例中，上述时间轴的末端的一侧配置控制所述时间轴增加或者减少总时长的控制键，其中，所述控制键包括增加所述时间轴总时长的增加时长控制键和减少所述时间轴总时长的减少时长控制键；在所述组件的入场时间点的下方显示所述组件的标识的步骤之后，包括：

当接收用户点击所述增加时长控制键时，增加所述时间轴的总时长；

当接收用户点击所述减少时长控制键时，减少所述时间轴的总时长。

在一个实施例中，上述时间轴上配置时间刻度标识；当接收用户点击所述减少时长控制键时，减少所述时间轴的总时长的步骤中，包括：

当接收用户点击所述减少时长控制键时，识别在所述时间刻度标识中倒数第二刻度的时间点是否存在所述组件的标识；

若在所述时间刻度标识中倒数第二刻度的时间点存在所述组件的标识，则将所述组件的标识移至在所述时间刻度标识中的倒数第三刻度的时间点，去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识；

若在所述时间刻度标识中倒数第二刻度的时间点不存在所述组件的标识，则去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识。

在一个实施例中，上述时间轴的首端的一侧配置预览播放键；在所述预览播放键的下方显示所述时间轴总时长、所述活动时间点标识当前在所述时间轴的位置对应的时间点；在所述组件的入场时间点的下方显示所述组件的标识的步骤之后，包括：

当接收用户点击预览播放键时，控制所述活动时间点标识在所述时间轴上向所述时间轴的末端移动；

若所述活动时间点标识为所述组件的入场时间点时，则播放所述组件的入场时间点对应的入场效果；

若所述活动时间点标识为所述组件的离场时间点时，则播放所述组件的离场时间点对应的离场效果。

本申请实施例的存储介质，配置一时间轴，通过时间轴显示各组件的入场时间点、离场时间点、入场时间点对应的入场效果标识、离场时间点对应的离场效果标识，使课件的动画全程可视化，降低在课件制作过程中用户操作难度，极大地提高了工作效率，旨在解决现有的web在线H5动画课件制作，用户不能通过页面知道入动画的显示先后顺序，以及动画效果，导致在课件制作过程中增加用户操作难度的问题。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的和实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可以包括只读存储器（ROM）、可编程ROM（PROM）、电可编程ROM（EPROM）、电可擦除可编程ROM（EEPROM）或闪存。易失性存储器可包括随机存取存储器（RAM）或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM（SRAM）、动态RAM（DRAM）、同步DRAM（SDRAM）、双速据率SDRAM（SSRSDRAM）、增强型SDRAM（ESDRAM）、同步链路（Synchlink）DRAM（SLDRAM）、存储器总线（Rambus）直接RAM（RDRAM）、直接存储器总线动态RAM（DRDRAM）、以及存储器总线动态RAM（RDRAM）等。

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

Claims (8)

1.一种基于UI的在线H5动画课件显示方法，其特征在于，在线H5动画课件的当前页面配置一时间轴，所述方法包括：

当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识；

若所述用户在所述组件的入场时间点选择入场效果时，则在所述组件的入场时间点显示所述用户选择入场效果的入场效果标识；

若所述用户在所述组件的离场时间点选择离场效果时，则在所述组件的离场时间点显示所述用户选择离场效果的离场效果标识;

在所述当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识的步骤中，包括：

当用户在画布中添加第一组件时，在所述时间轴显示所述第一组件的入场时间点和离场时间点，并在所述第一组件的入场时间点的下方显示所述第一组件的标识；

当用户在画布中添加第二组件时，判断所述第二组件的入场时间点与所述第一组件的入场时间点是否相同；

若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识；若所述第二组件的入场时间点与所述第一组件的入场时间点不相同，则在所述时间轴显示所述第二组件的入场时间点和离场时间点，并在所述第二组件的入场时间点的下方显示所述第二组件的标识;

在所述若所述第二组件的入场时间点与所述第一组件的入场时间点相同，则将所述第一组件的标识更换显示为表示组件数量为两个的数量标识的步骤之后，包括：

当用户将光标停留在所述数量标识上时，在所述数量标识的上方显示所述第一组件的标识、所述第二组件的标识；若用户点击所述第一组件的标识，则在所述时间轴显示所述第一组件的入场时间点和离场时间点；

若用户点击所述第二组件的标识，则在所述时间轴显示所述第二组件的入场时间点和离场时间点。

2.根据权利要求1所述的基于UI的在线H5动画课件显示方法，其特征在于，在所述时间轴上配置活动时间点标识，所述当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识的步骤中，包括：

当用户在画布中添加组件时，识别所述活动时间点标识在所述时间轴的位置；

根据所述活动时间点标识在所述时间轴的位置，在所述时间轴显示所述组件的入场时间点；

根据所述时间轴的末端的时间点，在所述时间轴显示所述组件的离场时间点；

在所述组件的入场时间点的下方显示所述组件的标识。

3.根据权利要求2所述的基于UI的在线H5动画课件显示方法，其特征在于，在所述时间轴的末端的一侧配置控制所述时间轴增加或者减少总时长的控制键，其中，所述控制键包括增加所述时间轴总时长的增加时长控制键和减少所述时间轴总时长的减少时长控制键，在所述组件的入场时间点的下方显示所述组件的标识的步骤之后，包括：

当接收用户点击所述增加时长控制键时，增加所述时间轴的总时长；

当接收用户点击所述减少时长控制键时，减少所述时间轴的总时长。

4.根据权利要求3所述的基于UI的在线H5动画课件显示方法，其特征在于，在所述时间轴上配置时间刻度标识，在所述当接收用户点击所述减少时长控制键时，减少所述时间轴的总时长的步骤中，包括：

当接收用户点击所述减少时长控制键时，识别在所述时间刻度标识中倒数第二刻度的时间点是否存在所述组件的标识；

若在所述时间刻度标识中倒数第二刻度的时间点存在所述组件的标识，则将所述组件的标识移至在所述时间刻度标识中的倒数第三刻度的时间点，去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识；

若在所述时间刻度标识中倒数第二刻度的时间点不存在所述组件的标识，则去除在所述时间刻度标识中倒数第一刻度的时间点，形成减少所述时间轴的总时长之后的时间刻度标识。

5.根据权利要求2所述的基于UI的在线H5动画课件显示方法，其特征在于，在所述时间轴的首端的一侧配置预览播放键，在所述预览播放键的下方显示所述时间轴总时长、所述活动时间点标识当前在所述时间轴的位置对应的时间点，在所述组件的入场时间点的下方显示所述组件的标识的步骤之后，包括：

当接收用户点击预览播放键时，控制所述活动时间点标识在所述时间轴上向所述时间轴的末端移动；

若所述活动时间点标识为所述组件的入场时间点时，则播放所述组件的入场时间点对应的入场效果；

若所述活动时间点标识为所述组件的离场时间点时，则播放所述组件的离场时间点对应的离场效果。

6.一种基于UI的在线H5动画课件显示装置，用于实现权利要求1至5中任一项所述的方法，其特征在于，在线H5动画课件的当前页面配置一时间轴；所述装置包括：

第一显示模块，用于当用户在画布中添加组件时，在所述时间轴显示所述组件的入场时间点和离场时间点，并在所述组件的入场时间点的下方显示所述组件的标识；

第二显示模块，用于若所述用户在所述组件的入场时间点选择入场效果时，则在所述组件的入场时间点显示所述用户选择入场效果的入场效果标识；

第三显示模块，用于若所述用户在所述组件的离场时间点选择离场效果时，则在所述组件的离场时间点显示所述用户选择离场效果的离场效果标识。

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

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