CN104050579A - 用于实现轮播动画的方法及装置 - Google Patents

Abstract

本申请公开了用于实现轮播动画的方法及装置，其中，所述方法包括：获取各个切片的动画播放列表；其中，对于一个切片而言，所述动画播放列表包括切入动画播放列表和/或切出动画播放列表，每个动画播放列表中保存有至少一个动画对象的信息，以及动画对象对应的播放效果信息；当需要进行切片的切换时，根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表，创建动画播放序列；根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放，以完成切片间的轮播切换。通过本申请，能够实现个性化的分层动画，并提高通用性。

Description

用于实现轮播动画的方法及装置

技术领域

本申请涉及动画播放技术领域，特别是涉及用于实现轮播动画的方法及装置。

背景技术

在PC或者移动终端上的Web应用中，很多场景需要使用到类似tab切换的图片轮播。例如，在某购物网站的首页上，向买家推荐符合大多数买家意愿并且符合时令的相关热销的商品，这样的商品可能不止一个，并且一般需要以较大尺寸的图片做链接，以便引起买家的注意，起到重点推荐的作用。但用于推荐的页面区域却是有限的，因此，在这样的情况下，就可以在网页中加入一个轮播组件。

轮播组件是用以实现幻灯切换效果的组件，可以在网页中某位置轮换显示图片、广告等内容。每个切换单元为一帧，组件的展现方式为：依次循环切换显示其中一帧内容。也即，在某一时刻，在推荐区域只显示其中一个商品的链接图片，在间隔一定的时间后，再自动在该区域显示下一个商品的链接图片。一个典型的应用就是淘宝网首页上的轮播广告。

对于轮播组件而言，每一帧内容中通常会包含很多元素，一帧中的元素集被称为“一组内容”，这“一组”即是一个“切片”。一个轮播组件可包含多个切片，每次切换只展示其中一个切片。例如，某轮播组件需要对五组广告进行轮播，则每组广告在显示时需要包含的元素就组成一个切片，五组广告对应五个切片。

最初，网页中的轮播组件在切换时，通常只能显示单一的动画效果。例如：从一个切片左右滑动到另一个切片，或由不透明变为透明等，轮播的显示效果不够丰富。随着动画技术的发展，现有技术中出现了支持分层动画的轮播组件。这种组件在切换切片时，可以显示分层动画，例如：某切片中同时显示了“文字渐显”和“文字滑动”两个动画，等等。但是，现有的轮播组件一般只支持有限的几种动画组合，如：渐隐、渐现、滑动等的组合；并且，这些动画组合的模式已被固化在代码中，使用者只能在这几种动画效果中选择，如果在某些应用场景中，需要显示个性化的分层动画(如：颜色渐变+滑动等)，这些现有的组件代码是无法复制过来直接使用的，使得最终的分层动画效果缺乏灵活性，轮播组件本身也缺乏通用性，影响动画制作效率。

发明内容

本申请提供了用于实现轮播动画的方法及装置，能够实现个性化的分层动画，并提高通用性和动画制作效率。

本申请提供了如下方案：

一种用于实现轮播动画的方法，包括：

获取各个切片的动画播放列表；其中，对于一个切片而言，所述动画播放列表包括切入动画播放列表和/或切出动画播放列表，每个动画播放列表中保存有至少一个动画对象的信息，以及动画对象对应的播放效果信息；

当需要进行切片的切换时，根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表，创建动画播放序列；

根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放，以完成切片间的轮播切换。

一种用于实现轮播动画的装置，包括：

动画播放列表获取单元，用于获取各个切片的动画播放列表；其中，对于一个切片而言，所述动画播放列表包括切入动画播放列表和/或切出动画播放列表，每个动画播放列表中保存有至少一个动画对象的信息，以及动画对象对应的播放效果信息；

动画播放序列创建单元，用于当需要进行切片的切换时，根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表，创建动画播放序列；

动画播放单元，用于根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放，以完成切片间的轮播切换。

根据本申请提供的具体实施例，本申请公开了以下技术效果：

在本申请实施例中，通过向使用者提供分层动画的底层实现接口，使得使用者可以按照自己的需要任意得对动画进行个性化的设计，包括各层分别显示什么动画，各个动画本身以及之间所采用的播放效果，等等，不会再受到固化代码的限制，可以更加灵活地进行个性化的动画设计。对于轮播组件而言，可以根据各个接口传入的配置参数，获取切片的动画播放列表，进而获取动画对象的信息以及对应的播放效果信息，然后在需要进行切片的切换时，就可以根据待隐藏切片以及待显示切片的动画播放列表中保存的这些信息，建立起动画播放序列，并据此进行动画的播放即可。因此，不再受到特定应用场景的限制，提高了通用性和动作制作效率。

