用于实现轮播动画的方法及装置制造方法及图纸

技术编号:10438265 阅读:89 留言:0更新日期:2014-09-17 14:30
本申请公开了用于实现轮播动画的方法及装置,其中,所述方法包括:获取各个切片的动画播放列表;其中,对于一个切片而言,所述动画播放列表包括切入动画播放列表和/或切出动画播放列表,每个动画播放列表中保存有至少一个动画对象的信息,以及动画对象对应的播放效果信息;当需要进行切片的切换时,根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表,创建动画播放序列;根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放,以完成切片间的轮播切换。通过本申请,能够实现个性化的分层动画,并提高通用性。

【技术实现步骤摘要】
用于实现轮播动画的方法及装置
本申请涉及动画播放
,特别是涉及用于实现轮播动画的方法及装置。
技术介绍
在PC或者移动终端上的Web应用中,很多场景需要使用到类似tab切换的图片轮播。例如,在某购物网站的首页上,向买家推荐符合大多数买家意愿并且符合时令的相关热销的商品,这样的商品可能不止一个,并且一般需要以较大尺寸的图片做链接,以便引起买家的注意,起到重点推荐的作用。但用于推荐的页面区域却是有限的,因此,在这样的情况下,就可以在网页中加入一个轮播组件。 轮播组件是用以实现幻灯切换效果的组件,可以在网页中某位置轮换显示图片、广告等内容。每个切换单元为一帧,组件的展现方式为:依次循环切换显示其中一帧内容。也即,在某一时刻,在推荐区域只显示其中一个商品的链接图片,在间隔一定的时间后,再自动在该区域显示下一个商品的链接图片。一个典型的应用就是淘宝网首页上的轮播广生口 ο 对于轮播组件而言,每一帧内容中通常会包含很多元素,一帧中的元素集被称为“一组内容”,这“一组”即是一个“切片”。一个轮播组件可包含多个切片,每次切换只展示其中一个切片。例如,某轮播组件需要对五组广告进行轮播,则每组广告在显示时需要包含的元素就组成一个切片,五组广告对应五个切片。 最初,网页中的轮播组件在切换时,通常只能显示单一的动画效果。例如:从一个切片左右滑动到另一个切片,或由不透明变为透明等,轮播的显示效果不够丰富。随着动画技术的发展,现有技术中出现了支持分层动画的轮播组件。这种组件在切换切片时,可以显示分层动画,例如:某切片中同时显示了“文字渐显”和“文字滑动”两个动画,等等。但是,现有的轮播组件一般只支持有限的几种动画组合,如:渐隐、渐现、滑动等的组合;并且,这些动画组合的模式已被固化在代码中,使用者只能在这几种动画效果中选择,如果在某些应用场景中,需要显示个性化的分层动画(如:颜色渐变+滑动等),这些现有的组件代码是无法复制过来直接使用的,使得最终的分层动画效果缺乏灵活性,轮播组件本身也缺乏通用性,影响动画制作效率。
技术实现思路
本申请提供了用于实现轮播动画的方法及装置,能够实现个性化的分层动画,并提高通用性和动画制作效率。 本申请提供了如下方案: 一种用于实现轮播动画的方法,包括: 获取各个切片的动画播放列表;其中,对于一个切片而言,所述动画播放列表包括切入动画播放列表和/或切出动画播放列表,每个动画播放列表中保存有至少一个动画对象的信息,以及动画对象对应的播放效果信息; 当需要进行切片的切换时,根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表,创建动画播放序列; 根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放,以完成切片间的轮播切换。 一种用于实现轮播动画的装置,包括: 动画播放列表获取单兀,用于获取各个切片的动画播放列表;其中,对于一个切片而言,所述动画播放列表包括切入动画播放列表和/或切出动画播放列表,每个动画播放列表中保存有至少一个动画对象的信息,以及动画对象对应的播放效果信息; 动画播放序列创建单元,用于当需要进行切片的切换时,根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表,创建动画播放序列; 动画播放单元,用于根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放,以完成切片间的轮播切换。 根据本申请提供的具体实施例,本申请公开了以下技术效果: 在本申请实施例中,通过向使用者提供分层动画的底层实现接口,使得使用者可以按照自己的需要任意得对动画进行个性化的设计,包括各层分别显示什么动画,各个动画本身以及之间所采用的播放效果,等等,不会再受到固化代码的限制,可以更加灵活地进行个性化的动画设计。对于轮播组件而言,可以根据各个接口传入的配置参数,获取切片的动画播放列表,进而获取动画对象的信息以及对应的播放效果信息,然后在需要进行切片的切换时,就可以根据待隐藏切片以及待显示切片的动画播放列表中保存的这些信息,建立起动画播放序列,并据此进行动画的播放即可。因此,不再受到特定应用场景的限制,提高了通用性和动作制作效率。 在为某切片创建了动画播放列表之后,可以在缓存中进行保存,以后再需要获取该切片的动画播放列表时,就可以直接从缓存中读取,而不需要再重新创建,因此,可以提高动画的播放效率。 当然,实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。 【附图说明】 为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。 图1是本申请实施例提供的方法的流程图; 图2是本申请实施例提供的动画播放过程的流程图; 图3是本申请实施例提供的装置的示意图。 【具体实施方式】 下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员所获得的所有其他实施例,都属于本申请保护的范围。 在本申请实施例中,可以为使用者提供一个轮播组件,并将其底层实现抽象出来,为使用者提供可配置的接口(可以用JavaScript实现,也可以用其他语言实现),相应的,使用者就可以利用这些接口自定义地设计分层动画。其中,这些创建分层动画所需的接口可以包括: 一、用于创建动画的第一接口 1:可以为每个动画设置CSS(Cascading StyleSheet,级联样式表)属性起始值(在页面中的位置、透明度等)、CSS属性结束值、动画时长、动画运动轨迹,等等; 二、用于创建动画组的第二接口 2:可以将多个动画设置为一个动画组,多个动画组也可以设置为一个大的动画组,动画组与动画也可以设置为一个大的动画组,等等。也即,多个动画可以组成一个动画组,每个动画组中还可以包含多个动画组。例如,动画A与动画B组成动画组I,动画C、动画D、动画E组成动画组II,动画组I和动画组II还可以组成一个大的动画组III,另外,动画组III中还包括动画F,等等。 三、用于向动画组中添加动画的第三接口 3:可设置添加的动画与其它动画之间的播放顺序(同时播放或顺序播放),设置延迟播放时间等; 四、用于向动画组中添加动画组的第四接口 4:可设置添加的动画组与其它动画/动画组之间的播放顺序(同时播放或顺序播放),设置延迟播放时间等。 基于上述接口,即可实现各种个性化的分层动画。使用者不仅可以创建各种单一的动画效果(如:缩放、颜色渐变),还可以将这些单一的动画效果,以不同的顺序组合到一起,创建分层动画,形成更具个性化的动画效果。这样,在使用轮播组件实现不同切片之间的切换时,就可以使用上述接口分别为各个切片设置动画,并且对于同一个切片而言,还可以分别设置切入动画以及切出动画,使得无论是切入还是切出,都可以显示相应的动画。其中,所谓的切入动画是指切片被显示时,显示的动画,切出动画是指切片被隐藏时,显示动画。例如,从切片A本文档来自技高网
...
用于实现轮播动画的方法及装置

