CN116578375B - 卡片显示方法及终端设备 - Google Patents

Abstract

本申请提供了一种卡片显示方法及终端设备，该方法包括：显示第一界面，第一界面中显示有第一卡片，第一卡片中包括多个条目中的第一条目，第一条目中包括第一控件；响应于对第一控件的第一操作，根据预设条件显示第一画面，预设条件包括以下至少一项：预设时长、多个条目中每个条目的预设高度、多个条目中每个条目的预设宽度，以及第一圆角值；在第一画面显示结束后，在第一界面中显示更新后的第一卡片，更新后的第一卡片中包括第一条目以及按照预设条目顺序依次显示的多个条目中除第一条目之外的其他条目。从而，本申请通过逐渐显示多个条目中除第一条目之外的其他条目，保证展开的多个条目形成卡片的视觉效果，能够提高用户的体验。

Description

卡片显示方法及终端设备

技术领域

本申请涉及终端领域，具体涉及一种卡片显示方法及终端设备。

背景技术

终端设备可通过卡片中的条目显示指示终端设备中不同的信息，以方便用户对所需信息进行组织、管理和查找，同时也可以提高信息的可读性和可操作性。

目前，多个条目可以相互拼接，可以收起和展开，在收起时，多个条目呈现出一个条目的视觉效果，在展开时，可从显示一个条目直接切换为显示多个条目。

然而，上述的展开方式中，视觉效果较差，且展开后的多个条目难以实现形成整张卡片，使得用户体验不佳。

发明内容

本申请提供了一种列表卡片显示方法及终端设备，以使得多个条目展开时的视觉效果更佳，保证了用户的视觉体验。

第一方面，本申请提供一种卡片显示方法，应用于终端设备，该方法包括：

显示第一界面，第一界面中显示有第一卡片，第一卡片中包括多个条目中的第一条目，第一条目中包括第一控件；

响应于对第一控件的第一操作，根据预设条件显示第一画面，预设条件包括以下至少一项：预设时长、多个条目中每个条目的预设高度、多个条目中每个条目的预设宽度，以及第一圆角值；第一画面为按照预设条目顺序依次显示多个条目中除第一条目之外的其他条目的画面；

在第一画面显示结束后，在第一界面中显示更新后的第一卡片，更新后的第一卡片中包括第一条目以及按照预设条目顺序依次显示的多个条目中除第一条目之外的其他条目。

其中，第一圆角值可以为第一卡片的圆角值。

上述方法中，可在第一预设时长内，根据多个条目中每个条目的预设高度、多个条目中每个条目的预设宽度，以及第一圆角值按照预设条目顺序逐渐显示多个条目中除第一条目之外的其他条目，使得第一画面显示结束时，第一界面中显示有第一条目与多个条目中除第一条目之外的其他条目拼接形成更新后的第一卡片；通过边计算待展开的多个条目中除第一条目之外的其他条目的位置和大小，边展开多个条目中除第一条目之外的其他条目的方式，保证了展开多个条目的视觉效果，并且，在计算的过程中加入第一圆角值，可使得展开后的多个条目拼接形成四个圆角的圆角值相同的整张卡片，保证了最终形成的卡片的视觉效果，提高了用户的体验；另外，展开后的多个条目可以单独实现操作反馈，避免了多个条目拼接形成的卡片中多个条目难以实现操作反馈的情况。

结合第一方面，在第一方面的某些实现方式中，当预设条件包括预设时长、多个条目中每个条目的预设高度、多个条目中每个条目的预设宽度，以及第一圆角值时；根据预设条件显示第一画面，包括：

根据预设时长和预设帧率，确定第一时间周期；

每隔第一时间周期，根据第一时刻、多个条目中每个条目的预设高度、多个条目中每个条目的预设宽度，以及第一圆角值，确定待显示的条目的背景的显示位置、显示宽度和显示高度，第一时刻为终端设备接收到第一操作的时刻；

根据待显示的条目的背景的显示位置、显示宽度和显示高度，对待显示的条目进行绘制；

按照预设条目顺序，将绘制后的待显示的条目依次显示在第一界面中，待显示的条目包括多个条目中除第一条目之外的其他条目。

上述方法中，可以每隔第一时间周期，计算和绘制待显示的条目，来保证多个条目中除第一条目之外的其他条目的逐渐展开，保证了条目展开过程的视觉效果。

结合第一方面，在第一方面的某些实现方式中，每隔第一时间周期，根据第一时刻、多个条目中每个条目的预设高度、多个条目中每个条目的预设宽度，以及第一圆角值，确定待显示的条目的背景的显示位置、显示宽度和显示高度，包括：

确定第二时刻待显示的条目在预设条目顺序中的排列位置j，第二时刻T为T+V，T1为第一时刻，V为第一时间周期，j为大于或等于2的整数；

确定待显示的第m个条目与j之间的关系，m为大于或等于2的整数；

在m等于j时，根据第二时刻、第一时刻、预设条目顺序中第二个条目到第n个条目的预设高度，以及第二个条目到第j-1个条目的预设高度，确定待显示的第m个条目的显示高度，n为多个条目对应的数量，n为大于2的整数；

根据待显示的第m个条目的显示高度、待显示的第m个条目的预设宽度，以及待显示的第m个条目在第一界面中的预设位置，确定待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度；

在待显示的第m个条目的显示高度小于第一圆角值时，根据第一圆角值，以及待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度；

在m小于j，且第二时刻与第一时刻的差值小于或等于预设时长时，更新第二时刻T为T+V，并继续执行确定第二时刻待显示的条目在预设条目顺序中的排列位置j，直至第二时刻与第一时刻的差值大于预设时长为止。

其中，可根据第一圆角值，以及待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，确定对待显示的第m个条目进行背景裁剪的圆角矩形的位置、宽度和高度，将该圆角矩形置于待显示的第m个条目的显示区域中，使得圆角矩形的下方与显示区域的下方重合，右侧与右侧重合，左侧与左侧重合，来对待显示的第m个条目的条目背景进行裁剪，从而，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度。

上述方法中，为m等于j时，如何确定待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，以及确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度的情况。

例如，条目的数量为三个，按照预设条目顺序依次为条目1、条目2和条目3，第一次展开过程为展开部分条目2的过程，可执行上述步骤。

结合第一方面，在第一方面的某些实现方式中，该方法还包括：

在待显示的第m个条目的高度大于或等于第一圆角值时，根据第一圆角值，以及待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度。

上述方法中，为在待显示的第m个条目的高度大于或等于第一圆角值时，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度的一种实现方式。

结合第一方面，在第一方面的某些实现方式中，该方法还包括：

在m等于j-1时，根据待显示的第m个条目的预设高度，确定待显示的第m个条目的显示高度；

根据待显示的第m个条目的显示高度，得到待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度；

根据第二时刻、第一时刻、第二个条目到第j个条目的预设高度，以及第j个条目之前的一个条目的预设高度，确定待显示的第m+1个条目的显示高度；

在待显示的第m+1个条目的高度小于第一圆角值时，根据第一圆角值、待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，以及待显示的第m+1个条目的显示高度，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度；

在m小于j，且第二时刻与第一时刻的差值小于或等于预设时长时，更新第二时刻T为T+V，并继续执行确定第二时刻待显示的条目在预设条目顺序中的排列位置j，直至第二时刻与第一时刻的差值大于预设时长为止。

上述方法中，为m等于j-1时，如何确定待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，以及确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度的情况。

结合第一方面，在第一方面的某些实现方式中，该方法还包括：

在待显示的第m+1个条目的高度大于或等于第一圆角值时，根据第一圆角值，以及待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度。

上述方法中，为待显示的第m+1个条目的高度大于或等于第一圆角值时，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度的情况。

结合第一方面，在第一方面的某些实现方式中，该方法还包括：

在m大于j-2时，根据待显示的第m个条目的预设高度，确定待显示的第m个条目的显示高度；

根据待显示的第m个条目的显示高度，确定待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度；

根据第一圆角值，以及待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度；

在m小于j，且第二时刻与第一时刻的差值小于或等于预设时长时，更新第二时刻T为T+V，并继续执行确定第二时刻待显示的条目在预设条目顺序中的排列位置j，直至第二时刻与第一时刻的差值大于预设时长为止。

上述方法中，为m大于j-2时，如何确定待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，以及确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度的情况。

结合第一方面，在第一方面的某些实现方式中，该方法还包括：

在m大于j时，更新m为m+1，并继续执行确定m与j之间的关系，直至确定m小于j为止。

结合第一方面，在第一方面的某些实现方式中，多个条目中除第一条目之外的其他条目按照预设条目顺序依次显示在第一条目的上方或者第一条目的下方。

第二方面，本申请提供一种终端设备，包括一个或多个处理器，存储器以及一个或多个计算机程序，其中一个或多个计算机程序存储在存储器上，当计算机程序被一个或多个处理器执行时，使得终端设备执行第一方面及第一方面任一种可能的实现方式中的卡片显示方法。

第三方面，本申请提供一种芯片系统，该芯片系统包括处理器，用于从存储器中调用并运行计算机程序，使得安装有芯片系统的终端设备执行第一方面及第一方面任一种可能的实现方式中的卡片显示方法。

第四方面，本申请提供一种计算机可读存储介质，包括计算机程序，当计算机程序在终端设备上运行时，使得终端设备执行第一方面及第一方面任一种可能的实现方式中的卡片显示方法。

第五方面，本申请提供一种计算机程序产品，当计算机程序产品在计算机上运行时，使得计算机执行第一方面及第一方面任一种可能的实现方式中的卡片显示方法。

可以理解的是，上述第二方面至第五方面的有益效果可以参见上述第一方面中的相关描述，在此不再赘述。

附图说明

图1为本申请一实施例提供的一种终端设备的结构示意图；

图2为本申请一实施例提供的一种终端设备的软件架构示意图；