在为某切片创建了动画播放列表之后，可以在缓存中进行保存，以后再需要获取该切片的动画播放列表时，就可以直接从缓存中读取，而不需要再重新创建，因此，可以提高动画的播放效率。

当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的方法的流程图；

图2是本申请实施例提供的动画播放过程的流程图；

图3是本申请实施例提供的装置的示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本申请保护的范围。

在本申请实施例中，可以为使用者提供一个轮播组件，并将其底层实现抽象出来，为使用者提供可配置的接口(可以用JavaScript实现，也可以用其他语言实现)，相应的，使用者就可以利用这些接口自定义地设计分层动画。其中，这些创建分层动画所需的接口可以包括：

一、用于创建动画的第一接口1：可以为每个动画设置CSS(CascadingStyle Sheet，级联样式表)属性起始值(在页面中的位置、透明度等)、CSS属性结束值、动画时长、动画运动轨迹，等等；

二、用于创建动画组的第二接口2：可以将多个动画设置为一个动画组，多个动画组也可以设置为一个大的动画组，动画组与动画也可以设置为一个大的动画组，等等。也即，多个动画可以组成一个动画组，每个动画组中还可以包含多个动画组。例如，动画A与动画B组成动画组I，动画C、动画D、动画E组成动画组II，动画组I和动画组II还可以组成一个大的动画组III，另外，动画组III中还包括动画F，等等。

三、用于向动画组中添加动画的第三接口3：可设置添加的动画与其它动画之间的播放顺序(同时播放或顺序播放)，设置延迟播放时间等；

四、用于向动画组中添加动画组的第四接口4：可设置添加的动画组与其它动画/动画组之间的播放顺序(同时播放或顺序播放)，设置延迟播放时间等。

基于上述接口，即可实现各种个性化的分层动画。使用者不仅可以创建各种单一的动画效果(如：缩放、颜色渐变)，还可以将这些单一的动画效果，以不同的顺序组合到一起，创建分层动画，形成更具个性化的动画效果。这样，在使用轮播组件实现不同切片之间的切换时，就可以使用上述接口分别为各个切片设置动画，并且对于同一个切片而言，还可以分别设置切入动画以及切出动画，使得无论是切入还是切出，都可以显示相应的动画。其中，所谓的切入动画是指切片被显示时，显示的动画，切出动画是指切片被隐藏时，显示动画。例如，从切片A向切片B切换的过程中，需要将切片A隐藏，将切片B显示，于是，在此过程中，切片A执行切出，切片B执行切入，相应的，伴随切片A的切出过程，就可以显示切片A的切出动画，伴随切片B的切入过程，就可以显示切片B的切入动画。如果轮播组件的所有切片都设置了切入动画和切出动画，则当从切片A切换到切片B时，会同时播放切片A的切出动画，和切片B的切入动画。当在多个切片中快速切换时，如果切片A的切入动画尚未播放完，就切换到切片B，这时，会自动停止切片A的切入动画，显示切片A的切出动画和切片B的切入动画。当然，在实际应用中，对于某切片而言，也可能仅单独设置了切入动画，而不设置切出动画，或者仅单独设置了切出动画，而没有设置切入动画。但总之，无论是切入动画还是切出动画，都可以按照使用上述接口设置为个性化的分层动画。

例如，对于某切片A而言，使用者需要在其切入时显示以下效果：切片的背景图片逐渐显现，与此同时，部分文字由上至下滑入，这部分文字滑入完成之后，另一部分文字由左向右滑入。在使用本申请实施例提供的接口的情况下，使用者就可以设置三个动画，分别为动画a(对应背景图片渐现)、动画b(对应部分文字由上至下滑入)、动画c(对应部分文字由左向右滑入)，并且，需可以将这三个动画之间的播放顺序设置为：动画a与动画b同时播放，动画b播放完毕之后播放动画c。为了实现上述效果，使用者就可以通过以下方式实现：

首先，调用第一接口1，分别创建各个动画，同时可以设置各个动画的CSS属性，及其起始值、结束值、动画时长、动画运动轨迹等。例如，创建动画a，并将其设置为透明度由高到低，动画时长为3秒；创建动画b，并将其设置为由上至下滑入，动画时长为1秒；创建动画c，并将其设置为由左向右滑入，动画时长为1秒。

