CN116048312A - 导航点过渡动画显示方法和电子设备 - Google Patents

Abstract

本申请公开了一种导航点过渡动画显示方法和电子设备，涉及终端领域，用于在页面切换过程中显示导航点之间的过渡动画。导航点过渡动画显示方法包括：在显示屏上显示第一页面、第一导航点和第二导航点，第一导航点指示正在显示第一页面，第二导航点用于指示显示第二页面；响应于在显示屏上的滑动操作，显示从第一页面向第二页面切换，并显示从第一导航点至第二导航点的过渡动画。

Description

导航点过渡动画显示方法和电子设备

技术领域

本申请涉及终端领域，尤其涉及一种导航点过渡动画显示方法和电子设备。

背景技术

手机、平板等电子设备在显示页面时通常在下方显示对应的导航点，当用户切换页面时，导航点会联动变化，例如，现有技术中通常通过加粗当前页面对应的导航点来进行联动，这种显示方式只能体现页面切换结果，用户体验不好。

发明内容

本申请实施例提供一种导航点过渡动画显示方法和电子设备，用于在页面切换过程中显示导航点之间的过渡动画。

为达到上述目的，本申请的实施例采用如下技术方案：

第一方面，提供了一种导航点过渡动画显示方法，应用于包括显示屏的电子设备，该方法包括：在显示屏上显示第一页面、第一导航点和第二导航点，第一导航点指示正在显示第一页面，第二导航点用于指示显示第二页面；响应于在显示屏上的滑动操作，显示从第一页面向第二页面切换，并显示从第一导航点至第二导航点的过渡动画；其中，过渡动画包括第一滑动端点、第二滑动端点以及位于第一滑动端点与第二滑动端点之间的连接区域，显示从第一导航点至第二导航点的过渡动画，包括：获取从第一页面向第二页面切换的滑动距离；根据滑动距离和页面宽度确定滑动比例；根据滑动比例、第一导航点的坐标以及第二导航点的坐标确定第一滑动端点的坐标和第二滑动端点的坐标；第一滑动端点的起始坐标和第二滑动端点的起始坐标为第一导航点的坐标；绘制第一滑动端点、第二滑动端点以及连接区域。

本申请实施例提供的导航点过渡动画显示方法，在页面切换过程中显示导航点之间的过渡动画，呈现出导航点平滑拉伸效果，且拉伸方向与手指滑动方向相同，从而提升用户的操作体验。

在一种可能的实施方式中，根据滑动比例、第一导航点的坐标以及第二导航点的坐标确定第一滑动端点的坐标和第二滑动端点的坐标，包括：当检测到手指的滑动操作并且未抬起时，确定第一滑动端点的坐标等于第一导航点的坐标，以及，控制第二滑动端点的坐标使得第二滑动端点和第一滑动端点之间距离随着滑动比例变化；当检测到手指抬起时，如果滑动比例小于阈值，则控制第二滑动端点向第一导航点滑动；当检测到手指抬起时，如果滑动比例大于或等于阈值，则控制第一滑动端点和第二滑动端点向第二导航点滑动。该实施方式使得导航点呈现出平滑拉伸效果。

在一种可能的实施方式中，在第一滑动端点和第二滑动端点向第二导航点滑动过程中，还包括：在第二滑动端点的坐标与第二导航点的坐标相同之前，控制第一滑动端点和第二滑动端点采用相同速度向第二导航点滑动；当第二滑动端点的坐标与第二导航点的坐标相同时，控制第一滑动端点加速向第二导航点滑动，实现快速切换导航点效果。

在一种可能的实施方式中，第二滑动端点和第一滑动端点之间距离为滑动比例的单调递增函数。也就是说，随着手指滑动距离越来越大，滑动比例也越来越大，第二滑动端点和第一滑动端点之间距离也越来越大，由于第一滑动端点保持不动，即第二滑动端点逐渐远离第一导航点，并逐渐接近第二导航点。