图3-图5为本申请一实施例提供的一种人机交互界面示意图；

图6为本申请一实施例提供的一种卡片显示方法的流程示意图；

图7为本申请一实施例提供的一种卡片显示方法的流程示意图；

图8为本申请一实施例提供的一种卡片显示方法的流程示意图。

具体实施方式

本申请中，“至少一个”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项（个）”或其类似表达，是指的这些项中的任意组合，包括单项（个）或复数项（个）的任意组合。例如，单独a，单独b或单独c中的至少一项（个），可以表示：单独a，单独b，单独c，组合a和b，组合a和c，组合b和c，或组合a、b和c，其中a，b，c可以是单个，也可以是多个。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性。

卡片是一种包含多个条目的容器，每个条目代表着一个具体的信息或功能，不同的条目因其信息或功能不同，终端设备在接收到不同的条目上的操作时，显示的内容也不同。

条目的背景是条目的底部背景色或图片，用于区分不同的条目和增加视觉效果。因此，卡片中的条目和条目的背景是相互关联的，它们共同构成了手机界面的整体布局和视觉效果。

列表卡片是一种特殊的卡片，它的主要作用是根据特定的标准对一些条目进行集中管理、分类和组织。因此，列表卡片和多个条目之间的关系可以看作是一对多的关系，即一个列表卡片可以包含多个条目。

通常，列表卡片的名称和描述中会明确列出列表中所包含的条目类型和数量范围，以便用户在使用过程中进行参考和管理。

通过使用列表卡片和条目的方式，用户可以更加方便地对所需信息进行组织、管理和查找，同时也可以提高信息的可读性和可操作性。

目前，多个条目可以相互拼接，可以收起和展开，在收起时，多个条目呈现出一个条目的视觉效果，在展开时，可从显示一个条目直接切换为显示多个条目。

然而，上述的展开方式中，视觉效果较差，且展开后的多个条目难以实现形成整张卡片，使得用户体验不佳。

面对上述问题，本申请可提供一种卡片显示方法、终端设备、芯片系统、计算机可读存储介质以及计算机程序产品，可在预设时长内，根据多个条目中每个条目的预设高度、多个条目中每个条目的预设宽度，以及预设圆角值，逐渐展开待展开的多个条目中除已显示的条目1之外的其他条目，使得展开后的多个条目拼接形成四个圆角的圆角值相同的整张卡片；从而，能够保证展开多个条目的视觉效果，能够保证了最终形成的卡片的视觉效果，能够提高了用户的体验；另外，还能够避免多个条目拼接形成的卡片中多个条目难以实现操作反馈的情况。

其中，上述的卡片显示方法应用于终端设备。

例如，终端设备可以为手机、平板电脑、车载设备、笔记本电脑、可穿戴设备、超级移动个人计算机（ultra-mobile personal computer，UMPC）、上网本、个人数字助理（personal digital assistant，PDA）、智能汽车、智能电视、机器人等设备。

需要指出的是，在一些可能的实现方式中，终端设备还可能称为电子设备、用户设备(user equipment，UE)等，本申请实施例对此不作限制。

为了便于说明，图1中，以终端设备100为手机为例进行示意。

如图1所示，终端设备100可以包括处理器101、通信模块102、显示屏103、摄像头104、传感器105、内部存储器106、USB接口107、外部存储器接口108、充电管理模块109、电源管理模块110、和电池111等。

其中，处理器101可以包括一个或多个处理单元，例如：处理器101可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器，图像信号处理器(imagesignal processor，ISP)，控制器，存储器，视频流编解码器，数字信号处理器(digitalsignal processor，DSP)，基带处理器，和/或神经网络处理器(neural-networkprocessing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器101中。

控制器可以是终端设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

处理器101中还可以设置存储器，用于存储指令和数据。

在一些实施例中，处理器101中的存储器为高速缓冲存储器。该存储器可以保存处理器101刚用过或循环使用的指令或数据。如果处理器101需要再次使用该指令或数据，可从存储器中直接调用。避免了重复存取，减少了处理器101的等待时间，因而提高了系统的效率。

在一些实施例中，处理器101可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuitsound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purposeinput/output，GPIO)接口，用户标识模块(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。

调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A，受话器170B等)输出声音信号，或通过显示屏103显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器101，与移动通信模块150或其他功能模块设置在同一个器件中。

通信模块102可以包括天线1和天线2，移动通信模块，和/或无线通信模块。

终端设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。

移动通信模块可以提供应用在终端设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(lownoise amplifier，LNA)等。移动通信模块可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块的至少部分功能模块可以被设置于处理器101中。在一些实施例中，移动通信模块的至少部分功能模块可以与处理器101的至少部分模块被设置在同一个器件中。

无线通信模块可以提供应用在终端设备100上的包括无线局域网（wirelesslocal area networks，WLAN）（如无线保真（wireless fidelity，Wi-Fi）网络），蓝牙（bluetooth，BT），全球导航卫星系统（global navigation satellite system，GNSS），调频（frequency modulation，FM），近距离无线通信技术（near field communication，NFC），红外技术（infrared，IR）等无线通信的解决方案。无线通信模块可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器101。无线通信模块还可以从处理器101接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。

其中，显示屏103用于显示人机交互界面中的图像或视频等。显示屏103包括显示面板。显示面板可以采用液晶显示屏（liquid crystal display，LCD），有机发光二极管（organic light-emitting diode，OLED），有源矩阵有机发光二极体或主动矩阵有机发光二极体（active-matrix organic light emitting diode的，AMOLED），柔性发光二极管（flex light-emitting diode，FLED），MiniLED，MicroLED，Micro-OLED，量子点发光二极管（quantum dot light emitting diodes，QLED）等。在一些实施例中，终端设备100可以包括1个或N个显示屏103，N为大于1的正整数。

摄像头104用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件（charge coupled device，CCD）或互补金属氧化物半导体（complementary metal-oxide-semiconductor，CMOS）光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，终端设备100可以包括1个或N个摄像头104，N为大于1的正整数。

充电管理模块109用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。

在一些有线充电的实施例中，充电管理模块109可以通过USB接口107接收有线充电器的充电输入。

在一些无线充电的实施例中，充电管理模块109可以通过终端设备100的无线充电线圈接收无线充电输入。充电管理模块109为电池111充电的同时，还可以通过电源管理模块110为终端设备100供电。

电源管理模块110用于连接电池111，充电管理模块109与处理器101。电源管理模块110接收电池111和/或充电管理模块109的输入，为处理器101，内部存储器106，外部存储器，和通信模块102等供电。电源管理模块110还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。

在其他一些实施例中，电源管理模块110也可以设置于处理器101中。

在另一些实施例中，电源管理模块110和充电管理模块109也可以设置于同一个器件中。

外部存储器接口108可以用于连接外部存储卡，例如Micro SD卡，实现扩展终端设备100的存储能力。外部存储卡通过外部存储器接口108与处理器101通信，实现数据存储功能。例如将音乐，视频流等文件保存在外部存储卡中。

内部存储器106可以用于存储计算机可执行程序代码，可执行程序代码包括指令。处理器101通过运行存储在内部存储器106的指令，从而执行终端设备100的各种功能应用以及数据处理。内部存储器106可以包括存储程序区和存储数据区。

其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储终端设备100使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器106可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universalflash storage，UFS)等。

终端设备100中的传感器105可以包括图像传感器、触摸传感器、压力传感器、陀螺仪传感器、气压传感器、磁传感器、加速度传感器、距离传感器、接近光传感器、环境光传感器、指纹传感器、温度传感器、骨传导传感器等部件，以实现对于不同信号的感应和/或获取功能。

可选地，终端设备100还可以包括外设设备，例如鼠标、按键、指示灯、键盘、扬声器、麦克风等。

按键包括开机键，音量键等。按键可以是机械按键。也可以是触摸式按键。终端设备100可以接收按键输入，产生与终端设备100的用户设置以及功能控制有关的键信号输入。

指示器可以是指示灯，可以用于指示充电状态和电量变化，也可以用于指示消息、未接来电、和通知等。

可以理解的是，本实施例示意的结构并不构成对终端设备100的具体限定。

在另一些实施例中，终端设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。

请参考图2，为本申请实施例提供的一种终端设备的软件架构示意图。本申请实施例提供的卡片显示方法应用于图1所示的终端设备100时，终端设备100中的软件可以划分为如图2所示的应用程序层201，硬件抽象层(Hardware Abstraction Layer，HAL)202以及驱动层203。

应用程序层201中可以安装有多个应用程序，其中可以包括用于实现拍摄功能的相机应用程序(camera application)。

其中，相机应用程序的是指运行于操作系统上，能够执行拍照任务的计算机程序。当相机应用程序的格式为安卓应用程序包(Android application package，APK)格式时，相机应用程序可以运行于安卓操作系统上。

在本申请实施例中，相机应用程序可以是有拍摄功能的应用程序。例如，功能为分享短视频的应用程序，如果具有拍摄功能，即可作为本申请实施例中相机应用程序。

硬件抽象层202是一个位于操作系统内核与硬件电路之间的软件，通常用于将硬件抽象化，以实现操作系统与硬件电路在逻辑层的交互。在本申请实施例中，硬件抽象层202可以包括能够实现相机应用程序与图像传感器在逻辑层交互的相机硬件抽象层(camera Hardware Abstraction Layer，camera HAL)。

驱动层203中可以安装有多个用于驱动硬件工作的驱动(driver)。

需要说明的是，应用程序层201，硬件抽象层202以及驱动层203中也可以包括其他内容，在此不做具体限定。

基于前述描述，结合图3-图5，详细介绍电子设备实现本申请的卡片显示方法。为了便于说明，图3-图5中，以电子设备为手机为例进行示意。

手机可显示如图3中的（a）所示的界面11，界面11用于显示手机上安装的各种应用程序（application，APP）的图标。例如，界面11中可以包括：控件1001。其中，控件1001用于显示设置APP的图标。

