图形界面显示方法、电子设备、介质以及程序产品技术

本公开的实施例提供了一种图形界面显示方法、电子设备、存储介质以及程序产品。在该方法中，电子设备在屏幕上显示M个用户界面UI元素。电子设备检测到作用于第一UI元素的操作。响应于该操作，电子设备使屏幕上的N个UI元素中的每个UI元素产生受到“吸引力”或“排斥力”的动画效果。在产生动画效果时，电子设备确定第二UI元素将在第一方向上移动的目标距离。电子设备使第二UI元素从起始位置沿第一方向以目标距离进行第一移动。在第一移动之后，电子设备使第二UI元素沿与第一方向相反的第二方向进行第二移动，以复位到起始位置。如此本公开的实施例展现出符合自然规律的动态效果，与用户生活体验更加一致，加强了电子设备的生命力和人性化程度。力和人性化程度。力和人性化程度。

【技术实现步骤摘要】
图形界面显示方法、电子设备、介质以及程序产品


[0001]本公开总体上涉及信息
，并且更特别地涉及一种图形界面显示方法、电子设备、计算机可读存储介质、以及计算机程序产品。

技术介绍

[0002]随着信息技术的发展，越来越多的电子设备被配备有各种类型的屏幕。因此，电子设备的屏幕上的用户界面(user interface，UI)或图形界面(graphic interface，GUI)的整体显示效果及风格成为影响用户体验的重要因素。在UI框架的构建中，动画效果已经成为不可分割的一部分。随着智能电话等电子设备的性能提高，电子设备的UI动画效果也随之发展。高刷新率、高渲染度、高复杂度的动画效果逐渐出现。然而，电子设备的屏幕上的UI动画效果还存在进一步改进的空间，以提供更良好的用户体验。

技术实现思路