在一种可能的实施方式中，第一滑动端点、第二滑动端点以及连接区域的填充颜色由分层参数来定义。第一滑动端点、第二滑动端点和连接区域填充的颜色可以根据不同的主题来定制，通过分层参数可以实现同一标识在不同主题下自动对应不同的填充颜色，降低编程复杂度。

第二方面，提供了一种电子设备，包括显示屏和处理器，处理器用于执行如第一方面及其任一实施方式所述的方法，以在显示屏上显示导航点过渡动画。

第三方面，提供了一种计算机可读存储介质，包括指令，当指令在电子设备上运行时，使得电子设备执行如第一方面及其任一实施方式所述的方法。

第四方面，提供了一种包含指令的计算机程序产品，当指令在电子设备上运行时，使得该电子设备执行如第一方面及其任一实施方式所述的方法。

第五方面，提供了一种芯片系统，该芯片系统包括处理器，用于支持电子设备实现上述第一方面中所涉及的功能。在一种可能的设计中，该装置还包括接口电路，接口电路可用于从其它装置(例如存储器)接收信号，或者，向其它装置(例如通信接口)发送信号。该芯片系统可以包括芯片，还可以包括其他分立器件。

第二方面至第五方面的技术效果参照第一方面及其任一实施方式的技术效果，在此不再重复。

附图说明

图1为本申请实施例提供的一种贝塞尔曲线的示意图；

图2为本申请实施例提供的一种电子设备的结构示意图；

图3为本申请实施例提供的一种处理器运行软件架构的示意图；

图4为本申请实施例提供的一种导航点过渡动画显示方法的流程示意图；

图5为本申请实施例提供的一种导航点过渡动画显示方法的效果示意图；

图6为本申请实施例提供的另一种导航点过渡动画显示方法的流程示意图；

图7为本申请实施例提供的又一种导航点过渡动画显示方法的流程示意图；

图8为本申请实施例提供的一种绘制第一滑动端点、第二滑动端点以及位于第一滑动端点与第二滑动端点之间的连接区域的示意图；

图9为本申请实施例提供的一种芯片系统的结构示意图。

具体实施方式

首先对本申请涉及的一些概念进行描述。

本申请实施例涉及的术语“第一”、“第二”等仅用于区分同一类型特征的目的，不能理解为用于指示相对重要性、数量、顺序等。

本申请实施例涉及的术语“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其他实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。

本申请实施例涉及的术语“耦合”、“连接”应做广义理解，例如，可以指物理上的直接连接，也可以指通过电子器件实现的间接连接，例如通过电阻、电感、电容或其他电子器件实现的连接。

首先对本申请涉及的概念进行描述。

贝塞尔曲线是计算机图形图像造型的基本工具，是图形造型运用得最多的基本线条之一。参照图1中的A所示，二阶贝塞尔曲线是由一个控制点控制的曲线，它通过控制曲线上的三个点起始点START、终止点END和终止控制点EC来创造、编辑图形。移动终止控制点可以控制终止点处曲线的曲率。可以理解的是，也可以将控制点用于控制起始点处的曲线的曲率，本申请并不限定。参照图1中的B所示，三阶贝塞尔曲线是由两个控制点控制的曲线，它通过控制曲线上的四个点起始点START、终止点END、起始控制点SC和终止控制点EC来创造、编辑图形。移动起始控制点可以控制起始点处曲线的曲率，移动终止控制点可以控制终止点处曲线的曲率。本申请以二阶贝塞尔曲线为例进行说明，但并不意在限定于此。

本申请实施例提供了一种电子设备，该电子设备可以是一种具有显示功能的设备，电子设备可以是移动的，也可以是固定的。电子设备可以部署在陆地上(例如室内或室外、手持或车载等)，也可以部署在水面上(例如轮船等)，还可以部署在空中(例如飞机、气球和卫星等)。该电子设备可以称为用户设备(user equipment，UE)、接入终端、终端单元、用户单元(subscriber unit)、终端站、移动站(mobile station，MS)、移动台、终端代理或终端装置等。例如，该电子设备可以是手机、平板电脑、笔记本电脑、智能手环、智能手表、耳机、智能音箱、虚拟现实(virtual reality，VR)设备、增强现实(augmented reality，AR)设备、工业控制(industrial control)中的终端、无人驾驶(self driving)中的终端、远程医疗(remote medical)中的终端、智能电网(smart grid)中的终端、运输安全(transportation safety)中的终端、智慧城市(smart city)中的终端、智慧家庭(smarthome)中的终端等。本申请实施例对电子设备的具体类型和结构等不作限定。下面对电子设备的一种可能结构进行说明。