在接收到用户对图3中的（a）所示的控件1001进行触发的操作（如点击、双击或长按操作等）后，手机可从如图3中的（a）所示的界面12变为显示如图3中的（b）所示的界面12。

其中，界面12中可以包括：控件1002。控件1002用于触发进入显示和亮度的设置界面。

在接收到用户对图3中的（b）所示的控件1002进行触发的操作后，手机可从如图3中的（b）所示的界面12变为显示如图4中的（a）所示的界面13。

其中，界面13中可以包括：卡片1003、条目1005和控件1004。卡片1003中显示有条目1005，条目1005用于提醒用户启动自动切换显示深色模式和浅色模式的功能。条目1005中包括控件1004，控件1004用于触发自动切换显示深色模式和浅色模式，以及触发显示条目动效画面。

在条目的数量为3个，包括条目1005-A1、条目1006-A2和条目1007-A3，展开后的高度分别为H1、H2、H3，宽度均为W，对应的条目背景分别为D1、D2、D3，卡片1003的圆角值为rad=8dp时，接收到用户对图4中的（a）所示的控件1004进行触发的操作的时刻T1对应的条目1005的情况为：

条目1005的高度为H1(T1)=H1，条目1005的条目背景为D1。

对条目1005进行区域显示裁剪setClipBound(rect)，得到待显示的条目1005的显示区域的位置和大小为rect=(0,0,W,H1(T1))。

对条目1005的背景D1进行圆角显示裁剪addRoundRect(rect，rad)。

在接收到用户对图4中的（a）所示的控件1004进行触发的操作后，手机可启动显示动态画面，即在显示下一帧动态画面之前，开始计算待显示的条目和待显示的条目的背景的大小与位置，来剪裁待显示的条目和待显示的条目的背景的大小与位置，便于根据待显示的条目和待显示的条目的背景的大小与位置下一帧动态画面。

可以理解的是，一次计算的时长为一帧画面显示的时长，例如，手机可在显示第一帧动态画面的显示的时长内，计算第二帧动态画面所需要显示的待显示的条目和待显示的条目的背景的大小与位置，并剪裁待显示的条目和待显示的条目的背景的大小与位置。

基于此，在计算结束后，下一帧中，手机的界面可由显示条目1005变为显示条目1005和优先级低于条目1005的条目1006。

例如，从接收到用户对图4中的（a）所示的控件1004进行触发的操作的时刻T1到当前时刻T2时，手机可显示如图4中的（b）所示的界面14。

其中，界面14中可以包括：卡片1003、条目1005和条目1006。此时，卡片1003中显示条目1005和部分条目1006。在动态画面的总时长为250ms，动态画面的起始时刻为手机接收到用户对图4中的（a）所示的控件1004进行触发的操作的时刻T1时，当前时刻T2可以为第75ms，界面14可以为第75ms显示的动态画面，即第4帧显示的动态画面。

在条目的数量为3个，包括条目1005、条目1006和条目1007，展开后的高度分别为H1、H2、H3，宽度均为W，对应的条目背景分别为D1、D2、D3，卡片1003的圆角值为rad=8dp时，当前时刻T2对应的条目1005和部分条目1006的情况为：

条目1005的高度为H1(T2)=H1，条目1006的高度为H2(T2)=(T2–T1)/dur*(H2+H3)。其中，dur为动效画面的总时长，可以为250ms。此时，H2(T2)>rad。

对条目1005进行区域显示裁剪setClipBound(rect(A1T2))，得到待显示的条目1005的显示区域的位置和大小为rect(A1T2)=(0,0,W,H1(T2))。

对条目1005的背景D1进行圆角显示裁剪addRoundRect(rect(A1T2)，rad)，rad=8dp，得到待显示的条目1005的背景D1的位置和大小为rectD(A1T2)=(0,0,W,H1(T2)+rad)。

对条目1006做区域显示裁剪setClipBound(rect(A2T2))，得到待显示的条目1006的显示区域的位置和大小为rect(A2T2)=(0,0,W,H2(T2))。

对条目1006的背景D2做圆角显示裁剪addRoundRect(rectD(A2T2)，rad)，rad=8dp，得到待显示的条目1006的背景D2的位置和大小为rectD(A2T2)=(0,-rad,W,H2(T2)+rad)。

随着动态画面的继续显示，手机可继续计算待显示的条目和待显示的条目的背景的大小与位置，并剪裁待显示的条目和待显示的条目的背景的大小与位置，便于根据待显示的条目和待显示的条目的背景的大小与位置下一帧动态画面。

基于此，在计算结束后，下一帧中，手机的界面可由显示条目1变为显示条目1005和优先级低于条目1005的条目1006、条目1007。

例如，从接收到用户对图4中的（a）所示的控件1004进行触发的操作的时刻T1到当前时刻T3时，手机可显示如图5中的（a）所示的界面15。

其中，界面15中可以包括：卡片1003、条目1005、条目1006和条目1007。此时，卡片1003中显示条目1005、条目1006和部分条目1007。在动态画面的总时长为250ms，动态画面的起始时刻为手机接收到用户对图4中的（a）所示的控件1004进行触发的操作的时刻T1时，当前时刻T3可以为第200ms，界面15可以为第200ms显示的动态画面。

在条目的数量为3个，包括条目1005、条目1006和条目1007，展开后的高度分别为H1、H2、H3，宽度均为W，对应的条目背景分别为D1、D2、D3，卡片1003的圆角值为rad=8dp时，当前时刻T3对应的条目1005、条目1006和部分条目1007的情况为：

条目1005的高度为H1(T3)=H1，条目1006的高度为H3(T3)=H2，条目1007的高度为H3(T3)=(T3–T1)/dur*(H2+H3)–H2。其中，dur为动效画面的总时长，可以为250ms。此时，H3(T3)＜rad。

对条目1005进行区域显示裁剪setClipBound(rect(A1T3))，得到待显示的条目1005的显示区域位置和大小为rect(A1T3)=(0,0,W,H1(T3))。

对条目1005的背景D1进行圆角显示裁剪addRoundRect(rect(A1T3)，rad)，rad=8dp，得到待显示的条目1005的背景D1的位置和大小为rectD(A1T2)=(0,0,W,H1(T3))。

对条目1006进行区域显示裁剪setClipBound(rect(A2T3))，得到待显示的条目1006的显示区域的位置和大小为rect(A2T2)=(0,0,W,H2(T3))。

对条目1006的背景D2进行圆角显示裁剪addRoundRect(rectD(A2T3)，rad)，rad=8dp，得到待显示的条目1006的背景D2的位置和大小为rectD(A2T3)=(0,-rad,W,H2(T3)+rad+H3（T3）)。

对条目1007进行区域显示裁剪setClipBound(rect(A3T3))，得到待显示的条目1007的显示区域的位置和大小为rect(A3T3)=(0,0,W,H3(T3))。

对条目1007的背景D3进行圆角显示裁剪addRoundRect(rectD(A3T3)，rad)，rad=8dp，得到待显示的条目1007的背景D2的位置和大小为rectD(A3T3)=(0,H3(T3)–2*rad,W,2*rad)。

随着动态画面的继续显示，手机可继续计算待显示的条目和待显示的条目的背景的大小与位置，并剪裁待显示的条目和待显示的条目的背景的大小与位置，便于根据待显示的条目和待显示的条目的背景的大小与位置下一帧动态画面。

基于此，在计算结束后，下一帧中，手机的界面可由显示条目1变为显示条目1005、条目1006和条目1007。

例如，从接收到用户对图4中的（a）所示的控件1004进行触发的操作的时刻1到时刻3时，手机可显示如图5中的（b）所示的界面16。

其中，界面16中可以包括：卡片1003、条目1005和卡片1006和卡片1007。此时，卡片1003中显示条目1005、条目1006和条目1007。在动态画面的总时长为250ms，动态画面的起始时刻为手机接收到用户对图4中的（a）所示的控件1004进行触发的操作的时刻T1时，当前时刻T4可以为第250ms，界面16可为第250ms显示的动态画面，即第15帧显示的动态画面。

在条目的数量为3个，包括条目1005、条目1006和条目1007，展开后的高度分别为H1、H2、H3，宽度均为W，对应的条目背景分别为D1、D2、D3，卡片1003的圆角值为rad=8dp时，条目完成展开，H1(T4)=H1，H2(T4)=H2，H3(T4)=H3，当前时刻T4对应的条目1005、条目1006和条目1007的情况为：

对条目1005进行区域显示裁剪setClipBound(rect(A1T4))，得到待显示的条目1005的显示区域的位置和大小为rect(A1T3)=(0,0,W,H1(T4))。

对条目1005的背景D1进行圆角显示裁剪addRoundRect(rect(A1T4)，rad)，rad=8dp，得到待显示的条目1005的背景D1的位置和大小为rectD(A1T4)=(0,0,W,H1(T4))。

对条目1006进行区域显示裁剪setClipBound(rect(A2T4))，得到待显示的条目1006的显示区域的位置和大小为rect(A2T2)=(0,0,W,H2(T4))。

对条目1006的背景D2进行圆角显示裁剪addRoundRect(rectD(A2T4)，rad)，rad=8dp，得到待显示的条目1006的背景D2的位置和大小为rectD(A2T2)=(0,-rad,W,H2(T4)+2*rad)。

对条目1007进行区域显示裁剪setClipBound(rect(A3T3))，得到待显示的条目1007的显示区域的位置和大小为rect(A3T4)=(0,0,W,H3(T4))。

对条目1007的背景D3进行圆角显示裁剪addRoundRect(rectD(A3T4)，rad)，rad=8dp，得到待显示的条目1007的背景D2的位置和大小为rectD(A3T3)=(0,-rad,W,H3（T4）+rad)。

其中，动态画面的总时长可以为250ms。动态画面的起始时刻为手机接收到用户对图4中的（a）所示的控件1004进行触发的操作的时刻，动态画面的终止时刻为最后一个条目显示结束的时刻。