然后，为了实现对各个动画在播放顺序上进行控制，可以首先调用第二接口2，创建动画组I，并调用第三接口3，将动画b和动画c添加到动画组I中，同时设置动画b与动画c的播放顺序为顺序播放，也即先播放动画b，动画b播放完毕之后再播放动画c。

之后，再调用第二接口2，创建动画组II，然后调用第三接口3，将动画a添加到动画组II中，同时调用第四接口4，将动画组I也添加到动画组II中，并将动画a与动画组I的播放顺序设置为同时播放。

完成以上设置之后，相当于可以将预先设置好的各个参数通过相应的接口传入给轮播组件，相应的，轮播组件在需要向该切片A切换时，就可以读取从各个接口传入的参数值，并相应的进行动画对象的创建、动画组的创建等等，并最终根据这些参数值完成动画的播放，达到使用者最初预期的显示效果。

总之，本申请实施例通过向使用者提供分层动画的底层实现接口，使得使用者可以按照自己的需要任意得对动画进行个性化的设计，包括各层分别显示什么动画，各个动画本身以及之间所采用的播放效果，等等，不会再受到固化代码的限制。对于轮播组件而言，通过解析使用者传入的参数进行动画的播放即可，提高了通用性和动画制作效率。当然，在实际应用中，使用者的设置过程相当于是传入参数的过程，实际用于显示动画效果的执行主体是轮播组件。下面就对实现过程中轮播组件需要进行的处理进行详细地介绍。

参见图1，本申请实施例提供的用于实现轮播动画的方法可以包括以下步骤：

S101：获取各个切片的动画播放列表；其中，对于一个切片而言，所述动画播放列表包括切入动画播放列表和/或切出动画播放列表，每个动画播放列表中保存有至少一个动画对象的信息，以及动画对象对应的播放效果信息；

如前文所述，一个切片可以既具有切入动画，又具有切出动画，或者仅具有切入动画或者切出动画，这些均可由使用者根据自己的需求进行设计。但无论是切入动画还是切出动画，都可以设计为分层动画，也即由多个子动画组成，因此，对于一个切片而言，均可以根据通过各个接口传入的参数，建立起动画播放列表，该列表中用于保存一个或多个动画对象的信息，以及各个动画对象对应的播放效果信息，这里的播放效果信息可以包括动画对象的CSS属性起始值及结束值、播放时长、运动轨迹等。并且，如果一个切片既具有切入动画又具有切出动画，则可以分别为该切片建立起切入动画播放列表，以及切出动画播放列表，每个动画列表中都可以包括一个或者多个动画对象。

具体在创建动画播放列表时，可以根据通过第一接口1传入的配置参数，来创建动画对象，并获取各个动画对象对应的动画效果信息，并将各个动画对象的信息以及各自对应的动画效果信息添加到动画播放列表中，完成动画播放列表的创建。

如果使用者还设置了各个动画对象之间的播放顺序、延迟时间等信息，则首先可以通过第二接口2传入的配置参数获取到关于动画组的配置参数信息，相应的，轮播组件可以根据这些配置参数，创建起动画组，并通过第三接口3和/或第四接口4传入的配置参数获取到该动画组包括哪些成员，例如，包括哪些动画对象，哪些动画组。同时还可以获取到动画组中各个成员之间的播放控制信息，包括播放顺序、延迟时间等信息；如果动画组中包括单独的动画对象，则可以通过第一接口1传入的配置参数获取到动画对象的具体信息以及播放效果信息；如果动画组中还包括其他子动画组，则可以进一步通过第三接口3和/或第四接口4传入的配置参数获取到该动画组包括哪些成员，以此类推，循环遍历该动画组的所有配置，创建动画对象，直到获取到所有动画对象的信息以及对应的播放效果信息。将这些信息全部写入到动画播放列表中，完成动画播放列表的建立。对于每个动画对象，均可根据插入点的时刻、动画时长、延迟时间等属性，计算出动画的起始时间和结束时间。

在以上所述中，动画播放列表可以通过预置的接口读入的配置参数来创建的，在实际应用中，为了提高动画运行效率，在动画播放列表创建完毕之后，就可以保存在缓存中，以后均从缓存中读取即可。因此，具体在获取切片的动画播放列表时，可以首先检查缓存中是否已经存在，如果存在就可以直接从缓存中获取，如果不存在，则根据从各个接口传入的配置参数，来创建动画对象，并获取各个动画对象对应的动画效果信息，并将各个动画对象的信息以及各自对应的动画效果信息添加到动画播放列表中，再将该创建起的动画播放列表保存在缓存中，以供后续使用。