以电子设备为手机为例，图2示出了电子设备101的一种可能的结构。该电子设备101可以包括处理器210、外部存储器接口220、内部存储器221、通用串行总线(universalserial bus，USB)接口230、电源管理模块240、电池241、无线充电线圈242、天线1、天线2、移动通信模块250、无线通信模块260、音频模块270、扬声器270A、受话器270B、麦克风270C、耳机接口270D、传感器模块280、按键290、马达291、指示器292、摄像头293、显示屏294以及用户标识模块(subscriber identification module，SIM)卡接口295等。

其中，传感器模块280可以包括压力传感器、陀螺仪传感器、气压传感器、磁传感器、加速度传感器、距离传感器、接近光传感器、指纹传感器、温度传感器、触摸传感器、环境光传感器、骨传导传感器等。

可以理解的是，本发明实施例示意的结构并不构成对电子设备101的具体限定。在本申请另一些实施例中，电子设备101可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。

处理器210可以包括一个或多个处理单元，例如：处理器210可以为现场可编程门阵列(field programmable gate array，FPGA)、专用集成电路(application specificintegrated circuit，ASIC)、片上系统(system on chip，SoC)、中央处理单元(centralprocessing unit，CPU)、应用处理器(application processor，AP)、网络处理器(networkprocessor，NP)、数字信号处理器(digital signal processor，DSP)、微控制单元(microcontroller unit，MCU)、可编程逻辑器件(programmable logic device，PLD)、调制解调处理器、图形处理器(graphics processing unit，GPU)、图像信号处理器(image signalprocessor，ISP)、控制器、视频编解码器、基带处理器以及神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。例如，处理器210可以是应用处理器AP。或者，上述处理器210可以集成在片上系统(system on chip，SoC)中。或者，上述处理器210可以集成在集成电路(integrated circuit，IC)芯片中。该处理器210可以包括IC芯片中的模拟前端(analogfront end，AFE)和微控制单元(micro-controller unit，MCU)。

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

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

在一些实施例中，处理器210可以包括一个或多个接口。接口可以包括集成电路(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)接口和/或USB接口等。

可以理解的是，本发明实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备101的结构限定。在本申请另一些实施例中，电子设备101也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。

电源管理模块240用于从充电器接收充电输入。其中，充电器可以是无线充电器(如电子设备101的无线充电底座或者其他可以为电子设备101无线充电的设备)，也可以是有线充电器。例如，电源管理模块240可以通过USB接口230接收有线充电器的充电输入。电源管理模块240可以通过电子设备的无线充电线圈242接收无线充电输入。

其中，电源管理模块240为电池241充电的同时，还可以为电子设备供电。电源管理模块240接收电池241的输入，为处理器210、内部存储器221、外部存储器接口220、显示屏294、摄像头293和无线通信模块260等供电。电源管理模块240还可以用于监测电池241的电池容量、电池循环次数、电池健康状态(漏电、阻抗)等参数。在其他一些实施例中，电源管理模块240也可以设置于处理器210中。

电子设备101的无线通信功能可以通过天线1、天线2、移动通信模块250、无线通信模块260、调制解调处理器以及基带处理器等实现。

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

移动通信模块250可以提供应用在电子设备101上的包括2G/3G/4G/5G等无线通信的解决方案。无线通信模块260可以提供应用在电子设备101上的包括无线局域网(wireless local area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)、蓝牙(bluetooth，BT)、全球导航卫星系统(global navigation satellite system，GNSS)、调频(frequency modulation，FM)、近距离无线通信技术(near field communication，NFC)、红外技术(infrared，IR)等无线通信的解决方案。在一些实施例中，电子设备101的天线1和移动通信模块250耦合，天线2和无线通信模块260耦合，使得电子设备101可以通过无线通信技术与网络以及其他设备通信。