在卡片1003中显示的条目的数量为3个时，动态画面的起始时刻为手机接收到用户对图4中的（a）所示的控件1004进行触发的操作的时刻，动态画面的终止时刻为第3个条目显示结束的时刻。

在帧率为每秒60帧时，250ms可显示15帧动态画面，那么，手机可在第125ms，即在第7帧时，显示完全第2个条目，手机可在第250ms，即在15帧时显示完全第3个条目。

综上，在卡片列表展开的过程中，实时计算下一帧显示的卡片的大小和形状，对底部的（一张或多张）卡片进行切割，实现两个卡片同时拼出一个圆角的效果，从而，使得卡片列表相互拼接得到的卡片视觉上为一张卡片的效果，且每个卡片都可以单独接收用户的操作。

基于上述场景描述，下面，本申请以终端设备为例，结合附图和应用场景，对本申请实施例提供的卡片显示方法进行详细阐述。

请参阅图6，图6示出了本申请一实施例提供的卡片显示方法的流程示意图。

如图6所示，本申请提供的卡片显示方法可以包括：

S11、界面1接收用户指示的第一操作。

其中，界面1可通过多种方式实现。

示例性地，在界面1为设置界面时，界面1的具体实现方式可参见图4中的（a）所示的界面13的相关描述，此处不做赘述。

在一些实施例中，界面1中显示有卡片1，卡片1中显示多个条目中的条目1，条目1中包括控件1。

其中，卡片1的具体实现方式可参见图4中的（a）所示的界面13中卡片1003的相关描述，此处不做赘述。条目1的具体实现方式可参见图4中的（a）所示的界面13中条目1005的相关描述，此处不做赘述。

S12、界面1触发列表控件展开。

其中，界面1可通过第一操作触发列表控件展开，第一操作可通过多种实现方式。

在一些实施例中，第一界面中的卡片1的条目包括第一控件，第一操作的具体实现方式可参见图4中的（a）所示的界面13中对控件1004的点击、长按或双击操作的相关描述，此处不做赘述。

在另一些实施例中，第一操作还可以为语音操作等方式的操作。

在接收到第一操作后，界面1能够根据第一操作，触发列表控件展开，即触发多个条目逐渐展开，多个条目逐渐展开的画面为动态画面。

举例说明，在多个条目为3个条目，分别为条目1、条目2和条目3，界面1中已显示有条目1时，界面1能够响应于第一操作，逐渐展开条目2和条目3。

S13、列表控件向动效工具模块发送列表条目。

列表控件在触发列表控件展开时，可向动效工具模块（动效工具类）发送列表条目，来通知动效工具模块所需要展开的条目的数量、预设高度、预设宽度和预设位置等参数。

从而，动效工具模块能够根据所需要展开的条目的数量、预设高度、预设宽度和预设位置等参数，计算将待显示的条目的显示高度和显示位置等参数。

S14、动效工具模块计算待显示的条目的显示高度。

可以理解的是，由于多个条目逐渐展开，每隔时间周期1，即每隔一帧画面，动效工具模块需要计算一次待显示的条目的显示高度和，便于在每隔时间周期1的时长显示计算得到的显示高度的待显示的条目。

举例说明，在多个条目为3个条目，分别为条目1、条目2和条目3，界面1中已显示有界面条目1时，能够响应于第一操作，可先逐渐展开条目2，在第一个时间周期的时长内，计算条目2的显示高度。

例如，在第一个时间周期的时长内，计算的条目2的显示高度为6dp，那么，多个条目对应的列表条目逐渐展开的动态画面中，第一帧可显示条目2的显示高度为6dp。

S15、动效工具模块裁剪待显示的条目的显示区域。

基于S14，动效工具模块可计算出待显示的条目的显示高度，那么，动效工具模块可根据待显示的条目的显示高度、待显示的条目的预设宽度，以及待显示的条目的预设位置（比如，左上角的坐标）对待显示的条目的显示区域进行裁剪。

从而，裁剪得到的待显示的条目的显示区域的宽度为该待显示的条目的预设宽度、待显示的条目的显示区域的高度为S14中计算出来的显示高度，待显示的条目的显示区域的左上角的坐标为该条目的左上角的坐标。

例如，以第2个条目的预设位置的左上角的坐标为原点时，第2个条目的显示区域的显示位置的左上角的坐标为该原点的坐标。

S16、动效工具模块裁剪待显示的条目的背景。

其中，裁剪条目背景是调整条目背景的尺寸大小，以使它与条目的尺寸相匹配。这样可以确保条目和背景之间没有不匹配的部分，使界面更加统一和协调。裁剪条目背景可以根据条目的大小来调整其宽度、高度或其他形状，确保背景与条目完美地融合在一起。

基于S15动效工具模块可以确定待显示的条目的显示区域的显示高度、显示宽度，以及显示位置，从而，动效工具模块可以根据待显示的条目的显示区域的显示高度、显示宽度，以及显示位置，以及预设圆角值，确定待显示的条目的背景的显示高度、显示宽度，以及显示位置。

例如，在第m个条目的显示区域的左上角的坐标为（0，0），宽度为w，高度为H（m，T）。

S17、动效工具模块向列表控件发送处理后的条目列表。

基于S15和S16，动效工具模块可裁剪出待显示的条目，以及待显示的条目的背景，从而，动效工具模块向列表控件发送处理后的条目列表，即待显示的条目，以及待显示的条目的背景，为在列表控件中显示待显示的条目和待显示的条目背景做好数据准备。

S18、列表控件测量条目。

其中，测量条目通常为测量待显示的条目的高度和宽度等参数。

由于在S14中，动效工具类模块已计算待显示的条目的显示高度，并在S17发送处理后的列表条目时，可将待显示的条目的显示高度发送到列表控件，因此，列表控件可不用再计算待显示的条目的高度。

另外，待显示的条目的宽度为待显示的条目的预设宽度，该预设宽度为预先设定的，因此，列表控件可不用再计算待显示的条目的宽度。

S19、列表控件布局条目。

其中，布局条目用于指示将待显示的条目布局在界面1中的位置。

基于S15，动效工具模块可裁剪得到待显示的条目的显示区域，并且，基于S16，动效工具模块可裁剪待显示的条目的背景，从而，可以确定待显示的条目的背景的位置和大小，那么，列表控件可以根据待显示的条目的背景的位置和大小布局条目。

S20、列表控件绘制条目。

其中，绘制条目的过程为通过代码或工具将条目以可视化的方式呈现出来，包括其外观、样式和交互效果。

基于S19，列表控件可根据待显示的条目的背景的位置和大小，以及待显示的条目所需要显示的终端设备中的信息布局条目（例如，文字和控件），由此，列表控件可根据布局的条目，对条目进行绘制。

S21、列表控件向图形模块发送绘制的条目，图形模块渲染与合成条目。

其中，渲染与合成条目通常为通过计算和组合图像元素来生成条目最终的可视化结果。

基于S20，列表控件可根据待显示的条目的背景的位置和大小，以及待显示的条目所需要显示的终端设备中的信息布局条目（例如，文字和控件）绘制条目，在绘制条目结束后可向图形模块发送绘制后的条目，图像模块可对绘制后的条目进行渲染与合成处理，形成最终可以显示在界面1中的条目。

S22、图形模块向显示模块发送经渲染和合成的条目，显示模块显示条目。

其中，显示模块在接收到经图形模块渲染与合成之后的条目后，可显示渲染与合成之后条目。

可以理解的是，在全部条目没有显示结束之前，终端设备可循环执行S14-S22，直至全部条目显示完全。

综上，界面1能够在接收到用户指示的第一操作后，启动计算待显示的条目的显示高度，并裁剪待显示的条目的显示区域，以及裁剪待显示的条目的条目背景，直至经渲染与合成后显示条目，并且，每隔时间周期1再次执行前述步骤，直至待显示的全部条目显示完全，可见，通过对待显示的条目进行实时计算裁剪条目与条目背景的方式，逐渐在界面中显示全部条目，保证了条目显示的视觉效果，使得多个条目及其背景可拼接形成整个卡片，保证了最终多个条目显示的视觉效果。

基于上述场景描述，下面，本申请以终端设备为例，结合附图和应用场景，对本申请实施例提供的卡片显示方法进行详细阐述。

请参阅图7，图7示出了本申请一实施例提供的卡片显示方法的流程示意图。

如图7所示，本申请提供的卡片显示方法可以包括：

S31、确定当前时刻T，第一界面中待显示的条目j。

其中，T=T1+V，T表示当前时刻，T1表示触发条目展开的时刻，V表示时间周期1。

终端设备可显示一个第一界面，该第一界面为用于设置终端设备的显示模式为深色模式或者浅色模式的界面，该第一界面还可以为用于对日历进行设置的界面，以及其他需要展开的条目的场景的界面。

在一些实施例中，上述第一界面中可以显示第一卡片，第一卡片中可以包括条目1和条目1的背景，条目1中显示有第一控件，该第一控件用于触发终端设备启动自动切换终端设备的显示模式为深色模式或浅色模式，即触发多个条目展开。

从而，在接收到第一控件上的操作后，终端设备逐渐显示多个条目中除条目1之外的其他条目，该过程对应的画面为动态画面。

其中，第一界面可以为图4中的（a）所示的界面13，第一卡片可以为卡片1003，卡片1003中的条目5可以为条目1，设置控件可以为控件1004。

应理解，上述以第一界面为界面13，第一控件为控件1004进行举例描述；本申请对第一界面的具体实现方式不做限定；本申请对第一控件的显示位置、显示样式、显示大小等参数不做限定。

在一些实施例中，动态画面的总时长为预先设定的，帧率也为预先设定的。

例如，动态画面的总时长为250ms，帧率为60帧每秒，那么，终端设备可大约16ms显示一帧画面，对应地，时间周期1为16ms。