[0003]本公开的实施例涉及一种用于实现UI元素之间存在“吸引力”或“排斥力”的动画效果的技术方案，并且具体提供了一种图形界面显示方法、电子设备、计算机可读存储介质、以及计算机程序产品。
[0004]在本公开的第一方面，提供了一种图形界面显示方法。在该方法中，电子设备在屏幕上显示M个用户界面UI元素，M为大于1的正整数。电子设备检测到作用于M个UI元素中的第一UI元素的操作。响应于对第一UI元素的操作，电子设备使屏幕上的N个UI元素中的每个UI元素产生动画效果，N为1与M
‑
1之间的正整数。在产生动画效果时，电子设备确定N个UI元素中的第二UI元素将在第一方向上移动的目标距离，第一方向是从第二UI元素指向第一UI元素的方向或是从第一UI元素指向第二UI元素的方向。电子设备使第二UI元素从起始位置沿第一方向以目标距离进行第一移动。电子设备在第一移动之后，使第二UI元素沿与第一方向相反的第二方向进行第二移动，以复位到起始位置。以此方式，本公开的实施例实现了UI元素之间具有“引力”的动画效果，展现出符合自然规律的动态效果，与用户生活体验更加一致，加强了电子设备的生命力和人性化程度。在一些实施例中，取决于系统设置或用户设置，或者取决于被操作的第一UI元素的操作持续的时间长度，第二UI元素可以进行多次第一位移和第二位移。也就是说，第二UI元素可以按照循环的方式在第一方向上执行第一移动，在第二方向上执行第二移动，然后再在第一方向上执行第一移动，再在第二方向上执行第二移动，如此循环往复。在一些实施例中，第二UI元素在每次循环中在第一方向上的第一移动中的目标距离可以保持不变或逐渐减小。
[0005]在一些实现方式中，为了确定目标距离，电子设备可以确定第二UI元素的尺寸，确定第二UI元素与第一UI元素之间的距离，以及基于尺寸和距离来确定目标距离。以此方式，UI元素受到其他UI元素的“吸引力”或“排斥力”作用的大小可以取决于UI元素本身的大小和两个UI元素之间的距离，从而符合于自然界中的引力大小规律，由此进一步提升用户体验。
[0006]在一些实现方式中，为了基于尺寸和距离来确定目标距离，电子设备可以使目标距离随着尺寸增大而增大并且随着距离增大而减小。以此方式，UI元素本身的大小越大，两个UI元素之间的距离越小，UI元素受到其他UI元素的“吸引力”或“排斥力”作用的大小也就越大，从而符合于自然界中的引力大小规律，由此进一步提升用户体验。
[0007]在一些实现方式中，为了确定第二UI元素与第一UI元素之间的距离，电子设备可以确定第一UI元素的第一中心点，确定第二UI元素的第二中心点，以及确定第一中心点与第二中心点之间的直线距离，作为第二UI元素与第一UI元素之间的距离。以此方式，两个UI元素之间的距离可以按照直接明了的方式确定为两个UI元素中心点之间的距离，从而提高电子设备确定UI元素之间距离的确定方式的一致性，简化电子设备的计算过程。
[0008]在一些实现方式中，为了确定第二UI元素与第一UI元素之间的距离，电子设备可以确定第一UI元素的第一中心点，确定以第一中心点为圆心的具有各自半径的多个圆，确定第二UI元素与多个圆中的至少一个圆相交，以及将至少一个圆中半径最小的圆的半径确定为第二UI元素与第一UI元素之间的距离。以此方式，电子设备可以更简单和方便地确定UI元素之间的距离，并且使得UI元素之间的距离具有更高的一致性，从而简化基于距离的后续处理和计算过程。
[0009]在一些实现方式中，为了确定第二UI元素与第一UI元素之间的距离，电子设备可以确定第一UI元素与第二UI元素之间的横向间距，确定第一UI元素与第二UI元素之间的纵向间距，以及基于横向间距和纵向间距中的至少一者和第一方向来确定第二UI元素与第一UI元素之间的距离。以此方式，电子设备可以基于UI元素之间的间距来确定UI元素之间的距离，从而提高距离确定方式的灵活性和合理性，特别是在UI元素之间的间距基本保持一致的场景中。
[0010]在一些实现方式中，电子设备还可以基于第一UI元素的尺寸来确定第一UI元素的影响区域，以及将M个UI元素中在影响区域内的UI元素确定为N个UI元素。以此方式，电子设备可以将UI元素的“引力”影响范围设置为适当的大小，从而可以在保持“引力”动画效果符合自然规律的同时，减少电子设备在实现“引力”动画效果时的计算量，节省计算资源。
[0011]在一些实现方式中，电子设备还可以将M个UI元素中除了第一UI元素以外的M
‑
1个UI元素确定为N个UI元素。以此方式，电子设备可以无需设置UI元素的“引力”影响范围，从而可以在保持“引力”动画效果符合自然规律的同时，简化“引力”动画效果的相关设置。
[0012]在一些实现方式中，第一移动持续的第一时长、第二移动持续的第二时长、以及第一移动和第二移动持续的总时长中的至少一个可以是可配置的。以此方式，电子设备的用户可以按照偏好来设置“引力”动画效果的时间长短，从而进一步改进用户体验。
[0013]在一些实现方式中，第二UI元素在第一移动和第二移动中的至少一者期间的移动的动画效果可以基于位移随时间变化的预定义曲线来确定。以此方式，电子设备可以基于位移随时间变化的预定义曲线来方便地控制UI元素的移动，使得“引力”动画效果更符合用户的使用习惯，从而进一步改进用户体验。
[0014]在一些实现方式中，预定义曲线可以为贝塞尔曲线或弹性力曲线。以此方式，电子设备可以基于贝塞尔曲线或弹性力曲线来方便地控制UI元素的移动，使得“引力”动画效果更加符合用户在生活中对于“吸引力”和“排斥力”的习惯认知，从而进一步改进用户体验。
[0015]在一些实现方式中，第一移动和第二移动中的至少一个可以包括变加速直线运
动。以此方式，电子设备可以基于自然界的物体在引力作用下的加速运动规律，来实现UI元素的第一移动和第二移动，使得“引力”动画效果更加符合自然规律和用户在生活中的习惯认知，从而进一步改进用户体验。
[0016]在一些实现方式中，为了使第二UI元素进行第一移动，电子设备可以确定对第一UI元素的操作被执行的第一时间点，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种图形界面显示方法，包括：在电子设备的屏幕上显示M个用户界面UI元素，M为大于1的正整数；检测到作用于所述M个UI元素中的第一UI元素的操作；响应于所述操作，使所述屏幕上的N个UI元素中的每个UI元素产生移动，N为1与M
‑
1之间的正整数，其中产生所述移动包括：确定所述N个UI元素中的第二UI元素将在第一方向上移动的目标距离，所述第一方向是从所述第二UI元素指向所述第一UI元素的方向或是从所述第一UI元素指向所述第二UI元素的方向；使所述第二UI元素从起始位置沿所述第一方向以所述目标距离进行第一移动；以及在所述第一移动之后，使所述第二UI元素沿与所述第一方向相反的第二方向进行第二移动，以复位到所述起始位置；其中确定所述目标距离包括：确定所述第二UI元素的尺寸；确定所述第二UI元素与所述第一UI元素之间的距离；以及基于所述尺寸和所述距离来确定所述目标距离。2.根据权利要求1所述的方法，其中基于所述尺寸和所述距离来确定所述目标距离包括：使所述目标距离随着所述尺寸增大而增大并且随着所述距离增大而减小。3.根据权利要求1所述的方法，其中确定所述距离包括：确定所述第一UI元素的第一中心点；确定所述第二UI元素的第二中心点；以及确定所述第一中心点与所述第二中心点之间的直线距离，作为所述距离。4.根据权利要求1所述的方法，其中确定所述距离包括：确定所述第一UI元素的第一中心点；确定以所述第一中心点为圆心的具有各自半径的多个圆；确定所述第二UI元素与所述多个圆中的至少一个圆相交；以及将所述至少一个圆中半径最小的圆的半径确定为所述距离。5.根据权利要求1所述的方法，其中确定所述距离包括：确定所述第...

【专利技术属性】
技术研发人员：卞超，
申请(专利权)人：华为技术有限公司，
类型：发明
国别省市：