电子设备101通过GPU、显示屏294以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏294和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器210可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

显示屏294用于显示图像，视频等。显示屏294包括显示面板。在一些实施例中，电子设备101可以包括1个或N个显示屏294，N为大于1的正整数。

电子设备101可以通过ISP、摄像头293、视频编解码器、GPU、显示屏294以及应用处理器等实现拍摄功能。ISP用于处理摄像头293反馈的数据。在一些实施例中，ISP可以设置在摄像头293中。摄像头293用于捕获静态图像或视频。在一些实施例中，电子设备101可以包括1个或N个摄像头293，N为大于1的正整数。

外部存储器接口220可以用于连接外部存储卡，例如微闪迪(micro SanDisk，Micro SD)卡，实现扩展电子设备101的存储能力。外部存储卡通过外部存储器接口220与处理器210通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。

内部存储器221可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器210通过运行存储在内部存储器221的指令，从而执行电子设备101的各种功能应用以及数据处理。此外，内部存储器221可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、通用闪存存储器(universal flashstorage，UFS)等。

本申请实施例涉及的存储器可以是易失性存储器或非易失性存储器，或可包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(read-onlymemory，ROM)、可编程只读存储器(programmable ROM，PROM)、可擦除可编程只读存储器(erasable PROM，EPROM)、电可擦除可编程只读存储器(electrically EPROM，EEPROM)或闪存。易失性存储器可以是随机存取存储器(random access memory，RAM)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(static RAM，SRAM)、动态随机存取存储器(dynamic RAM，DRAM)、同步动态随机存取存储器(synchronous DRAM，SDRAM)、双倍数据速率同步动态随机存取存储器(double data rateSDRAM，DDR SDRAM)、增强型同步动态随机存取存储器(enhanced SDRAM，ESDRAM)、同步连接动态随机存取存储器(synchlink DRAM，SLDRAM)和直接内存总线随机存取存储器(directrambus RAM，DR RAM)。应注意，本文描述的系统和方法的存储器旨在包括但不限于这些和任意其它适合类型的存储器。

电子设备101可以通过音频模块270、扬声器270A、受话器270B、麦克风270C、耳机接口270D以及应用处理器等实现音频功能。例如音乐播放，录音等。

音频模块270用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。在一些实施例中，音频模块270可以设置于处理器210中，或将音频模块270的部分功能模块设置于处理器210中。扬声器270A，也称“喇叭”，用于将音频电信号转换为声音信号。受话器270B，也称“听筒”，用于将音频电信号转换成声音信号。麦克风270C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。电子设备101可以设置至少一个麦克风270C。耳机接口270D用于连接有线耳机。耳机接口270D可以是USB接口230，也可以是3.5mm的开放移动终端平台(open mobile terminal platform，OMTP)标准接口，美国蜂窝电信工业协会(cellular telecommunications industry association of the USA，CTIA)标准接口。

按键290包括开机键、音量键等。按键290可以是机械按键。也可以是触摸式按键。电子设备101可以接收按键输入，产生与电子设备101的用户设置以及功能控制有关的键信号输入。马达291可以产生振动提示。马达291可以用于来电振动提示，也可以用于触摸振动反馈。指示器292可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息、未接来电、通知等。SIM卡接口295用于连接SIM卡。SIM卡可以通过插入SIM卡接口295，或从SIM卡接口295拔出，实现和电子设备101的接触和分离。电子设备101可以支持1个或N个SIM卡接口，N为大于1的正整数。SIM卡接口295可以支持纳SIN(Nano SIM)卡、微SIM(MicroSIM)卡、SIM卡等。在一些实施例中，电子设备101采用嵌入式(embedded SIM，eSIM)卡，eSIM卡可以嵌在电子设备101中，不能和电子设备101分离。