举例说明，若条目的数量为3个，按照预设条目顺序排列包括条目1、条目2和条目3，终端设备的第一界面已显示条目1，在接收到用触发条目展开的操作后，手机可启动显示动态画面，即逐渐展开条目2和条目3，在动态画面显示结束后，终端设备的界面显示有完整的条目1、条目2和条目3。

其中，终端设备可以根据触发条目展开的时刻、当前时刻、动态画面的总时长、第2个条目到第j个条目的总高度、第j个条目之前的一个条目的高度，以及2个条目到第n个条目的总高度，来确定待显示的条目。

在一些实施例中，终端设备可采用如下公式确定当前时刻第一界面中待显示的条目j：

S（j）＝，2≤j≤n，S（1）＝0；

S（j-1）/S（n）＜（T-T1）/dur≤S（j）/S（n）。

其中，T表示当前时刻，T1表示触发条目展开的时刻，即接收到用户指示的自动切换深色模式和浅色模式的操作的时刻，n表示条目总数，dur表示动效总时长，j表示当前时刻第一界面中待显示的条目，S（j）表示第2个条目到第j个条目的总高度，S（j-1）表示第2个条目到第j-个条目的总高度，S（n）表示第2个条目到第n个条目的总高度。

假设动效画面的总时长为250ms，T=T1+V为16ms，条目总数为3个，分别为条目1、条目2和条目3，每个条目的高度均为48dp。

那么，在j等于2时，S（j-1）＝条目1的高度=0dp（条目1无需展开，可不参与计算高度），S（n）=条目2的高度+条目3的高度=48dp+48dp=96dp，S（j）＝条目2的高度=48dp，S（j-1）/S（n）=0，（T-T1）/dur=0.064，S（j）/S（n）=0.5，符合S（j-1）/S（n）＜（T-T1）/dur≤S（j）/S（n），即j等于2。

S32、判断m是否大于j-2。

终端设备可以确定当前时刻待显示的条目的位置j，由此，终端设备可将j-2的值与m进行比较，来确定如何对待显示的条目的显示区域和待显示的条目的背景进行裁剪。

在一些实施例中，m的初始值用于表示动效画面中待展开的第1个条目；在当前时刻第一界面已显示有1个条目，动效画面为展开第2个条目到多个条目中的最后一个条目时，m等于2，在当前时刻第一界面已显示有2个条目，动效画面为展开第3个条目到多个条目中的最后一个条目时，m等于3。

例如，多个条目为3个条目，在触发展开时刻T1，第一界面已显示1个条目，那么，在当前时刻，动效画面为展开第2个条目到第3个条目，m等于2。

可以理解的是，m与j之间存在三种关系：m=j-1、m=j和m≤j-2，m=j+1和m=j属于m＞j-2。

例如，j=2时，若m=2，则m＞j-2，满足m=j。

由此，在m大于j-2时，终端设备可执行S33；在m小于或等于j-2时，终端设备可执行S45。

S33、判断j是否等于m。

基于S31，终端设备可以确定待显示的条目为条目j，由此，终端设备可判断当前待显示的j是否为动效画面中展开的第2个条目。

在m=j时，终端设备可以确定当前待显示的条目为动效画面中展开的第2个条目，从而，终端设备可执行S34。

在m=j-1时，终端设备可以确定当前待显示的条目不为动效画面中展开的第2个条目，从而，终端设备可执行S39。

S34、确定第m个条目的显示高度。

其中，第m个条目的显示高度可以表示为H（m，T）。

在一些实施例中，终端设备可采用如下公式确定第m个条目的高度：

H（m，T）=（T-T1）/dur*S（n）-S（j-1）。

其中，T1表示触发条目展开的时刻，T表示当前时刻，dur表示动态画面的总时长，n表示条目总数，S（n）表示第2个条目到第n个条目的总高度，S（j-1）表示第2个条目到第j-1个条目的总高度。

假设T=T1+V为16ms，条目总数为3个，分别为条目1、条目2和条目3，dur为250ms，S（n）=条目2的高度+条目3的高度=48dp+48dp=96dp，j为2，S（j-1）=S（1）＝0dp。

那么，H（m，T）=6.144dp。

S35、根据第m个条目的预设位置和预设大小，对第m个条目进行区域裁剪。

第m个条目的预设位置和预设大小为预先设定的，从而，终端设备可根据第m个条目的预设位置和预设大小，确定第m个条目的显示区域的显示位置和显示大小，如此，终端设备能够根据第m个条目的显示区域的显示位置和显示大小，对第m个条目进行区域裁剪。

其中，第m个条目的显示区域的显示位置和显示大小可以表示为rectA1。

在一些实施例中，终端设备可采用如下公式确定第m个条目的显示区域的显示位置和显示大小（宽度和高度）：

rectA1=（0，0，w，H（m，T））。

其中，（0，0）表示以第m个条目的预设位置的左上角的坐标为原点时，第m个条目的显示区域的显示位置的左上角的坐标，w表示第m个条目的宽度，H（m，T）表示第m个条目的显示高度。

假设w为400dp，H（m，T）为6.144dp，那么，rectA1=（0，0，400dp，6.144dp）。

S36、判断第m个条目的显示高度是否小于预设圆角值r。

基于S34，终端设备可以确定第m个条目的显示高度，由此，终端设备可以判断第m个条目的显示高度是否小于预设圆角值r。

在第m个条目的显示高度小于预设圆角值r时，终端设备可执行S37；在第m个条目的显示高度大于或等于预设圆角值r时，终端设备可执行S38。

S37、根据第m个条目的显示位置和显示大小，对第m个条目进行背景裁剪。

基于S36，终端设备可以确定第m个条目的显示位置和显示大小，从而，终端设备可根据第m个条目的显示位置和显示大小，确定第m个条目的背景m的显示位置和显示大小，如此，终端设备能够根据第m个条目的背景m的显示位置和显示大小，对第m个条目的背景m进行裁剪。

其中，终端设备可以通过圆角矩形剪裁的方式对第m个条目的背景m进行背景剪裁。

在一些实施例中，在第m个条目的显示高度小于预设圆角值r时，终端设备可采用如下公式确定对第m个条目进行背景裁剪时，圆角矩形的显示位置和显示大小（宽度和高度）：

rectD1=（0，H（m，T）-2r，w，2r）。

其中，H（m，T）表示第m个条目的显示高度，（0，H（m，T）-2r）表示以第m个条目的预设位置的左上角的坐标为原点时，对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的左上角的坐标，w表示第m个条目的宽度，2r表示对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的高度。

基于S35和S37，终端设备可以对第m个条目进行区域裁剪和背景裁剪，在裁剪后终端设备可对第m个条目进行绘制，并进行渲染和合成，并发送到显示模块，由显示模块将第m个条目显示在界面中。

可以理解的是，若第m个条目的高度为H（m，T），对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的高度需要为2倍的预设圆角值r的高度，即2r，对应地，对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的纵坐标需要上移H（m，T）-2r，即对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的左上角的坐标为（0，H（m，T）-2r）。

如此，在绘制第m个条目时，能够使得对第m个条目通过圆角矩形裁剪时的圆角矩形与第m个条目的显示区域下方对齐，从而，第m个条目的背景的底部的两个角可以形成圆角矩形对应的圆角，第m个条目的顶部的两个角不形成圆角，即为直角。

需要说明的是，对第m个条目通过圆角矩形裁剪时的圆角矩形高于第m个条目的显示区域的部分不显示。

并且，在对待第m个条目通过圆角矩形裁剪背景时，可将已显示的条目下端的两个圆角，裁剪为直角，如此，通过圆角矩形裁剪后第m个条目的上端两个角为直角，下端两个角为圆角，拼接在第m-1个条目下方后，第m个条目可与已显示的条目形成一整个卡片。

例如，第一个条目的四个角均为圆角，第一次对待第二个条目通过圆角矩形裁剪背景时，可将第一个条目下端的两个圆角，裁剪为直角，将裁剪得到的上端两个角为直角，下端两个角为圆角的第二个条目显示在第一个条目下方后，第二个条目可与第一个条目形成一整个卡片。

S38、根据第m个条目的显示位置，对第m个条目进行背景剪裁。

基于S37可知，终端设备可以通过圆角矩形剪裁的方式对第m个条目进行背景剪裁。

在一些实施例中，在第m个条目的显示高度大于或等于预设圆角值r时，终端设备可采用如下公式确定对第m个条目进行背景裁剪时，圆角矩形的显示位置和显示大小（宽度和高度）：

rectD1=（0，-r，w，H（m，T）+r）。

其中，（0，-r）表示以第m个条目的预设位置的左上角的坐标为原点时，对第m个条目进行背景裁剪时，圆角矩形的左上角的坐标，w表示第m个条目的宽度，H（m，T）表示第m个条目的显示高度，H（m，T）+r表示第m个条目的背景m显示高度。

基于S35和S38，终端设备可以对第m个条目进行区域裁剪和背景裁剪，在裁剪后终端设备可对第m个条目进行绘制，并进行渲染和合成，并发送到显示模块，由显示模块将第m个条目显示在界面中。

可以理解的是，若第m个条目的高度为H（m，T），对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的高度需要高出预设圆角值r的高度，即对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的高度为H（m，T）+r，对应地，对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的左上角的纵坐标需要上移预设圆角值r的高度，即对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的左上角的坐标为（0，-r）。

如此，在绘制第m个条目时，能够使得对第m个条目通过圆角矩形裁剪时的圆角矩形与第m个条目的显示区域下方对齐，从而，第m个条目的背景的底部的两个角可以形成圆角矩形对应的圆角，第m个条目的顶部的两个角不形成圆角，即为直角。

S39、确定第m个条目的显示高度。

其中，第m个条目的显示高度可以表示为H（m，T）。

在一些实施例中，终端设备可采用如下公式确定第m个条目的高度：

H（m，T）=H（m）。

其中，T表示当前时刻。

例如，在m＝2，m=j-1，j=3时，第m个条目的显示高度为第2个条目的预设高度。

S40、根据第m个条目的预设位置和预设大小，对第m个条目进行区域剪裁。

其中，第m个条目的显示区域的显示位置可以表示为rectA1。

在一些实施例中，终端设备可采用如下公式确定第m个条目的显示区域的显示位置和显示大小（宽度和高度）：

rectA1=（0，0，w，H（m，T））。

其中，（0，0）表示以第m个条目的预设位置的左上角的坐标为原点时，第m个条目的显示区域的显示位置的左上角的坐标，w表示第m个条目的宽度，H（m，T）表示第m个条目的显示高度。

S41、确定第m+1个条目的高度。

其中，第m个条目的显示高度可以表示为H（m+1，T）。

例如，在m＝2，m=j-1，j=3时，m+1=3，第m+1个条目的显示高度可以表示为条目3的高度。

在一些实施例中，终端设备可采用如下公式确定第m个条目的高度：

H（m+1，T）=（T-T1）/dur*S（n）-S（j-1）。

其中，T1表示触发条目展开的时刻，T表示当前时刻，dur表示动效总时长，n表示条目总数，S（n）表示第2个条目到第n个条目的总高度，S（j-1）表示第2个条目到第j-个条目的总高度。

S42、判断第m+1个条目的显示高度是否小于预设圆角值r。

基于S41，终端设备可以确定第m+1个条目的显示高度，由此，终端设备可以判断第m+1个条目的显示高度是否小于预设圆角值r。

在第m+1个条目的显示高度小于或等于预设圆角值r时，终端设备可执行S43；在第m+1个条目的显示高度大于预设圆角值r时，终端设备可执行S44。

S43、根据第m个条目的显示位置和显示大小，对第m个条目进行背景裁剪。

其中，终端设备可以通过圆角矩形剪裁的方式对第m个条目进行背景剪裁。

在一些实施例中，在第m+1个条目的显示高度小于预设圆角值r时，终端设备可采用如下公式确定对第m个条目进行背景裁剪时，圆角矩形的显示位置和显示大小（宽度和高度）：

rectD1=（0，-r，w，H（m，T）+H（m+1，T）+r）。

其中，（0，-r）表示以第m个条目的预设位置的左上角的坐标为原点时，对第m个条目的背景进行背景裁剪时，圆角矩形的左上角的坐标，w表示第m个条目的宽度，H（m，T）表示第m个条目的显示高度，H（m+1，T）+r表示对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的显示高度。

基于S40和S43，终端设备可以对第m个条目进行区域裁剪和背景裁剪，在裁剪后终端设备可对第m个条目进行绘制，并进行渲染和合成，并发送到显示模块，由显示模块将第m个条目显示在界面中。

可以理解的是，若第m个条目的高度为H（m，T），对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的高度需要为H（m，T）+H（m+1，T）+r，对应地，对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的左上角的纵坐标需要上移预设圆角值r的高度，即对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的左上角的坐标为（0，-r）。

如此，在绘制第m个条目时，能够使得对第m个条目通过圆角矩形裁剪时的圆角矩形与第m个条目的显示区域下方对齐，从而，第m个条目的背景的底部的两个角可以形成圆角矩形对应的圆角，第m个条目的顶部的两个角不形成圆角，即为直角。

S44、根据第m个条目的显示位置和显示大小，对第m个条目进行背景剪裁。

基于S43可知，终端设备可以通过圆角矩形剪裁的方式对第m个条目的背景进行背景剪裁。

在一些实施例中，在第m+1个条目的显示高度大于或等于预设圆角值r时，终端设备可采用如下公式确定对第m个条目进行背景裁剪时，圆角矩形的显示位置和显示大小（宽度和高度）：

rectD1=（0，-r，w，H（m，T）+2r）。

其中，（0，-r）表示以第m个条目的预设位置的左上角的坐标为原点时，对第m个条目进行背景裁剪时，圆角矩形的左上角的坐标，w表示第m个条目的宽度，H（m，T）表示第m个条目的显示高度，H（m，T）+2r表示对第m个条目进行背景裁剪时，圆角矩形的显示高度。

基于S40和S44，终端设备可以对第m个条目进行区域裁剪和背景裁剪，在裁剪后终端设备可对第m个条目进行绘制，并进行渲染和合成，并发送到显示模块，由显示模块将第m个条目显示在界面中。

可以理解的是，若第m个条目的高度为H（m，T），对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的高度需要为H（m，T）+2r，对应地，对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的左上角的纵坐标需要上移预设圆角值r的高度，即对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的左上角的坐标为（0，-r）。

如此，在绘制第m个条目时，能够使得对第m个条目通过圆角矩形裁剪时的圆角矩形与第m个条目的显示区域下方对齐，从而，第m个条目的背景的底部的两个角可以形成圆角矩形对应的圆角，第m个条目的顶部的两个角不形成圆角，即为直角。

S45、确定第m个条目的显示高度。

其中，第m个条目的显示高度可以表示为H（m，T）。

在一些实施例中，终端设备可采用如下公式确定第m个条目的高度：

H（m，T）=H（m）。

其中，T表示当前时刻，即接收到用户指示的自动切换深色模式和浅色模式的操作的时刻。

S46、根据第m个条目的预设位置和预设大小，对第m个条目进行区域剪裁。

其中，第m个条目的显示区域的显示位置可以表示为rectA1。

在一些实施例中，终端设备可采用如下公式确定第m个条目的显示区域的显示位置和显示大小（宽度和高度）：

rectA1=（0，0，w，H（m，T））。

其中，（0，0）表示以第m个条目的预设位置的左上角的坐标为原点时，第m个条目显示区域的显示位置的左上角的坐标，w表示第m个条目的宽度，H（m，T）表示第m个条目的显示高度。

S47、根据第m个条目的显示位置和显示大小，对第m个条目进行背景裁剪。

其中，终端设备可以通过圆角矩形剪裁的方式对第m个条目进行背景剪裁。

在一些实施例中，在第m+1个条目的显示高度小于预设圆角值r时，终端设备可采用如下公式确定背景m的显示位置和显示大小（宽度和高度）：

rectD1=（0，-r，w，H（m，T）+2r）。

其中，（0，-r）表示以第m个条目的预设位置的左上角的坐标为原点时，对第m个条目进行背景裁剪时，圆角矩形的左上角的坐标，w表示第m个条目的宽度，H（m，T）表示第m个条目的显示高度，H（m，T）+2r）表示对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的显示高度。

基于S46和S47，终端设备可以对第m个条目进行区域裁剪和背景裁剪，在裁剪后终端设备可对第m个条目进行绘制，并进行渲染和合成，并发送到显示模块，由显示模块将第m个条目显示在界面中。

可以理解的是，若第m个条目的高度为H（m，T），对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的高度需要为H（m，T）+2r），对应地，对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的左上角的纵坐标需要上移预设圆角值r的高度，即对第m个条目的背景通过圆角矩形裁剪时的圆角矩形的左上角的坐标为（0，-r）。

如此，在绘制第m个条目时，能够使得对第m个条目通过圆角矩形裁剪时的圆角矩形与第m个条目的显示区域下方对齐，从而，第m个条目的底部的两个角可以形成圆角矩形对应的圆角，第m个条目的顶部的两个角不形成圆角，即为直角。

S48、判断m是否小于j。

基于S37、S38、S43、S44或S47，确定对第m个条目的背景m进行背景裁剪，即确定第m个条目的背景m的显示位置和显示大小后，终端设备还需要继续判断m是否小于j。

在m小于j时，终端设备可执行S51；在m大于或等于j时，终端设备可执行S49。

S49、判断T-T1是否小于dur。

在T-T1小于dur时，终端设备可以确定动态画面还未结束显示，即多个条目的展开过程还未结束，从而，终端设备可执行S50。

在T-T1大于或等于dur时，终端设备可以确定动态画面结束显示，即多个条目的展开过程结束，不再执行任意一个步骤，可结束流程。

S50、更新T为T+V。

其中，v表示显示一帧动态画面的时间周期。

举例说明，在帧率为60帧每秒，动态画面的显示总时长为250ms，条目总数为3个，分别为条目1、条目2和条目3时，终端设备可在15帧内显示结束条目2和条目3，即终端设备可在每隔16ms显示一帧条目的动态画面，即更新T为T+16ms。

可以理解的是，在动态画面结束显示之前，终端设备可循环执行S31-S50，直至动态画面结束，即最后一个条目显示结束。

S51、更新m为m+1。

在m小于j时，终端设备可以确定终端设备完成了对第m个条目第一次的区域剪裁和背景剪裁。从而，终端设备可继续对第m个条目第二次的区域剪裁和背景剪裁。

可以理解的是，在第m个条目显示结束之前，终端设备可循环执行S32-S51，直至第m个显示结束。

举例说明，在条目的数量为3个，且m的初始值为2，初始状态下，终端设备的界面中已显示有条目1，需要逐渐展开条目2和条目3，展开条目2和条目3的动态画面的总时长dur为250ms时，那么，j的初始值为2，m=j，则执行S34-S38，经S48中的判断，可以确定继续执行T-T1≤dur，由于此时T-T1为16ms，条目2还未展示结束，则更新T为T+V，变为32ms，继续执行S31-S50，再执行多次，确定当前时刻T待显示的条目j为3时，满足m=j-1，则执行S39-S50…，直至条目3显示结束，条目1、条目2和条目3拼接形成一个高度比初始状态下显示条目2的卡片的高度更高的卡片。

基于上述例子，最终形成的卡片，条目1的背景上端两个角为圆角，下端两个角为直角，条目2的背景上端两个角为直角，下端两个角为直角，条目3的背景上端两个角为直角，下端两个角为圆角。

综上，可在预设时长内，根据多个条目中每个条目的预设高度、多个条目中每个条目的预设宽度，以及第一圆角值按照预设条目顺序循环对待显示的条目的显示区域和条目背景进行裁剪，来确定待显示的条目的位置和大小，通过逐渐待显示的条目方式，保证了展开多个条目的视觉效果，提高了用户的体验；另外，展开后的多个条目可以单独实现操作反馈，避免了多个条目拼接形成的卡片中多个条目难以实现操作反馈的情况。

基于前述的一些实施例，下面介绍本申请提供的卡片显示方法。

示例性地，本申请提供一种卡片显示方法。

为了便于说明，本申请的卡片显示方法可由图1中的终端设备来执行。

请参阅图8，图8示出了本申请一实施例提供的卡片显示方法的流程示意图。

如图8所示，本申请提供的卡片显示方法可以包括：

S301、显示第一界面，第一界面中显示有第一卡片，第一卡片中包括多个条目中的第一条目，第一条目中包括第一控件，第一条目的优先级为预设条目顺序中的最高优先级。

其中，第一界面的具体实现方式可参见图4中的（a）所示的界面13，以及图6中的第一界面的相关描述，此处不做赘述。

S301的具体实现方式可参见图3中的（a）所示的界面11-图4中的（a）所示的界面13的相关描述，以及图6中的S11，与图7中的S31的相关描述，此处不做赘述。

第一条目可以为一个，也可以为多个。

第一条目的具体实现方式可参见图4中的（a）所示的界面13中的条目1005的相关描述，以及图6中的S14，与图7中的S31中的条目1的相关描述，此处不做赘述。

第一控件的具体实现方式可参见图4中的（a）所示的界面13-图5中的（b）所示的界面16中的控件1004的相关描述，以及图7中的S31中的第一控件的相关描述，此处不做赘述。

S302、响应于对所述第一控件的第一操作，根据预设条件显示第一画面，预设条件包括以下至少一项：预设时长、多个条目中每个条目的预设高度、多个条目中每个条目的预设宽度，以及第一圆角值；所述第一画面为按照预设条目顺序依次显示所述多个条目中除所述第一条目之外的其他条目的画面。

其中，第一操作的具体实现方式可参见对图4中的（a）所示的界面13中的控件1004的相关描述，以及图6中的S11中的第一操作，与图7中的S31中的第一控件上的操作的相关描述，此处不做赘述。

预设时长为显示第一画面的时长，例如，预设时长为250ms。

第一圆角值为第一卡片的圆角值。

S302的具体实现方式可参见图4中的（a）所示的界面13-图5中的（b）所示的界面16的相关描述，以及图6中的S14-S22，与图7中的S31-S51的相关描述，此处不做赘述。

S303、在所述第一画面显示结束后，在第一界面中显示更新后的第一卡片，更新后的第一卡片中包括第一条目以及按照预设条目顺序依次显示的多个条目中除所述第一条目之外的其他条目。

其中，更新后的第一卡片的具体实现方式可参见图5中的（a）所示的界面16中的卡片1003的相关描述，此处不做赘述。

S303的具体实现方式可参见图5中的（b）所示的界面16的相关描述，以及图6中的S22的相关描述，此处不做赘述。

可以理解的是，随着第一界面逐渐显示多个条目中除所第一条目之外的其他条目，第一卡片的尺寸逐渐更新；第一卡片与更新后的第一卡片的圆角值相同，均为第一圆角值；第一卡片与更新后的第一卡片的宽度相同，均为预设宽度；第一卡片与更新后的第一卡片的高度不同。

本申请的卡片显示方法，可在第一预设时长内，根据多个条目中每个条目的预设高度、多个条目中每个条目的预设宽度，以及第一圆角值按照预设条目顺序逐渐显示多个条目中除第一条目之外的其他条目，边计算待展开的多个条目中除第一条目之外的其他条目的位置和大小，边展开多个条目中除第一条目之外的其他条目的方式，保证了展开多个条目的视觉效果，并且，在计算的过程中加入第一圆角值，可使得展开后的多个条目拼接形成四个圆角的圆角值相同的整张卡片，保证了最终形成的卡片的视觉效果，提高了用户的体验；另外，展开后的多个条目可以单独实现操作反馈，避免了多个条目拼接形成的卡片中多个条目难以实现操作反馈的情况。

在一些实施例中，本申请的卡片显示方法可以包括：

根据预设时长和预设帧率，确定第一时间周期；

每隔第一时间周期，根据第一时刻、多个条目中每个条目的预设高度、多个条目中每个条目的预设宽度，以及第一圆角值，确定待显示的条目的背景的显示位置、显示宽度和显示高度，所述第一时刻为所述终端设备接收到所述第一操作的时刻；

根据待显示的条目的背景的显示位置、显示宽度和显示高度，对待显示的条目进行绘制；

按照预设条目顺序，将所述绘制后的待显示的条目依次显示在第一界面中，所述待显示的条目包括多个条目中除第一条目之外的其他条目。

其中，预设帧率为预先设定的，例如，预设帧率为60帧每秒。

第一时间周期可以根据预设时长和预设帧率计算得到，例如，预设帧率为250ms，预设帧率为60帧每秒，那么，250ms*60帧每秒/1000ms=15帧，即预设时长内可显示15帧画面，对应地，250ms/15帧约等于16ms，即第一时间周期为16ms，也就是说，每16ms可以显示一帧第一画面。

第一时刻为终端设备接收到第一操作的时刻。

上述步骤的具体实现方式可参见图4中的（a）所示的界面13-图5中的（b）所示的界面16的相关描述，以及图6中的S14-S22，与图7中的S31-S51的相关描述，此处不做赘述。

在一些实施例中，本申请的卡片显示方法可以包括：

确定第二时刻待显示的条目在预设条目顺序中的排列位置j，第二时刻T为T+V，T1为第一时刻，V为第一时间周期，j为大于或等于2的整数；

确定待显示的第m个条目与j之间的关系，m为大于或等于2的整数；

在m等于j时，根据第二时刻、所述第一时刻、预设条目顺序中第二个条目到第n个条目的预设高度，以及第二个条目到第j-1个条目的预设高度，确定待显示的第m个条目的显示高度，n为多个条目对应的数量，n为大于2的整数；

根据待显示的第m个条目的显示高度、待显示的第m个条目的预设宽度，以及待显示的第m个条目在第一界面中的预设位置，确定待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度；

在待显示的第m个条目的显示高度小于第一圆角值时，根据第一圆角值，以及待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度；

在m小于j，且第二时刻与第一时刻的差值小于或等于预设时长时，更新第二时刻T为T+V，并继续执行确定第二时刻待显示的条目在预设条目顺序中的排列位置j，直至第二时刻与第一时刻的差值大于预设时长为止。

结合图7中的S34，上述步骤中，待显示的第m个条目的显示高度可以表示为H（m，T）=（T-T1）/dur*S（n）-S（j-1）。

结合图7中的S35，上述步骤中，待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度可以表示为（0，0，w，H（m，T））。

结合图7中的S37，上述步骤中，待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度可以表示为（0，H（m，T）-2r，w，2r）。

其中，上述步骤的具体实现方式可参见图4中的（b）所示的界面14的相关描述，以及图6中的S14-S16、图7中的S31-S37与S48-S50的相关描述，此处不做赘述。

可以理解的是，在第一条目包括1个条目时，上述步骤中第一个待显示的条目为条目2。

在一些实施例中，终端设备可根据第一圆角值，以及待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，确定对待显示的第m个条目进行背景裁剪的圆角矩形的位置、宽度和高度，将该圆角矩形置于待显示的第m个条目的显示区域中，使得圆角矩形的下方与显示区域的下方重合，右侧与右侧重合，左侧与左侧重合，来对待显示的第m个条目的条目背景进行裁剪，从而，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度。

本申请的卡片显示方法中，在m=j时，终端设备能够对先确定待显示的第m个条目的显示区域，并基于该显示区域确定第m个条目的条目背景，并在第一画面还未显示结束时，可继续执行上述步骤直至第m个条目显示高度等于预设高度，第m个条目显示结束，还可以继续执行上述步骤直至预设条目顺序中的最后一个条目显示高度等于预设高度，最后一个条目显示结束，第一画面显示结束。

在一些实施例中，本申请的卡片显示方法可以包括：

在待显示的第m个条目的高度大于或等于第一圆角值时，根据第一圆角值，以及待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度。

结合图7中的S38，上述步骤中，待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度可以表示为（0，-r，w，H（m，T）+r）。

其中，上述步骤的具体实现方式可参见图4中的（b）所示的界面14的相关描述，以及图6中的S14-S16、图7中的S38的相关描述，此处不做赘述。

在一些实施例中，本申请的卡片显示方法可以包括：

在m等于j-1时，根据待显示的第m个条目的预设高度，确定待显示的第m个条目的显示高度；

根据待显示的第m个条目的显示高度，得到待显示的第的m个条目的显示区域的显示位置、显示宽度和显示高度；

根据第二时刻、第一时刻、第二个条目到第j个条目的预设高度，以及第j个条目之前的一个条目的预设高度，确定待显示的第m+1个条目的显示高度；

在待显示的第m+1个条目的高度小于第一圆角值时，根据第一圆角值、待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，以及待显示的第m+1个条目的显示高度，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度；

在m小于j，且第二时刻与第一时刻的差值小于或等于预设时长时，更新第二时刻T为T+V，并继续执行确定第二时刻待显示的条目在预设条目顺序中的排列位置j，直至第二时刻与第一时刻的差值大于预设时长为止。

其中，上述步骤的具体实现方式可参见图5中的（a）所示的界面15的相关描述，以及图6中的S14-S16、图7中的S39-S43的相关描述，此处不做赘述。

在一些实施例中，本申请的卡片显示方法可以包括：

在待显示的第m+1个条目的高度大于或等于第一圆角值时，根据第一圆角值，以及待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度。