S102：当需要进行切片的切换时，根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表，创建动画播放序列；

当轮播组件需要进行切片的切换时，可以确定出待隐藏切片以及待显示切片。其中，带隐藏切片也即当前正在显示的切片，而待显示的切片则可能有两种情况，一种情况是，在自动进行切片切换的情况下，进行切片切换的条件一般是当前切片的显示时间达到了某一阈值时间，此时，可以根据默认的切片切换顺序确定出当前显示切片的下一切片，并将该切片确定为待显示的切片。另一种情况是，浏览者手动点击选择切片的显示，进行切片切换的条件就是接收到用户的点击等选择操作，此时，需要将用户选择的切片确定为待显示切片。例如，当前正在显示第一个切片，按照默认的切换顺序，待显示的下一切片应该是第二个切片，但用户点击了第三个切片的导航图标(可能显示在轮播区域的右下角或者下方或者右侧等等，导航图标的显示形式一般为数字、圆点等图形、缩略图等等)，因此，就应该将第三个切片确定为待显示切片。

在确定了待隐藏切片以及待显示切片之后，就可以确定出需要将待隐藏图片切出，将待显示图片切入。如果待隐藏切片存在切出动画，待显示切片存在切入动画，则可以分别取出待隐藏切片的切出动画播放列表，以及待显示切片的切入动画播放列表，并根据这两个列表建立起动画播放序列。动画播放序列相当于是一个临时创建的对象，并且仅在此次切换过程中使用，下次切换时重新创建。初始时，动画播放序列中的动画对象与动画播放列表完全相同，只是随着动画的播放，动画播放序列中的动画对象对逐渐减少，例如，某动画对象已经播放完毕，则可以从动画播放序列中删除，等等。

S103：根据所述动画播放序列以及各个动画对象对应的播放效果信息，进行动画的播放，以完成切片间的轮播切换。

由于动画播放序列中记录了各个动画对象的播放顺序，因此，再结合各个动画对象的播放效果信息，即可实现切片轮播切换过程中动画的播放。具体在进行动画的播放时，一个动画由多帧组成，每帧为静态的画面，因此，轮播组件可以根据播放时间计算和设置每帧的CSS属性值，各帧之间的显示间隔为n毫秒(通常小于10毫秒)，这样，连续起来就会显示为动画。

由于某一时刻可能会有多个动画同时播放，因此，动画的播放流程可以为：首先，从动画播放序列中获取待播放的动画对象(该动画对象可能正在播放过程中)，如果判断出该待播放的动画对象正处于播放过程中，则根据该动画对象已经播放的时长以及预置的动画算法，计算出当前动画DOM节点的级联样式表(CSS)属性值，然后根据计算出的CSS属性值，对所述动画DOM节点进行显示。其中，为了判断待播放的动画对象是否正处于播放过程中，可以首先获取当前时间点以及待播放动画的起始播放时间，这样，就可以判断出起始播放时间与当前时间点之间的时间间隔是否已达到为该待播放动画配置的播放时长，如果已经达到，则证明该动画对象已经播放完毕，否则，则可以进一步判断动画DOM节点的属性是否已达到配置的结束值，如果达到，则该动画对象已经播放完毕，否则，证明该动画对象正在播放过程中。具体实现时，参见图2，以上过程可以包括以下步骤：

S201：根据动画播放列表，创建动画播放序列；

S202：遍历动画播放序列，如果遍历到最后，则转到步骤S209，否则，进入S203；

S203：获取待播放的动画对象；

S204：获取当前时间点以及该待播放动画对象的起始播放时间；由于在动画播放列表中记录了各个动画对象的播放顺序、播放时长、延迟时间等信息，并且可以记录下整个动画播放序列开始播放时的时间点，因此，在动画播放过程中，可以获取到各个动画对象在播放时的起始时间及结束时间；

S205：检查当前时间点是否已经超出待播放动画对象的结束时间，如果是，则代表该动画对象已经播放完毕，将该动画对象从动画播放序列中删除，并转到步骤S202；否则，进入步骤S206；

S206：检查动画DOM节点的属性是否已达到配置的结束值，如果已达到，则将该动画对象从动画播放序列中删除，并转到步骤S202，否则，进入步骤S207；

S207：根据当前时间点与待播放动画对象的起始播放时间，计算该待播放动画对象已经运行的时长。然后使用内置的动画算法，传入已运行的时长，计算出当前DOM节点的CSS属性值；

S208：设置DOM节点的CSS属性为计算出的值，并转到步骤S202；

S209：如果动画播放序列为空，则动画播放完成。否则，延迟n毫秒，重置遍历索引，转到步骤S202，继续显示动画的下一帧。

与本申请实施例提供的用于实现轮播动画的方法相对应，本申请实施例还提供了一种用于实现轮播动画的装置，参见图3，该装置可以包括：

动画播放列表获取单元301，用于获取各个切片的动画播放列表；其中，对于一个切片而言，所述动画播放列表包括切入动画播放列表和/或切出动画播放列表，每个动画播放列表中保存有至少一个动画对象的信息，以及动画对象对应的播放效果信息；

动画播放序列创建单元302，用于当需要进行切片的切换时，根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表，创建动画播放序列；

动画播放单元303，用于根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放，以完成切片间的轮播切换。

具体实现时，可以根据配置参数创建起动画播放列表，此时，动画播放列表获取单元301可以包括：

参数解析子单元，用于解析通过预置的接口传入的配置参数，获取为各个切片设置的动画对象的信息，以及动画对象对应的播放效果信息；

添加子单元，用于将所述动画对象的信息以及对应的播放效果信息添加到对应切片的动画播放列表中，得到各个切片的动画播放列表。

其中，如果配置参数中仅设置了各个动画的播放效果，则所述参数解析子单元可以包括：

第一解析子单元，用于解析通过预置的用于创建动画的接口为各个切片传入的配置参数，创建动画对象，并获取各个动画对象对应的播放效果信息。

如果配置参数中还设置了各个动画对象之间的播放顺序等控制信息，所述参数解析子单元可以包括：

第二解析子单元，用于解析通过预置的用于创建动画组的接口为各个切片传入的配置参数，创建动画组对象；

第三解析子单元，用于解析通过预置的用于向动画组中添加动画或动画组的接口传入的配置参数，获知动画组对象中包含的成员，以及各个成员之间的播放控制信息；其中，所述成员包括动画对象或者动画组对象；

第四解析子单元，用于解析通过预置的用于创建动画的接口为动画组内的动画对象传入的配置参数，创建动画对象，并获取各个动画对象对应的播放效果信息；

所述添加子单元具体可以用于将所述动画组对象的信息、动画组对象中包含的各个成员的信息、各个动画对象对应的播放效果信息、以及动画组内包含的各个成员之间的播放控制信息，添加到切片的动画播放列表中。

其中，所述动画组内包含的各个成员之间的播放控制信息包括：动画组内各个成员之间的播放顺序和/或延迟时间。

具体实现时，为了提高动画播放效率，该装置还可以包括：

保存单元，用于将创建的动画播放列表保存在缓存中；

所述动画播放列表获取单元301可以包括：

缓存读取子单元，用于读取缓存中的数据，获取各个切片的动画播放列表。

其中，由于动画都是由一帧一帧的图片构成的，并且可能是多个动画对象同时播放，因此，具体实现时，所述动画播放单元303可以包括：

动画对象获取子单元，用于从所述动画播放序列中获取待播放的动画对象；

判断子单元，用于判断该待播放的动画对象是否正处于播放过程中；

显示子单元，用于如果所述判断子单元的判断结果为是，则根根据该动画对象已经播放的时长以及预置的动画算法，计算出当前动画文档对象模型DOM节点的级联样式表CSS属性值；

修改子单元，用于利用所述当前动画DOM节点的CSS属性值，对所述动画DOM节点进行显示。

其中，所述判断子单元可以包括：

时间信息获取子单元，用于获取当前时间点以及所述待播放动画的起始播放时间；

第一检查子单元，用于检查所述起始播放时间与当前时间点之间的间隔是否已达到为该待播放动画配置的播放时长；

第二检查子单元，用于如果未达到所述播放时长，则检查动画DOM节点的属性是否已达到配置的结束值，如果未达到，则确定该待播放的动画对象正处于播放过程中。

在本申请实施例中，所述动画对象的播放效果信息包括以下各项中的一项或多项：

动画对象的CSS属性、CSS属性的起始值及结束值、播放时长、运动轨迹。