处理器210运行的程序可以基于操作系统，例如安卓(Android)操作

苹果(iOS)操作

鸿蒙(Harmony)操作

视窗(Windows)操作

等。如图3所示，以处理器210运行的程序基于安卓操作

为例，处理器210运行的程序按照功能进行分层，可以包括框架层、用户接口(user interface，UI)套件层和应用层。

框架层用于实现底层的图形绘制和计算功能，包括视图框架和动效框架，其中，视图框架用于实现图形绘制，动效框架用于实现图形的动画效果的计算。

用户接口(user interface，UI)套件(kit)层用于将各种图形、控件封装成类，类中的函数通过调用框架层中的框架实现图形、控件的各个功能，例如，视图翻页(ViewPager)类中的页面切换响应函数用于当用户切换页面时，向导航点控件类的导航点绘制函数输出页面参数，实现页面与导航点之间的联动。各个类的函数可供应用层中的应用程序调用，从而丰富应用程序的功能。

如前文所述的，手机、平板等电子设备在显示页面时通常在下方显示对应的导航点，当用户切换页面时，导航点会联动变化，例如，现有技术中通常通过加粗当前页面对应的导航点来进行联动，这种显示方式只能体现页面切换结果，无法体现页面切换过程，用户体验不好。因此本申请实施例提供了一种导航点过渡动画显示方法，用于在页面切换过程中显示导航点之间的过渡动画，从而帮助用户识别页面切换方向。

如图4所示，本申请实施例提供的导航点过渡动画显示方法包括步骤S101-S102：

S101、在显示屏上显示第一页面、第一导航点和第二导航点。

第一导航点指示当前显示第一页面，第二导航点指示显示第二页面。第一导航点和第二导航点的顺序与第一页面和第二页面的顺序相同，例如，假设第一导航点位于第二导航点左侧，则第一页面也位于第二页面左侧，假设第一导航点位于第二导航点右侧，则第一页面也位于第二页面右侧。

本申请不限定只有两个页面和两个对应的导航点，对于任意两个相邻页面之间的切换均适用。本申请也不限定页面切换方向，例如，可以从左向右切换或者从右向左切换，或者，可以从上向下切换或者从下向上切换。本申请实施例不仅可以应用于竖屏显示页面和导航点的场景，还可以应用于横屏显示页面和导航点的场景，本申请以竖屏显示页面和导航点的场景为例，但并不意在限定于此。

示例性的，如图5中A所示，显示屏上显示第一页面P1、第一导航点N1和第二导航点N2，其中，第一导航点N1指示当前显示第一页面P1，第二导航点N2指示显示第二页面(见图5中B所示的P2)，即第一页面P1与第一导航点N1对应，第二页面(见图5中B所示的P2)与第二导航点N2对应。由于显示屏当前在显示第一页面P1，所以第一导航点N1加粗显示。

S102、响应于手指在显示屏上的滑动操作，显示从第一页面向第二页面切换，并显示从第一导航点至第二导航点的过渡动画。

视图翻页类中的页面切换响应函数响应于手指在显示屏上的滑动操作，显示从第一页面向第二页面切换，并向导航点控件类的导航点绘制函数输出页面切换的参数，例如页面宽度、页面切换的滑动距离等，以便导航点控件类的导航点绘制函数显示(例如调用重写的onPageScrolled函数)从第一导航点至第二导航点的过渡动画。

示例性的，如图5中B和C所示，手指在显示屏上从右向左滑动，相应地，显示屏显示从第一导航点N1至第二导航点N2的过渡动画。

如图6所示，显示从第一导航点至第二导航点的过渡动画包括步骤S1021-S1024：

S1021、获取从第一页面向第二页面切换的滑动距离。

从第一页面向第二页面切换的滑动距离指第二页面在显示屏中显示的宽度。示例性的，如图5中B所示，从第一页面P1向第二页面P2切换的滑动距离为d。

S1022、根据滑动距离和页面宽度确定滑动比例K。

示例性的，如图5中B所示，页面宽度为D，则滑动比例为滑动距离d与页面宽度D之比，即K＝d/D。

S1023、根据滑动比例、第一导航点的坐标以及第二导航点的坐标更新过渡动画的第一滑动端点的坐标和第二滑动端点的坐标。

第一滑动端点的起始坐标和第二滑动端点的起始坐标为第一导航点的坐标，第一滑动端点的终止坐标和第二滑动端点的终止坐标为第二导航点的坐标。第二滑动端点先于第一滑动端点滑动，并且第二滑动端点和第一滑动端点均沿第一导航点与第二导航点之间的直线滑动。也就是说，以导航点沿x轴分布为例，假设第一导航点和第二导航点的纵坐标均为y，则第二滑动端点和第一滑动端点的纵坐标也均为y，因此，如无特别说明，本申请中各示例中的对于滑动端点的坐标的计算均针对x坐标。

以第一导航点、第二导航点、第一滑动端点和第二滑动端点为圆形为例，第一导航点的坐标、第二导航点的坐标、第一滑动端点的坐标和第二滑动端点的坐标指圆心坐标。

如图7所示，以第一导航点和第二导航点均为圆为例，步骤S1023包括步骤S10231-S10233：

S10231、当检测到手指的滑动操作并且未抬起时，确定第一滑动端点的坐标等于第一导航点的坐标，以及，控制第二滑动端点的坐标使得第二滑动端点和第一滑动端点之间距离d1随着滑动比例K变化。

也就是说，在检测到手指滑动并且未抬起之前，第一滑动端点的坐标保持不变，始终等于第一导航点的坐标。

第二滑动端点和第一滑动端点之间距离d1为滑动比例K的单调递增函数，即d1＝f(K)，f()为单调递增函数。也就是说，随着手指滑动距离越来越大，滑动比例K也越来越大，第二滑动端点和第一滑动端点之间距离d1也越来越大，由于第一滑动端点保持不动，即第二滑动端点逐渐远离第一导航点，并逐渐接近第二导航点。假设第二导航点的坐标大于第一导航点的坐标，并且第一滑动端点和第一导航点的坐标为x，第一滑动端点和第二滑动端点的半径为R，则第二滑动端点的横坐标为x+f(K)*d2+2R，其中，d2为第二导航点和第一导航点之间距离。

S10232、当检测到手指抬起时，如果滑动比例K小于阈值，则控制第二滑动端点向第一导航点滑动。

也就是说，当检测到手指抬起时，如果滑动比例K小于阈值，则减小第二滑动端点和第一滑动端点之间距离d1，直至第二滑动端点的坐标与第一导航点的坐标相同，实现回弹效果。

该阈值由翻页方式和是否执行弹性动画决定，示例性的，对于水平翻页(沿x轴翻页)且执行弹性动画来说该阈值为0.5，对于水平翻页(沿x轴翻页)且不执行弹性动画来说该阈值为0.4，对于垂直翻页(沿y轴翻页)且执行弹性动画来说该阈值为0.6，对于垂直翻页(沿y轴翻页)且不执行弹性动画来说该阈值为0.4。

S10233、当检测到手指抬起时，如果滑动比例K大于或等于阈值，则控制第一滑动端点和第二滑动端点向第二导航点滑动。

如图5中C所示，也就是说，当检测到手指抬起时，如果滑动比例K大于或等于阈值，则减小第二滑动端点S2与第二导航点N2之间的距离，直至第二滑动端点S2的坐标与第二导航点N2的坐标相同，并且，减小第一滑动端点S1与第二导航点N2之间的距离，直至第一滑动端点S1的坐标与第二导航点N2的坐标相同，最终呈现如图5中D所示的导航点切换结果。

第一滑动端点和第二滑动端点可以采用相同或不同速度进行滑动，例如，在第二滑动端点的坐标与第二导航点的坐标相同之前，控制第一滑动端点和第二滑动端点采用相同速度向第二导航点滑动；当第二滑动端点的坐标与第二导航点的坐标相同时，控制第一滑动端点加速向第二导航点滑动，实现快速切换导航点效果。