其中，上述步骤的具体实现方式可参见图5中的（a）所示的界面15的相关描述，以及图6中的S14-S16、图7中的S44的相关描述，此处不做赘述。

在一些实施例中，本申请的卡片显示方法可以包括：

在m大于j-2时，根据待显示的第m个条目的预设高度，确定待显示的第m个条目的显示高度；

根据待显示的第m个条目的显示高度，确定待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度；

根据第一圆角值，以及待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度，确定待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度；

在m小于j，且第二时刻与第一时刻的差值小于或等于预设时长时，更新第二时刻T为T+V，并继续执行确定第二时刻待显示的条目在预设条目顺序中的排列位置j，直至第二时刻与第一时刻的差值大于预设时长为止。

其中，上述步骤的具体实现方式可参见图5中的（b）所示的界面16的相关描述，以及图6中的S14-S16、图7中的S45-S47的相关描述，此处不做赘述。

在一些实施例中，本申请的卡片显示方法可以包括：

在m大于j时，更新m为m+1，并继续执行确定m与j之间的关系，直至确定m小于j为止。

其中，上述步骤的具体实现方式可参见图5中的（a）所示的界面15的相关描述，以及图6中的S14-S16、图7中的S48-S51与S32-S50的相关描述，此处不做赘述。

在一些实施例中，多个条目中除第一条目之外的其他条目按照预设条目顺序依次显示在第一条目的上方或者第一条目的下方。

例如，多个条目的数量为3个，分别为条目1、条目2和条目3，第一条目的数量为1个，条目2和条目3依次显示在条目1的下方。

示例性地，本申请提供一种电子设备，包括处理器；当处理器执行存储器中的计算机代码或指令时，使得电子设备执行前文实施例中的卡片显示方法。

示例性地，本申请提供一种电子设备，包括：存储器和处理器；该存储器与处理器耦合，存储器用于存储程序代码或指令；处理器用于调用存储器中的程序代码或指令使得电子设备执行前文实施例中的卡片显示方法。

示例性地，本申请提供一种芯片系统，芯片系统应用于包括存储器、显示屏和传感器的电子设备；芯片系统包括：一个或多个接口电路和一个或者多个处理器；接口电路和处理器通过线路互联；接口电路用于从存储器接收信号，并向处理器发送信号，信号包括存储器中存储的计算机代码或指令；当处理器执行计算机代码或指令时，电子设备执行前文实施例中的卡片显示方法。

示例性地，本申请提供一种计算机可读存储介质，计算机可读存储介质中存储有代码或指令，当代码或指令在电子设备上运行时，使得电子设备执行时实现前文实施例中的卡片显示方法。

示例性地，本申请提供一种计算机程序产品，当计算机程序产品在计算机上运行时，使得电子设备实现前文实施例中的卡片显示方法。

在上述实施例中，全部或部分功能可以通过软件、硬件、或者软件加硬件的组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。计算机程序产品包括一个或多个计算机代码或指令。在计算机上加载和执行计算机程序代码或指令时，全部或部分地产生按照本申请的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机代码或指令可以存储在计算机可读存储介质中。计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质，（例如，软盘、硬盘、磁带）、光介质（例如，DVD）、或者半导体介质（例如，固态硬盘（solid state disk，SSD））等。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，该流程可以由计算机程序来指令相关的硬件完成，该程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法实施例的流程。而前述的存储介质包括：只读存储器（read only memory，ROM）或随机存取存储器（random access memory，RAM）、磁碟或者光盘等各种可存储程序代码的介质。

Claims (11)

1.一种卡片显示方法，其特征在于，应用于终端设备，所述方法包括：

显示第一界面，所述第一界面中显示有第一卡片，所述第一卡片中包括多个条目中的第一条目，所述第一条目中包括第一控件；

响应于对所述第一控件的第一操作，根据预设时长和预设帧率，确定第一时间周期；

每隔所述第一时间周期，根据第一时刻、所述多个条目中每个条目的预设高度、所述多个条目中每个条目的预设宽度，以及第一圆角值，确定待显示的条目的背景的显示位置、显示宽度和显示高度，所述第一时刻为所述终端设备接收到所述第一操作的时刻，所述待显示的条目包括所述多个条目中除所述第一条目之外的其他条目；

根据所述待显示的条目的背景的显示位置、显示宽度和显示高度，对所述待显示的条目进行绘制；

将绘制后的所述待显示的条目显示在所述第一界面中，以使所述第一界面显示第一画面，所述第一画面为按照预设条目顺序逐一显示所述多个条目中除所述第一条目之外的其他条目的画面，所述多个条目中除所述第一条目之外的其他条目中的每个条目均通过多帧画面显示得到；

在所述第一画面显示结束后，在所述第一界面中显示更新后的第一卡片，所述更新后的第一卡片中包括所述第一条目以及按照预设条目顺序逐一显示的所述多个条目中除所述第一条目之外的其他条目。

2.根据权利要求1所述的方法，其特征在于，所述每隔所述第一时间周期，根据第一时刻、所述多个条目中每个条目的预设高度、所述多个条目中每个条目的预设宽度，以及所述第一圆角值，确定待显示的条目的背景的显示位置、显示宽度和显示高度，包括：

确定第二时刻待显示的条目在所述预设条目顺序中的排列位置j，所述第二时刻T为T1+V，T1为所述第一时刻，V为所述第一时间周期，j为大于或等于2的整数；

确定待显示的第m个条目与j之间的关系，m为大于或等于2的整数；

在m等于j时，根据所述第二时刻、所述第一时刻、所述预设条目顺序中第二个条目到第n个条目的预设高度，以及所述第二个条目到第j-1个条目的预设高度，确定所述待显示的第m个条目的显示高度，n为所述多个条目对应的数量，n为大于2的整数；

根据所述待显示的第m个条目的显示高度、所述待显示的第m个条目的预设宽度，以及所述待显示的第m个条目在所述第一界面中的预设位置，确定所述待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度；

在所述待显示的第m个条目的显示高度小于所述第一圆角值时，根据第一计算方式，确定所述待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度；

在m不小于j，且所述第二时刻与所述第一时刻的差值小于所述预设时长时，更新所述第二时刻T为T+V，并继续执行所述确定第二时刻待显示的条目在所述预设条目顺序中的排列位置j的步骤，直至所述第二时刻与所述第一时刻的差值大于或等于所述预设时长为止。

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

在所述待显示的第m个条目的高度大于或等于所述第一圆角值时，根据第二计算方式，确定所述待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度，所述第二计算方式与所述第一计算方式不同。

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

在m等于j-1，且j≥3时，根据待显示的第m个条目的预设高度，确定所述待显示的第m个条目的显示高度；

根据所述待显示的第m个条目的显示高度、所述待显示的第m个条目的预设宽度，以及所述待显示的第m个条目在所述第一界面中的预设位置，得到所述待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度；

根据所述第二时刻、所述第一时刻、所述预设条目顺序中第二个条目到第n个条目的预设高度，以及所述第二个条目到第j-1个条目的预设高度，确定待显示的第m+1个条目的显示高度；

在所述待显示的第m+1个条目的高度小于所述第一圆角值时，根据第三计算方式，确定所述待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度，所述第三计算方式分别与所述第一计算方式和第二计算方式不同，所述第二计算方式与所述第一计算方式不同；

在m不小于j，且所述第二时刻与所述第一时刻的差值小于所述预设时长时，更新所述第二时刻T为T+V，并继续执行所述确定第二时刻待显示的条目在预设条目顺序中的排列位置j的步骤，直至所述第二时刻与所述第一时刻的差值大于或等于所述预设时长为止。

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

在待显示的第m+1个条目的高度大于或等于所述第一圆角值时，根据第四计算方式，确定所述待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度，所述第四计算方式分别与所述第一计算方式、所述第二计算方式和所述第三计算方式不同。

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

在m小于或等于j-2，且j≥4时，根据待显示的第m个条目的预设高度，确定所述待显示的第m个条目的显示高度；

根据所述待显示的第m个条目的显示高度、所述待显示的第m个条目的预设宽度，以及所述待显示的第m个条目在所述第一界面中的预设位置，确定所述待显示的第m个条目的显示区域的显示位置、显示宽度和显示高度；

根据第五计算方式，确定所述待显示的第m个条目的条目背景的显示位置、显示宽度和显示高度，所述第五计算方式分别与所述第一计算方式、第二计算方式、第三计算方式和第四计算方式不同，所述第一计算方式、所述第二计算方式、所述第三计算方式和所述第四计算方式之间不同；

在m不小于j，且所述第二时刻与所述第一时刻的差值小于所述预设时长时，更新所述第二时刻T为T+V，并继续执行确定所述第二时刻待显示的条目在预设条目顺序中的排列位置j的步骤，直至所述第二时刻与所述第一时刻的差值大于或等于所述预设时长为止。

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

在m小于j时，更新m为m+1，并继续执行确定m与j之间的关系的步骤，直至确定m不小于j为止。

8.根据权利要求2至5中任一项所述的方法，其特征在于，所述多个条目中除所述第一条目之外的其他条目按照所述预设条目顺序依次显示在所述第一条目的上方或者所述第一条目的下方。

9.一种终端设备，其特征在于，包括：

一个或多个处理器，存储器，以及一个或多个计算机程序；其中，所述一个或多个计算机程序存储在所述存储器上，当所述计算机程序被所述一个或多个处理器执行时，使得所述终端设备执行如权利要求1至8中任一项所述的卡片显示方法。

10.一种芯片系统，其特征在于，所述芯片系统包括处理器，用于从存储器中调用并运行计算机程序，使得安装有所述芯片系统的终端设备执行如权利要求1至8中任一项所述的卡片显示方法。

11.一种计算机可读存储介质，包括计算机程序，其特征在于，当所述计算机程序在终端设备上运行时，使得所述终端设备执行如权利要求1至8中任一项所述的卡片显示方法。