总之，通过本申请实施例提供的上述用于实现轮播动画的装置，通过向使用者提供分层动画的底层实现接口，使得使用者可以按照自己的需要任意得对动画进行个性化的设计，包括各层分别显示什么动画，各个动画本身以及之间所采用的播放效果，等等，不会再受到固化代码的限制。对于轮播组件而言，可以根据各个接口传入的配置参数，获取切片的动画播放列表，进而获取动画对象的信息以及对应的播放效果信息，然后在需要进行切片的切换时，就可以根据待隐藏切片以及待显示切片的动画播放列表中保存的这些信息，建立起动画播放序列，并据此进行动画的播放即可。因此，不再受到特定应用场景的限制，提高了通用性。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上对本申请所提供的用于实现轮播动画的方法及装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。

Claims (10)

1.一种用于实现轮播动画的方法，其特征在于，包括：

获取各个切片的动画播放列表；其中，对于一个切片而言，所述动画播放列表包括切入动画播放列表和/或切出动画播放列表，每个动画播放列表中保存有至少一个动画对象的信息，以及动画对象对应的播放效果信息；

当需要进行切片的切换时，根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表，创建动画播放序列；

根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放，以完成切片间的轮播切换。

2.根据权利要求1所述的方法，其特征在于，所述获取各个切片的动画播放列表包括：

解析通过预置的接口传入的配置参数，获取为各个切片设置的动画对象的信息，以及动画对象对应的播放效果信息；

将所述动画对象的信息以及对应的播放效果信息添加到对应切片的动画播放列表中，得到各个切片的动画播放列表。

3.根据权利要求2所述的方法，其特征在于，所述解析通过预置的接口传入的配置参数，获取为各个切片设置的动画对象的信息，以及动画对象对应的播放效果信息包括：

解析通过预置的用于创建动画的接口为各个切片传入的配置参数，创建动画对象，并获取各个动画对象对应的播放效果信息。

4.根据权利要求2所述的方法，其特征在于，所述解析通过预置的接口传入的配置参数，获取为各个切片设置的动画对象的信息，以及动画对象对应的播放效果信息包括：

解析通过预置的用于创建动画组的接口为各个切片传入的配置参数，创建动画组对象；

解析通过预置的用于向动画组中添加动画或动画组的接口传入的配置参数，获知动画组对象中包含的成员，以及各个成员之间的播放控制信息；其中，所述成员包括动画对象或者动画组对象；

解析通过预置的用于创建动画的接口为动画组内的动画对象传入的配置参数，创建动画对象，并获取各个动画对象对应的播放效果信息。

5.根据权利要求4所述的方法，其特征在于，所述动画组内包含的各个成员之间的播放控制信息包括：动画组内各个成员之间的播放顺序和/或延迟时间。

6.根据权利要求2至5任一项所述的方法，其特征在于，还包括：

将创建的动画播放列表保存在缓存中；

所述获取各个切片的动画播放列表包括：

读取缓存中的数据，获取各个切片的动画播放列表。

7.根据权利要求1至5任一项所述的方法，其特征在于，所述根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放包括：

从所述动画播放序列中获取待播放的动画对象；

判断该待播放的动画对象是否正处于播放过程中；

如果是，则根根据该动画对象已经播放的时长以及预置的动画算法，计算出当前动画文档对象模型DOM节点的级联样式表CSS属性值；

利用所述当前动画DOM节点的CSS属性值，对所述动画DOM节点进行显示。

8.根据权利要求7所述的方法，其特征在于，所述判断该待播放的动画对象是否正处于播放过程中包括：

获取当前时间点以及所述待播放动画的起始播放时间；

判断所述起始播放时间与当前时间点之间的间隔是否已达到为该待播放动画配置的播放时长；

如果未达到所述播放时长，则检查动画DOM节点的属性是否已达到配置的结束值，如果未达到，则确定该待播放的动画对象正处于播放过程中。

9.根据权利要求1至5任一项所述的方法，其特征在于，所述动画对象的播放效果信息包括以下各项中的一项或多项：

动画对象的CSS属性、CSS属性的起始值及结束值、播放时长、运动轨迹。

10.一种用于实现轮播动画的装置，其特征在于，包括：

动画播放列表获取单元，用于获取各个切片的动画播放列表；其中，对于一个切片而言，所述动画播放列表包括切入动画播放列表和/或切出动画播放列表，每个动画播放列表中保存有至少一个动画对象的信息，以及动画对象对应的播放效果信息；

动画播放序列创建单元，用于当需要进行切片的切换时，根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表，创建动画播放序列；

动画播放单元，用于根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放，以完成切片间的轮播切换。