S1024、每次更新第一滑动端点和第二滑动端点的坐标后，绘制第一滑动端点、第二滑动端点，以及，绘制位于第一滑动端点与第二滑动端点之间的连接区域。

以第一滑动端点和第二滑动端点为圆形为例，第一滑动端点和第二滑动端点的半径可以相同或不同，第一滑动端点和第二滑动端点的半径可以大于、小于或者等于第一导航点和第二导航点的半径。示例性的，本申请实施例中，第一滑动端点和第二滑动端点的半径与第一导航点和第二导航点的半径相同。

对于绘制第一滑动端点和第二滑动端点来说，如图8所示，可以根据第一滑动端点S1的圆心坐标以及半径绘制第一滑动端点S1，根据第二滑动端点S2的圆心坐标以及半径绘制第二滑动端点S2。

对于绘制第一滑动端点与第二滑动端点之间的连接区域来说，连接第一滑动端点与第二滑动端点之间的区域的轮廓线可以通过贝塞尔曲线和直线来绘制。如图8所示，以二阶贝塞尔曲线为例，假设第一滑动端点S1的圆心坐标为(X1，Y)，第二滑动端点S2的圆心坐标为(X2，Y)，第一滑动端点S1或第二滑动端点S2的半径为R。该区域的上轮廓线采用贝塞尔曲线绘制，起始点START1的坐标为(x＝X2，y＝Y-R)，控制点EC1的坐标为(x＝(X1+X2)/2，y＝Y-R/2)，终止点END1的坐标为(x＝X1，y＝Y-R)。该区域的下轮廓线采用贝塞尔曲线绘制，起始点START2的坐标为(x＝X1，y＝Y+R)，控制点EC2的坐标为(x＝(X1+X2)/2，y＝Y+R/2)，终止点END2的坐标为(x＝X2，y＝Y+R)。该区域的右轮廓线采用从终止点END1至起始点START2的直线绘制。该区域的左轮廓线采用从终止点END2至起始点START1的直线绘制。

将第一滑动端点S1、第二滑动端点S2和连接区域填充相同颜色，并取并集，即可实现显示从第一导航点N1至第二导航点N2的过渡动画。

第一滑动端点、第二滑动端点和连接区域填充的颜色可以根据不同的主题来定制，具体的可以通过图3所示的分层参数来定义，分层参数指相同控件(采用相同标识)的不同属性，通过分层参数可以实现同一标识在不同主题下自动对应不同的填充颜色，降低编程复杂度。例如，对于白色主题来说：第一滑动端点、第二滑动端点和连接区域可以采用高亮色0x256FFF，未被选中的导航点可以采用0xCCCCCC。对于黑色主题来说，第一滑动端点、第二滑动端点和连接区域可以采用高亮色0x006CDE，未被选中的导航点可以采用0x4D4D4D。对于透明主题来说，第一滑动端点、第二滑动端点和连接区域可以采用高亮色0xFFFFFF，未被选中的导航点可以采用0x4DFFFFFF(30％不透明)。对于反色机制来说，第一滑动端点、第二滑动端点和连接区域可以采用高亮色0x000000，未被选中的导航点可以采用0x4D000000(30％不透明)。

本申请实施例提供的导航点过渡动画显示方法，在页面切换过程中显示导航点之间的过渡动画，呈现出导航点平滑拉伸效果，且拉伸方向与手指滑动方向相同，从而提升用户的操作体验。

如图9所示，本申请实施例还提供一种芯片系统。该芯片系统60包括至少一个处理器601和至少一个接口电路602。至少一个处理器601和至少一个接口电路602可通过线路互联。处理器601用于支持电子设备实现上述方法实施例中的各个步骤，例如图4、图6、图7所示的方法，至少一个接口电路602可用于从其它装置(例如存储器)接收信号，或者，向其它装置(例如通信接口)发送信号。该芯片系统可以包括芯片，还可以包括其他分立器件。

本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质包括指令，当指令在上述电子设备上运行时，使得该电子设备执行上述方法实施例中的各个步骤，例如执行图4、图6、图7所示的方法。

本申请实施例还提供一种包括指令的计算机程序产品，当指令在上述电子设备上运行时，使得该电子设备执行上述方法实施例中的各个步骤，例如执行图4、图6、图7所示的方法。

关于芯片系统、计算机可读存储介质、计算机程序产品的技术效果参照前面方法实施例的技术效果。

应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的模块及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、设备和方法，可以通过其它的方式实现。例如，以上所描述的设备实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个设备，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，设备或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个设备，或者也可以分布到多个设备上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能模块可以集成在一个设备中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个设备中。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件程序实现时，可以全部或部分地以计算机程序产品的形式来实现。该计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或者数据中心通过有线(例如同轴电缆、光纤、数字用户线(Digital Subscriber Line，DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可以用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质(例如，软盘、硬盘、磁带)，光介质(例如，DVD)、或者半导体介质(例如固态硬盘(Solid State Disk，SSD))等。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (7)

1.一种导航点过渡动画显示方法，其特征在于，应用于包括显示屏的电子设备，所述方法包括：

在所述显示屏上显示第一页面、第一导航点和第二导航点，所述第一导航点指示正在显示所述第一页面，所述第二导航点用于指示显示第二页面；

响应于在所述显示屏上的滑动操作，显示从所述第一页面向所述第二页面切换，并显示从所述第一导航点至所述第二导航点的过渡动画；其中，所述过渡动画包括第一滑动端点、第二滑动端点以及位于所述第一滑动端点与所述第二滑动端点之间的连接区域，所述显示从所述第一导航点至所述第二导航点的过渡动画，包括：

获取从所述第一页面向所述第二页面切换的滑动距离；

根据所述滑动距离和页面宽度确定滑动比例；

根据所述滑动比例、所述第一导航点的坐标以及所述第二导航点的坐标确定所述第一滑动端点的坐标和所述第二滑动端点的坐标；所述第一滑动端点的起始坐标和第二滑动端点的起始坐标为所述第一导航点的坐标；

绘制所述第一滑动端点、所述第二滑动端点以及所述连接区域。

2.根据权利要求1所述的方法，其特征在于，所述根据所述滑动比例、所述第一导航点的坐标以及所述第二导航点的坐标确定所述第一滑动端点的坐标和所述第二滑动端点的坐标，包括：

当检测到手指的滑动操作并且未抬起时，确定所述第一滑动端点的坐标等于所述第一导航点的坐标，以及，控制所述第二滑动端点的坐标使得所述第二滑动端点和所述第一滑动端点之间距离随着所述滑动比例变化；

当检测到手指抬起时，如果所述滑动比例小于阈值，则控制所述第二滑动端点向所述第一导航点滑动；

当检测到手指抬起时，如果所述滑动比例大于或等于所述阈值，则控制所述第一滑动端点和所述第二滑动端点向所述第二导航点滑动。

3.根据权利要求2所述的方法，其特征在于，在所述第一滑动端点和所述第二滑动端点向所述第二导航点滑动过程中，还包括：

在所述第二滑动端点的坐标与所述第二导航点的坐标相同之前，控制所述第一滑动端点和所述第二滑动端点采用相同速度向所述第二导航点滑动；

当所述第二滑动端点的坐标与所述第二导航点的坐标相同时，控制所述第一滑动端点加速向所述第二导航点滑动。

4.根据权利要求2或3所述的方法，其特征在于，所述第二滑动端点和所述第一滑动端点之间距离为所述滑动比例的单调递增函数。

5.根据权利要求1-4中任一项所述的方法，其特征在于，所述第一滑动端点、所述第二滑动端点以及所述连接区域的填充颜色由分层参数来定义。

6.一种电子设备，其特征在于，包括显示屏和处理器，所述处理器用于执行如权利要求1-5任一项所述的方法，以在所述显示屏上显示导航点过渡动画。

7.一种计算机可读存储介质，其特征在于，包括指令，当所述指令在电子设备上执行时，使得所述电子设备执行如权利要求1-5任一项所述的方法。

Images