【技术保护点】
一种用于实现轮播动画的方法,其特征在于,包括:获取各个切片的动画播放列表;其中,对于一个切片而言,所述动画播放列表包括切入动画播放列表和/或切出动画播放列表,每个动画播放列表中保存有至少一个动画对象的信息,以及动画对象对应的播放效果信息;当需要进行切片的切换时,根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表,创建动画播放序列;根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放,以完成切片间的轮播切换。

【技术特征摘要】
1.一种用于实现轮播动画的方法,其特征在于,包括: 获取各个切片的动画播放列表;其中,对于一个切片而言,所述动画播放列表包括切入动画播放列表和/或切出动画播放列表,每个动画播放列表中保存有至少一个动画对象的信息,以及动画对象对应的播放效果信息; 当需要进行切片的切换时,根据待隐藏切片的切出动画播放列表和/或待显示切片的切入动画播放列表,创建动画播放序列; 根据所述动画播放序列以及各个动画对象对应的播放效果信息进行动画的播放,以完成切片间的轮播切换。2.根据权利要求1所述的方法,其特征在于,所述获取各个切片的动画播放列表包括: 解析通过预置的接口传入的配置参数,获取为各个切片设置的动画对象的信息,以及动画对象对应的播放效果信息; 将所述动画对象的信息以及对应的播放 效果信息添加到对应切片的动画播放列表中,得到各个切片的动画播放列表。3.根据权利要求2所述的方法,其特征在于,所述解析通过预置的接口传入的配置参数,获取为各个切片设置的动画对象的信息,以及动画对象对应的播放效果信息包括: 解析通过预置的用于创建动画的接口为各个切片传入的配置参数,创建动画对象,并获取各个动画对象对应的播放效果信息。4.根据权利要求2所述的方法,其特征在于,所述解析通过预置的接口传入的配置参数,获取为各个切片设置的动画对象的信息,以及动画对象对应的播放效果信息包括: 解析通过预置的用于创建动画组的接口为各个切片传入的配置参数,创建动画组对象; 解析通过预置的用于向动画组中添加动画或动画组的接口传入的配置参数,获知动画组对象中包含的成员,以及各个成员之间的播放控制信息;其中,所述成员包括动画对象或者动画组对象; 解析通过预置的用于创建动画的接口为动画组内的动画对象传入的配置参数,创建动画对象,并获取各个动画对象对应的播放效果信息。5.根据权利要求4所述的方法,其特征在于,所述动画组内包含的各个成员之间的播放控制信息包括:动画组内各个成员之间的播放顺序和/或延迟时间。6....

【专利技术属性】
技术研发人员:黄超
申请(专利权)人:阿里巴巴集团控股有限公司
类型:发明
国别省市:开曼群岛;KY

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1