CN109828811A - 一种卡片对象的展示方法和装置 - Google Patents
一种卡片对象的展示方法和装置 Download PDFInfo
- Publication number
- CN109828811A CN109828811A CN201811629352.8A CN201811629352A CN109828811A CN 109828811 A CN109828811 A CN 109828811A CN 201811629352 A CN201811629352 A CN 201811629352A CN 109828811 A CN109828811 A CN 109828811A
- Authority
- CN
- China
- Prior art keywords
- animation
- card object
- default card
- animation style
- level pattern
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Abstract
本发明实施例提供了一种卡片对象的展示方法和装置,所述方法包括:堆叠展示基于小程序的多个预设卡片对象;响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式;按照所述第一动画样式,播放针对所述当前展示在首位的预设卡片对象的第一动画;在所述第一动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示所述多个预设卡片对象。每当用户触发滑动操作事件,都可以通过绚丽的动画样式将卡片滑出,丰富了滑动卡片的视觉效果,提高了用户体验。
Description
技术领域
本发明涉及计算机技术领域,特别是涉及一种卡片对象的展示方法和一种卡片对象的展示装置。
背景技术
小程序(Mini Program),是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。
小程序中提供了滑块视图容器组件Swiper,Swiper是一个普通的轮播图组件,能够实现卡片式的轮播,可以对卡片实现水平方向的滑动和垂直方向的滑动。但基于Swiper的卡片滑动方式,只能简单的左右上下移动,而且不能添加其它效果,使得用户的视角效果单一。
发明内容
鉴于上述问题,提出了本发明实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种卡片对象的展示方法和相应的一种卡片对象的展示装置。
为了解决上述问题,本发明实施例公开了一种卡片对象的展示方法,包括:
堆叠展示基于小程序的多个预设卡片对象;
响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式;
按照所述第一动画样式,播放针对所述当前展示在首位的预设卡片对象的第一动画;
在所述第一动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示所述多个预设卡片对象。
可选的,还包括:
响应滑动操作事件,对当前展示在第二位至第一预设位数的预设卡片对象配置第二动画样式;
按照所述第二动画样式,播放针对所述在第二位至第一预设位数的预设卡片对象的第二动画。
可选的,所述在所述第一动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象,包括:
在所述第一动画播放完成,以及在所述第二动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象。
可选的,所述预设卡片对象具有层次属性以及图片链接属性;所述堆叠展示基于小程序的滑块视图容器组件的多个预设卡片对象,包括:
确定所述多个预设卡片对象对应的层次属性、以及图片链接属性相应的图片;
按照所述多个预设卡片对象对应的层次属性,调用依次堆叠的多个预设层次样式展示所述图片链接属性相应的图片。
可选的,所述依次堆叠的多个预设层次样式中,以堆叠顺序为首位的层次样式起从前往后至第二预设位数的层次样式,依次缩小并沿预设方向间隔设置;以所述第二预设位数的后一层次样式起从前往后至末位的层次样式为隐藏显示。
可选的,所述预设卡片对象还具有动画样式属性;所述响应滑动操作事件,对当前展示在首位的首位预设卡片对象配置第一动画样式,包括:
确定所述滑动操作事件的滑动方向;
对当前层次属性为对应首位层次样式的卡片对象的动画样式属性,配置第一动画样式,所述第一动画样式至少包括一与所述滑动方向适配的滑动动画样式。
可选的,所述对展示在第二位至第一预设位数的预设卡片对象配置第二动画样式,包括:
对当前层次属性为对应第二位至第一预设位数层次样式的预设卡片对象的动画样式属性,配置第二动画样式。
可选的,所述更新所述多个预设卡片对象的堆叠顺序,包括:
将当前层次属性为对应首位层次样式的预设卡片对象的层次属性修改为对应末位层次样式;
将层次属性不为对应首位层次样式的预设卡片对象的层次属性修改为对应提前一位的层次样式。
本发明实施例还公开了一种卡片对象的展示装置,包括:
堆叠展示模块,用于堆叠展示基于小程序的多个预设卡片对象;
第一动画样式配置模块,用于响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式;
第一动画播放模块,用于按照所述第一动画样式,播放针对所述当前展示在首位的预设卡片对象的第一动画;
顺序更新模块,用于在所述第一动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示所述多个预设卡片对象。
可选的,还包括:
第二动画样式配置模块,用于响应滑动操作事件,对当前展示在第二位至第一预设位数的预设卡片对象配置第二动画样式;
第二动画播放模块,用于按照所述第二动画样式,播放针对所述在第二位至第一预设位数的预设卡片对象的第二动画。
可选的,所述顺序更新模块包括:
顺序更新子模块,用于在所述第一动画播放完成,以及在所述第二动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象。
可选的,所述预设卡片对象具有层次属性以及图片链接属性;所述堆叠展示模块包括:
属性确定子模块,用于确定所述多个预设卡片对象对应的层次属性、以及图片链接属性相应的图片;
层次样式调用子模块,用于按照所述多个预设卡片对象对应的层次属性,调用依次堆叠的多个预设层次样式展示所述图片链接属性相应的图片。
可选的,所述依次堆叠的多个预设层次样式中,以堆叠顺序为首位的层次样式起从前往后至第二预设位数的层次样式,依次缩小并沿预设方向间隔设置;以所述第二预设位数的后一层次样式起从前往后至末位的层次样式为隐藏显示。
可选的,所述预设卡片对象还具有动画样式属性;所述第一动画样式配置模块包括:
滑动方向确定子模块,用于确定所述滑动操作事件的滑动方向;
第一动画样式配置子模块,用于对当前层次属性为对应首位层次样式的卡片对象的动画样式属性,配置第一动画样式,所述第一动画样式至少包括一与所述滑动方向适配的滑动动画样式。
可选的,所述第二动画样式配置模块包括:
第二动画样式配置子模块,用于对当前层次属性为对应第二位至第一预设位数层次样式的预设卡片对象的动画样式属性,配置第二动画样式。
可选的,所述顺序更新模块包括:
第一层次属性修改模块,用于将当前层次属性为对应首位层次样式的预设卡片对象的层次属性修改为对应末位层次样式;
第二层次属性修改模块,用于将层次属性不为对应首位层次样式的预设卡片对象的层次属性修改为对应提前一位的层次样式。
本发明实施例还公开了一种装置,包括:
一个或多个处理器;和
其上存储有指令的一个或多个机器可读介质,当由所述一个或多个处理器执行时,使得所述装置执行如上所述的一个或多个的方法。
本发明实施例还公开了一个或多个机器可读介质,其上存储有指令,当由一个或多个处理器执行时,使得所述处理器执行如上所述的一个或多个的方法。
本发明实施例包括以下优点:
在本发明实施例中,堆叠展示基于小程序的滑块视图容器组件的多个预设卡片对象;响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式;按照第一动画样式,播放针对当前展示在首位的预设卡片对象的第一动画;在第一动画播放完成后,更新多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象。每当用户触发滑动操作事件,都可以通过绚丽的动画样式将卡片滑出,丰富了滑动卡片的视觉效果,提高了用户体验。
附图说明
图1是本发明的一种卡片对象的展示方法实施例一的步骤流程图;
图2是本发明实施例中卡片图像堆叠展示的示意图;
图3是本发明的一种卡片对象的展示方法实施例二的步骤流程图;
图4是本发明的一种卡片对象的展示装置实施例的结构框图。
具体实施方式
为使本发明的上述目的、特征和优点能够更加明显易懂,下面结合附图和具体实施方式对本发明作进一步详细的说明。
参照图1,示出了本发明的一种卡片对象的展示方法实施例一的步骤流程图,具体可以包括如下步骤:
步骤101,堆叠展示基于小程序的多个预设卡片对象;
在本发明实施例中,所述方法应用于移动终端,移动终端可以为手机、平板电脑、便携式电脑、台式电脑、个人数字助理等等,移动终端可以支持Windows、Android(安卓)、IOS、WindowsPhone等操作系统,也可以支持嵌入式系统。在移动终端中可以运行应用程序,应用程序中执行多个线程,可以包括用户界面显示线程、用户界面渲染线程等等。
例如,在房产分类的小程序中,通过卡片的形式展示房源,用户可以通过“翻卡片”的方式选择自己喜欢和不喜欢的房源,不喜欢的可以删除,喜欢的可以收藏。卡片上展示房源的基本信息(图片、户型、地址、价格等)。“翻卡片”的方式可以通过用户的滑动操作触发,用户触发滑动操作即可将该卡片滑出。
参照图2所示为本发明实施例中卡片图像堆叠展示的示意图。其中,顺序在前的卡片对象覆盖在其下一位卡片对象之上,之后的卡片对象以此类推,位于首位的卡片对象则没有被覆盖。例如,顺序为1的卡片展示在顺序为2的卡片之上,顺序为2的卡片展示在顺序为3的卡片之上。
步骤102,响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式;
用户可以在移动终端的屏幕触发滑动操作事件,当检测到在卡片对象的用户界面触发滑动操作事件后,可以对当前展示在首位的预设卡片对象配置第一动画样式。
步骤103,按照所述第一动画样式,播放针对所述当前展示在首位的预设卡片对象的第一动画;
在对卡片对象配置动画样式后,需要重新渲染卡片对象才能播放相应的动画。
在本发明实施例中,第一动画样式可以基于CSS(Cascading Style Sheets,层叠样式表)样式来设计,第一动画样式可以包括滑动动画样式,旋转动画样式、隐藏动画样式等多种绚丽的动画样式。在实际中,用户可以根据需要从多种设定的动画样式中,选择需要的动画样式进行组合。例如,第一动画样式可以是向右滑出并隐藏卡片的动画样式。
步骤104,在所述第一动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示所述多个预设卡片对象。
在更新堆叠顺序后需要重新渲染卡片对象才能展示更新后的卡片对象。
在针对当前展示在首位的预设卡片对象的第一动画播放完成后,更新各个卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象,以实现轮播的效果。
例如,将原来展示在首位的卡片对象放置到末位,将原来非首位的卡片对象依次向上提升一位,实现轮播的效果。
在本发明实施例中,堆叠展示基于小程序的滑块视图容器组件的多个预设卡片对象;响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式;按照第一动画样式,播放针对当前展示在首位的预设卡片对象的第一动画;在第一动画播放完成后,更新多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象。每当用户触发滑动操作事件,都可以通过绚丽的动画样式将卡片滑出,丰富了滑动卡片的视觉效果,提高了用户体验。
参照图3,示出了本发明的一种卡片对象的展示方法实施例二的步骤流程图,具体可以包括如下步骤:
步骤301,堆叠展示基于小程序的多个预设卡片对象;
在本发明实施例中,卡片对象具有展示属性,展示属性可以包括层次属性和图片链接属性,层次属性可以表示该卡片对象在堆叠展示时的顺序,图片链接属性指示了在该卡片对象要展示的图像。例如图片链接属性可以是一个URL地址,指示了要展示的图像所在的地址。
具体的,所述堆叠展示基于小程序的多个预设卡片对象的步骤可以包括:确定所述多个预设卡片对象对应的层次属性、以及图片链接属性相应的图片;按照所述多个预设卡片对象对应的层次属性,调用依次堆叠的多个预设层次样式展示所述图片链接属性相应的图片。
在本发明实施例中,层次样式可以基于CSS设计,层次样式可以按照堆叠顺序依次堆叠,层次样式的堆叠顺序是不变的。
每个卡片对象在静态展示的时候,都通过一个层次样式来展示。卡片对象的层次属性,表示该卡片对象要调用的层次样式。在要实现卡片轮播的时候,可以对卡片对象的层次属性进行修改,使卡片对象调用不同的层次样式,从而在不同的层次样式展示卡片对象,实现轮播的效果。
例如,若有四个层次样式,分别为层次样式1、层次样式2、层次样式3、层次样式4。若有四个卡片对象需要展示,这四个卡片对象具有顺序索引。则可以对索引为1的卡片对象的层次属性赋值层次样式1,对索引为2卡片对象的层次属性赋值层次样式2,对索引为3的卡片对象的层次属性赋值层次样式3,对索引为4的卡片对象的层次属性赋值层次样式4。
在本发明实施例中,所述依次堆叠的多个预设层次样式中,以堆叠顺序为首位的层次样式起从前往后至第二预设位数的层次样式,依次缩小并沿预设方向间隔设置;以所述第二预设位数的后一层次样式起从前往后至末位的层次样式为隐藏显示。
例如,若有五个层次样式,分别为层次样式1、层次样式2、层次样式3、层次样式4、层次样式5,第二预设数目为4,预设方向为垂直方向。
层次样式1置于顶面,层次样式2相对层次样式1缩小并沿垂直方向间隔设置,层次样式3相对层次样式2缩小并沿垂直方向间隔设置,层次样式4可以与层次样式3在同一位置但设为隐藏显示,层次样式5可以与层次样式4在同一位置但设为隐藏显示。
步骤302,响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式,以及对当前展示在第二位至第一预设位数的预设卡片对象配置第二动画样式;
在本发明实施例中,除了可以对当前展示在首位的预设卡片对象配置第一动画样式,还可以对当前展示在第二位至第一预设位数的预设卡片对象配置第二动画样式;第二动画样式可以包括:放大动画、淡入动画等多种动画样式。
例如,对展示在第二位的卡片对象可以配置从层次样式2移动到层次样式1,并逐渐放大的动画样式;对展示在第三位的卡片对象可以配置从层次样式3移动到层次样式2,并逐渐放大的动画样式;对展示在第四位的卡片对象可以配置淡入的动画样式。
在本发明实施例中,所述预设卡片对象的展示属性还包括动画样式属性,动画样式属性表示了该卡片对象的图片可以以什么形式运动。
具体的,所述响应滑动操作事件,对当前展示在首位的首位预设卡片对象配置第一动画样式的步骤可以包括:确定所述滑动操作事件的滑动方向;对当前层次属性为对应首位层次样式的卡片对象的动画样式属性,配置第一动画样式,所述第一动画样式至少包括一与所述滑动方向适配的滑动动画样式。
第一动画样式至少包括滑动动画样式,还可以包括旋转动画样式、隐藏动画样式等多种绚丽的动画样式。
滑动动画样式与滑动操作事件的滑动方向相关,例如,若滑动操作事件的滑动方向为水平向左滑动,则适配的滑动动画样式可以为水平向左滑出的滑动动画样式。若滑动操作事件的滑动方向为水平向右滑动,则适配的滑动动画样式可以为水平向右滑出的滑动动画样式。
在本发明实施例中,所述对展示在第二位至第一预设位数的预设卡片对象配置第二动画样式的步骤可以包括:对当前层次属性为对应第二位至第一预设位数层次样式的预设卡片对象的动画样式属性,配置第二动画样式。
步骤303,按照所述第一动画样式,播放针对所述当前展示在首位的预设卡片对象的第一动画;以及,按照所述第二动画样式,播放针对所述在第二位至第一预设位数的预设卡片对象的第二动画。
在对卡片对象配置动画样式后,需要重新渲染卡片对象才能播放相应的动画。
针对各个卡片对象的动画可以同时播放,例如,在播放针对展示在首位的卡片对象的第一动画时,同时播放针对当前展示在第二位至第一预设位数的卡片对象的第二动画。
针对各个卡片对象的动画也可以设置按照一定的时间间隔播放,例如,在播放针对展示在首位的卡片对象的第一动画后,播放针对当前展示在第二位的卡片对象的第二动画。
步骤304,在所述第一动画播放完成,以及在所述第二动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象。
在更新堆叠顺序后需要重新渲染卡片对象才能展示更新后的卡片对象。
在本发明实施例中,所述更新所述多个预设卡片对象的堆叠顺序的步骤可以包括:将当前层次属性为对应首位层次样式的预设卡片对象的层次属性修改为对应末位层次样式;将层次属性不为对应首位层次样式的预设卡片对象的层次属性修改为对应提前一位的层次样式。
例如,如有五个卡片对象,卡片对象索引分别为卡片1、卡片2、卡片3、卡片4、卡片5,分别对应的当前层次属性为对应首位层次样式、第二位层次样式、第三位层次样式、第四位层次样式、末位层次样式。在更新后,对应的层次属性分别为对应末位层次样式、首位层次样式、第二位层次样式、第三位层次样式、第四位层次样式。
在层次属性更新后,卡片对象按照更新后的层次属性调用相应的层次样式进行展示。
在本发明实施例中,堆叠展示基于小程序的滑块视图容器组件的多个预设卡片对象;响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式;按照第一动画样式,播放针对当前展示在首位的预设卡片对象的第一动画;在第一动画播放完成后,更新多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象。每当用户触发滑动操作事件,都可以通过绚丽的动画样式将卡片滑出,丰富了滑动卡片的视觉效果,提高了用户体验。
需要说明的是,对于方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本发明实施例并不受所描述的动作顺序的限制,因为依据本发明实施例,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作并不一定是本发明实施例所必须的。
参照图4,示出了本发明的一种卡片对象的展示装置实施例的结构框图,具体可以包括如下模块:
堆叠展示模块401,用于堆叠展示基于小程序的多个预设卡片对象;
第一动画样式配置模块402,用于响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式;
第一动画播放模块403,用于按照所述第一动画样式,播放针对所述当前展示在首位的预设卡片对象的第一动画;
顺序更新模块404,用于在所述第一动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示所述多个预设卡片对象。
本发明实施例中,所述的装置还可以包括:
第二动画样式配置模块,用于响应滑动操作事件,对当前展示在第二位至第一预设位数的预设卡片对象配置第二动画样式;
第二动画播放模块,用于按照所述第二动画样式,播放针对所述在第二位至第一预设位数的预设卡片对象的第二动画。
本发明实施例中,所述顺序更新模块可以包括:
顺序更新子模块,用于在所述第一动画播放完成,以及在所述第二动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象。
本发明实施例中,所述预设卡片对象具有层次属性以及图片链接属性;所述堆叠展示模块401可以包括:
属性确定子模块,用于确定所述多个预设卡片对象对应的层次属性、以及图片链接属性相应的图片;
层次样式调用子模块,用于按照所述多个预设卡片对象对应的层次属性,调用依次堆叠的多个预设层次样式展示所述图片链接属性相应的图片。
本发明实施例中,所述依次堆叠的多个预设层次样式中,以堆叠顺序为首位的层次样式起从前往后至第二预设位数的层次样式,依次缩小并沿预设方向间隔设置;以所述第二预设位数的后一层次样式起从前往后至末位的层次样式为隐藏显示。
本发明实施例中,所述预设卡片对象还具有动画样式属性;所述第一动画样式配置模块402可以包括:
滑动方向确定子模块,用于确定所述滑动操作事件的滑动方向;
第一动画样式配置子模块,用于对当前层次属性为对应首位层次样式的卡片对象的动画样式属性,配置第一动画样式,所述第一动画样式至少包括一与所述滑动方向适配的滑动动画样式。
本发明实施例中,所述第二动画样式配置模块可以包括:
第二动画样式配置子模块,用于对当前层次属性为对应第二位至第一预设位数层次样式的预设卡片对象的动画样式属性,配置第二动画样式。
本发明实施例中,所述顺序更新模块404可以包括:
第一层次属性修改模块,用于将当前层次属性为对应首位层次样式的预设卡片对象的层次属性修改为对应末位层次样式;
第二层次属性修改模块,用于将层次属性不为对应首位层次样式的预设卡片对象的层次属性修改为对应提前一位的层次样式。
在本发明实施例中,堆叠展示基于小程序的滑块视图容器组件的多个预设卡片对象;响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式;按照第一动画样式,播放针对当前展示在首位的预设卡片对象的第一动画;在第一动画播放完成后,更新多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象。每当用户触发滑动操作事件,都可以通过绚丽的动画样式将卡片滑出,丰富了滑动卡片的视觉效果,提高了用户体验。
对于装置实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
本发明实施例还提供了一种装置,包括:
一个或多个处理器;和
其上存储有指令的一个或多个机器可读介质,当由所述一个或多个处理器执行时,使得所述装置执行本发明实施例所述的方法。
本发明实施例还提供了一个或多个机器可读介质,其上存储有指令,当由一个或多个处理器执行时,使得所述处理器执行本发明实施例所述的方法。
本说明书中的各个实施例均采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似的部分互相参见即可。
本领域内的技术人员应明白,本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此,本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上,使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明实施例的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例做出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。
最后,还需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
以上对本发明所提供的一种卡片对象的展示方法和一种卡片对象的展示装置,进行了详细介绍,本文中应用了具体个例对本发明的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本发明的方法及其核心思想;同时,对于本领域的一般技术人员,依据本发明的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本发明的限制。
Claims (18)
1.一种卡片对象的展示方法,其特征在于,包括:
堆叠展示基于小程序的多个预设卡片对象;
响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式;
按照所述第一动画样式,播放针对所述当前展示在首位的预设卡片对象的第一动画;
在所述第一动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示所述多个预设卡片对象。
2.根据权利要求1所述的方法,其特征在于,还包括:
响应滑动操作事件,对当前展示在第二位至第一预设位数的预设卡片对象配置第二动画样式;
按照所述第二动画样式,播放针对所述在第二位至第一预设位数的预设卡片对象的第二动画。
3.根据权利要求2所述的方法,其特征在于,所述在所述第一动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象,包括:
在所述第一动画播放完成,以及在所述第二动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象。
4.根据权利要求1-3任一项所述的方法,其特征在于,所述预设卡片对象具有层次属性以及图片链接属性;所述堆叠展示基于小程序的滑块视图容器组件的多个预设卡片对象,包括:
确定所述多个预设卡片对象对应的层次属性、以及图片链接属性相应的图片;
按照所述多个预设卡片对象对应的层次属性,调用依次堆叠的多个预设层次样式展示所述图片链接属性相应的图片。
5.根据权利要求4所述的方法,其特征在于,所述依次堆叠的多个预设层次样式中,以堆叠顺序为首位的层次样式起从前往后至第二预设位数的层次样式,依次缩小并沿预设方向间隔设置;以所述第二预设位数的后一层次样式起从前往后至末位的层次样式为隐藏显示。
6.根据权利要求5所述的方法,其特征在于,所述预设卡片对象还具有动画样式属性;所述响应滑动操作事件,对当前展示在首位的首位预设卡片对象配置第一动画样式,包括:
确定所述滑动操作事件的滑动方向;
对当前层次属性为对应首位层次样式的卡片对象的动画样式属性,配置第一动画样式,所述第一动画样式至少包括一与所述滑动方向适配的滑动动画样式。
7.根据权利要求6所述的方法,其特征在于,所述对展示在第二位至第一预设位数的预设卡片对象配置第二动画样式,包括:
对当前层次属性为对应第二位至第一预设位数层次样式的预设卡片对象的动画样式属性,配置第二动画样式。
8.根据权利要求4所述的方法,其特征在于,所述更新所述多个预设卡片对象的堆叠顺序,包括:
将当前层次属性为对应首位层次样式的预设卡片对象的层次属性修改为对应末位层次样式;
将层次属性不为对应首位层次样式的预设卡片对象的层次属性修改为对应提前一位的层次样式。
9.一种卡片对象的展示装置,其特征在于,包括:
堆叠展示模块,用于堆叠展示基于小程序的多个预设卡片对象;
第一动画样式配置模块,用于响应滑动操作事件,对当前展示在首位的预设卡片对象配置第一动画样式;
第一动画播放模块,用于按照所述第一动画样式,播放针对所述当前展示在首位的预设卡片对象的第一动画;
顺序更新模块,用于在所述第一动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示所述多个预设卡片对象。
10.根据权利要求9所述的装置,其特征在于,还包括:
第二动画样式配置模块,用于响应滑动操作事件,对当前展示在第二位至第一预设位数的预设卡片对象配置第二动画样式;
第二动画播放模块,用于按照所述第二动画样式,播放针对所述在第二位至第一预设位数的预设卡片对象的第二动画。
11.根据权利要求10所述的装置,其特征在于,所述顺序更新模块包括:
顺序更新子模块,用于在所述第一动画播放完成,以及在所述第二动画播放完成后,更新所述多个预设卡片对象的堆叠顺序,并按照更新后的堆叠顺序展示多个预设卡片对象。
12.根据权利要求9-11任一项所述的装置,其特征在于,所述预设卡片对象具有层次属性以及图片链接属性;所述堆叠展示模块包括:
属性确定子模块,用于确定所述多个预设卡片对象对应的层次属性、以及图片链接属性相应的图片;
层次样式调用子模块,用于按照所述多个预设卡片对象对应的层次属性,调用依次堆叠的多个预设层次样式展示所述图片链接属性相应的图片。
13.根据权利要求12所述的装置,其特征在于,所述依次堆叠的多个预设层次样式中,以堆叠顺序为首位的层次样式起从前往后至第二预设位数的层次样式,依次缩小并沿预设方向间隔设置;以所述第二预设位数的后一层次样式起从前往后至末位的层次样式为隐藏显示。
14.根据权利要求13所述的装置,其特征在于,所述预设卡片对象还具有动画样式属性;所述第一动画样式配置模块包括:
滑动方向确定子模块,用于确定所述滑动操作事件的滑动方向;
第一动画样式配置子模块,用于对当前层次属性为对应首位层次样式的卡片对象的动画样式属性,配置第一动画样式,所述第一动画样式至少包括一与所述滑动方向适配的滑动动画样式。
15.根据权利要求14所述的装置,其特征在于,所述第二动画样式配置模块包括:
第二动画样式配置子模块,用于对当前层次属性为对应第二位至第一预设位数层次样式的预设卡片对象的动画样式属性,配置第二动画样式。
16.根据权利要求12所述的装置,其特征在于,所述顺序更新模块包括:
第一层次属性修改模块,用于将当前层次属性为对应首位层次样式的预设卡片对象的层次属性修改为对应末位层次样式;
第二层次属性修改模块,用于将层次属性不为对应首位层次样式的预设卡片对象的层次属性修改为对应提前一位的层次样式。
17.一种装置,其特征在于,包括:
一个或多个处理器;和
其上存储有指令的一个或多个机器可读介质,当由所述一个或多个处理器执行时,使得所述装置执行如权利要求1-8所述的一个或多个的方法。
18.一个或多个机器可读介质,其上存储有指令,当由一个或多个处理器执行时,使得所述处理器执行如权利要求1-8所述的一个或多个的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811629352.8A CN109828811B (zh) | 2018-12-28 | 2018-12-28 | 一种卡片对象的展示方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811629352.8A CN109828811B (zh) | 2018-12-28 | 2018-12-28 | 一种卡片对象的展示方法和装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN109828811A true CN109828811A (zh) | 2019-05-31 |
CN109828811B CN109828811B (zh) | 2020-12-29 |
Family
ID=66860830
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201811629352.8A Active CN109828811B (zh) | 2018-12-28 | 2018-12-28 | 一种卡片对象的展示方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN109828811B (zh) |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110472172A (zh) * | 2019-08-07 | 2019-11-19 | 咪咕动漫有限公司 | 信息展示方法及终端 |
CN110717135A (zh) * | 2019-09-20 | 2020-01-21 | 广州坚和网络科技有限公司 | 一种用于广告信息展示的列表中镂空卡片信息展示方法 |
CN111273976A (zh) * | 2020-01-09 | 2020-06-12 | 北京金山安全软件有限公司 | 一种动画轮播方法及装置 |
CN112887797A (zh) * | 2019-11-29 | 2021-06-01 | 腾讯科技(深圳)有限公司 | 控制视频播放的方法及相关设备 |
CN114025218A (zh) * | 2021-09-14 | 2022-02-08 | 百果园技术(新加坡)有限公司 | 一种卡片式视频交互方法、装置、设备及存储介质 |
CN114092370A (zh) * | 2021-11-19 | 2022-02-25 | 北京字节跳动网络技术有限公司 | 一种图像展示方法、装置、计算机设备及存储介质 |
TWI764282B (zh) * | 2020-09-18 | 2022-05-11 | 速創科技股份有限公司 | 視覺化可堆疊控制之程式編譯系統 |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102591583A (zh) * | 2011-01-13 | 2012-07-18 | 卡西欧计算机株式会社 | 电子设备 |
US20130254710A1 (en) * | 2012-03-22 | 2013-09-26 | Microsoft Corporation | Stacks for content organization |
CN104199600A (zh) * | 2014-08-27 | 2014-12-10 | 可牛网络技术(北京)有限公司 | 浏览器多标签页的处理方法及浏览器 |
CN105183907A (zh) * | 2015-09-30 | 2015-12-23 | 北京奇虎科技有限公司 | 一种移动终端搜索结果展示的方法及装置 |
US9336321B1 (en) * | 2012-01-26 | 2016-05-10 | Amazon Technologies, Inc. | Remote browsing and searching |
CN106708526A (zh) * | 2016-12-28 | 2017-05-24 | 金蝶软件(中国)有限公司 | 一种轮播图设置方法及系统 |
-
2018
- 2018-12-28 CN CN201811629352.8A patent/CN109828811B/zh active Active
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102591583A (zh) * | 2011-01-13 | 2012-07-18 | 卡西欧计算机株式会社 | 电子设备 |
US9336321B1 (en) * | 2012-01-26 | 2016-05-10 | Amazon Technologies, Inc. | Remote browsing and searching |
US20130254710A1 (en) * | 2012-03-22 | 2013-09-26 | Microsoft Corporation | Stacks for content organization |
CN104199600A (zh) * | 2014-08-27 | 2014-12-10 | 可牛网络技术(北京)有限公司 | 浏览器多标签页的处理方法及浏览器 |
CN105183907A (zh) * | 2015-09-30 | 2015-12-23 | 北京奇虎科技有限公司 | 一种移动终端搜索结果展示的方法及装置 |
CN106708526A (zh) * | 2016-12-28 | 2017-05-24 | 金蝶软件(中国)有限公司 | 一种轮播图设置方法及系统 |
Non-Patent Citations (1)
Title |
---|
码龙教程: "微信小程序实现卡片层叠滑动效果", 《WWW.MANONGJC.COM/ARTICLE/26569.HTML》 * |
Cited By (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110472172A (zh) * | 2019-08-07 | 2019-11-19 | 咪咕动漫有限公司 | 信息展示方法及终端 |
CN110717135A (zh) * | 2019-09-20 | 2020-01-21 | 广州坚和网络科技有限公司 | 一种用于广告信息展示的列表中镂空卡片信息展示方法 |
CN112887797A (zh) * | 2019-11-29 | 2021-06-01 | 腾讯科技(深圳)有限公司 | 控制视频播放的方法及相关设备 |
CN111273976A (zh) * | 2020-01-09 | 2020-06-12 | 北京金山安全软件有限公司 | 一种动画轮播方法及装置 |
TWI764282B (zh) * | 2020-09-18 | 2022-05-11 | 速創科技股份有限公司 | 視覺化可堆疊控制之程式編譯系統 |
CN114025218A (zh) * | 2021-09-14 | 2022-02-08 | 百果园技术(新加坡)有限公司 | 一种卡片式视频交互方法、装置、设备及存储介质 |
CN114025218B (zh) * | 2021-09-14 | 2024-04-02 | 百果园技术(新加坡)有限公司 | 一种卡片式视频交互方法、装置、设备及存储介质 |
CN114092370A (zh) * | 2021-11-19 | 2022-02-25 | 北京字节跳动网络技术有限公司 | 一种图像展示方法、装置、计算机设备及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN109828811B (zh) | 2020-12-29 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109828811A (zh) | 一种卡片对象的展示方法和装置 | |
US9396572B2 (en) | Image correlation method and electronic device thereof | |
JP5026079B2 (ja) | プレゼンテーションシステム | |
CN103777849B (zh) | 用于访问图书的用户界面 | |
JP6133318B2 (ja) | クロス・ウィンドウ・アニメーション | |
US20070106952A1 (en) | Presenting and managing clipped content | |
US20140279025A1 (en) | Methods and apparatus for display of mobile advertising content | |
TWI529602B (zh) | 具有動態拼圖介面的電子裝置及更新方法與系統 | |
US20060274086A1 (en) | Clipview applications | |
WO2017071286A1 (zh) | 图标移动方法和装置 | |
CN103853424A (zh) | 显示装置和控制显示装置的方法 | |
US20140092125A1 (en) | Filtering Documents Based on Device Orientation | |
CN107015979B (zh) | 一种数据处理方法、装置和智能终端 | |
CN108958857A (zh) | 一种界面生成方法及装置 | |
CN104571877A (zh) | 一种页面的显示处理方法及装置 | |
WO2015184736A1 (zh) | 一种触屏设备背景图变换的方法及终端 | |
KR20150012067A (ko) | 메시지 처리 방법 및 그 전자 장치 | |
CN110069734A (zh) | 一种页面组件的展现方法和装置 | |
CN105760070A (zh) | 用于同时显示更多个项的方法和设备 | |
CN111158573B (zh) | 基于图片构架的车机交互方法、系统、介质及设备 | |
CN110209961A (zh) | 一种基于分享得到应用服务的方法及装置 | |
CN110333859B (zh) | 页面创建方法、装置、电子设备和计算机可读存储介质 | |
CN107508992A (zh) | 一种移动终端及其启动应用程序快捷方式的方法和系统 | |
KR20180032906A (ko) | 전자 장치 및 이의 제어 방법 | |
WO2020015298A1 (zh) | 交互方法、装置及智能终端 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |