CN116048361A - 交互方法、可读存储介质和电子设备 - Google Patents

Abstract

本发明涉及终端技术领域，公开了一种交互方法、可读存储介质和电子设备。该方法包括：电子设备显示多个UI元素，电子设备在检测到用户对多个UI元素中的第一UI元素的预设操作时，控制多个UI元素中的至少部分UI元素在预设运动时间内处于运动状态，其中运动状态包括UI元素以各UI元素的初始位置为中心振动，并且各UI元素的振幅随各UI元素的初始位置与预设操作对应的动画中心之间的距离的增加而减小、随运动时间增加而减小的振幅振动。从而各UI元素可以呈现水波涟漪效果，显示出了UI元素间的联动，有利于提升用户体验。

Description

交互方法、可读存储介质和电子设备

技术领域

本发明涉及终端技术领域，具体涉及一种交互方法、可读存储介质和电子设备。

背景技术

用户界面(User Interface，UI)是用户和电子设备进行交互的重要窗口，尤其是图形界面(Graphical User Interface，GUI)。图形界面中通常显示有多个UI元素，例如图标，用户可通过对UI元素的触发操作来实现与电子设备的交互。电子设备通常为用户对UI元素的触发操作配置了动画效果，但传统UI元素的动画效果多为简单的动画组合，动画效果单一，用户体验较差。

发明内容

本发明实施例提供了一种交互方法，可以使UI中的UI元素呈现水波涟漪的动画效果，有利于提高用户体验。

第一方面，本申请实施例提供了一种交互方法，应用于电子设备，该方法包括：电子设备显示有第一界面，第一界面包括多个界面元素；检测到用户对多个界面元素中的第一界面元素的预设操作，其中第一界面元素具有第一位置；响应于预设操作，控制多个界面元素中的至少部分界面元素处于运动状态，其中运动状态包括：界面元素以各界面元素的初始位置为中心，以对应各界面元素的振幅沿各界面元素与第一位置确定的直线方向振动，其中，各界面元素的振幅基于各界面元素的初始位置与第一位置之间的距离确定，并且各界面元素的振幅随各界面元素的初始位置与第一位置之间的距离的增加而减小、随运动时间增加而减小。

在本申请实施例中，电子设备在第一界面中(例如图形界面)包括多个界面元素(例如UI元素)时，若检测到用户对第一界面元素的预设操作(例如拖动第一界面元素并释放的操作)时，可以使各界面元素以各界面元素的初始位置为中心，以对应振幅沿各界面元素与第一位置确定的直线方向振动(即以第一位置为圆心的径向方向)振动，并且各界面元素的振幅随各随各界面元素的初始位置与第一位置之间的距离的增加而减小、随运动时间增加而减小(也即是在同一圆周上的界面元素具有相同的振幅，且振幅随运动时间减小)，呈现出水波涟漪的动画效果，显示出各个界面元素之间的联动关系，进而实现各个界面元素的联动动画，提高用户体验。

在上述第一方面的一种可能实现中，上述运动状态还包括：各界面元素的尺寸在振动过程中随各界面元素与对应的初始位置间的距离的变化而变化。

在本申请实施例中，各界面元素在振动过程中，界面元素的大小也随着各界面元素与对应的初始位置间的距离的变化而变化，更贴近于水波涟漪的真实效果，可以使动画效果更自然，进一步提高用户体验。

在上述第一方面的一种可能实现中，上述各界面元素的尺寸在振动过程中随各界面元素与对应的初始位置间的距离的变化而变化，包括：在各界面元素的位置与第一位置的距离小于各界面元素的初始位置与第一位置的距离的情况下，各界面元素的尺寸随各界面元素与对应的初始位置间的距离的增加而缩小；在各界面元素的位置与第一位置的距离大于各界面元素的初始位置的情况下，各界面元素的尺寸随各界面元素与对应的初始位置间的距离的增加而增加；在各界面元素的位置与第一位置的距离等于各界面元素的初始位置的情况下，各界面元素的尺寸为各界面元素的初始尺寸。

在本申请实施例中，在各界面元素的位置与第一位置的距离小于各界面元素的初始位置与第一位置的距离的情况下，即是各界面元素在由初始位置径向向第一位置移动至与第一位置最近的位置再移动至初始位置的过程中，各界面元素的尺寸先由初始尺寸逐渐减小再逐渐增大至初始尺寸；在各界面元素的位置与第一位置的距离大于各界面元素的初始位置与第一位置的距离的情况下，即是各界面元素在由初始位置径向向与第一位置最远的位置移动再移动至初始位置的过程中，各界面元素的尺寸先由初始尺寸逐渐增大再逐渐减小至初始尺寸。

在上述第一方面的一种可能实现中，上述各界面元素的尺寸在振动过程中随各界面元素与对应的初始位置间的距离的变化而变化，包括：在各界面元素的位置与第一位置的距离小于各界面元素的初始位置与第一位置的距离的情况下，各界面元素的尺寸随各界面元素与对应的初始位置间的距离的增加而增加；在各界面元素的位置与第一位置的距离大于各界面元素的初始位置与第一位置的距离的情况下，各界面元素的尺寸随各界面元素与对应的初始位置间的距离的增加而缩小；在各界面元素的位置与第一位置的距离等于各界面元素的初始位置与第一位置的距离的情况下，各界面元素的尺寸为各界面元素的初始尺寸。

在上述第一方面的一种可能实现中，上述各界面元素的尺寸在振动过程中随各界面元素与对应的初始位置间的距离的变化而变化，包括：各界面元素的尺寸在振动过程中的尺寸随各界面元素与对应的初始位置间的距离的增大而减小，或者随各界面元素与对应的初始位置间的距离的增大而增大。

在上述第一方面的一种可能实现中，上述至少部分界面元素包括初始位置与第一位置的距离小于预设值的界面元素。

在上述第一方面的一种可能实现中，上述各界面元素的振幅基于各界面元素的初始位置与第一位置之间的距离确定，包括：界面元素的振幅基于缓和函数A(x，t)确定，其中，A(x，t)表示初始位置与第一位置的距离为x的界面元素在t运动时间的振幅，并且A(x，t)的取值随t的而减小，随x的增加而增加。

在本申请实施例中，界面元素的振幅是基于缓和函数A(x，t)来确定，也就是说界面元素的振幅是逐渐减小，可以使动画效果更平滑，有利于提升用户体验。

在上述第一方面的一种可能实现中，上述控制多个界面元素中的至少部分界面元素处于运动状态，包括：控制多个界面元素中的至少部分界面元素在预设运动时长内处于运动状态。

在本申请实施例中，预设运动时长即是下文中的动画时长，电子设备在检测到上述预设操作后，使多个界面元素中的至少部分界面元素在预设运动时长内处于运动状态。

在上述第一方面的一种可能实现中，上述界面元素以各界面元素的初始位置为中心，以对应各界面元素的振幅沿各界面元素与第一位置确定的直线方向振动，包括：各界面元素在不同运动时间的振动距离通过以下公式确定：D(x，t)＝A(x，t)×sin(2πnt/T)，其中，D(x，t)表示初始位置与第一位置的距离为x的界面元素在t运动时间的振动距离，T为预设运动时长，n为各界面元素在T时间内的振荡周期数量，0≤t≤T。

在本申请实施例中，界面元素的振动距离(例如下文中的移动距离)是基于缓和函数A(x，t)和正弦函数的乘积来确定，使得动画效果可以更贴近于水波涟漪效果。

在上述第一方面的一种可能实现中，在振动距离大于0时，各界面元素与第一位置的距离小于各界面元素的初始位置与第一位置的距离，在振动距离小于0时，各界面元素与第一位置的距离大于各界面元素的初始位置与第一位置的距离，在振动距离等于0时，各界面元素位于初始位置。

在本申请实施例中，界面元素在振动距离大于0时，径向向靠近第一位置的方向运动，在界面元素在振动距离小于0时，径向向远离第一位置的方向运动。

在上述第一方面的一种可能实现中，在振动距离大于0时，各界面元素与第一位置的距离大于各界面元素的初始位置与第一位置的距离，在振动距离小于0时，各界面元素与第一位置的距离小于各界面元素的初始位置与第一位置的距离，在振动距离等于0时，各界面元素位于初始位置。

在本申请实施例中，界面元素在振动距离大于0时，径向向远离第一位置的方向运动，在界面元素在振动距离小于0时，径向向靠近第一位置的方向运动。

在上述第一方面的一种可能实现中，缓和函数A(x，t)＝(k-x)(1-t/T)，其中k为预设值，x<k。

在上述第一方面的一种可能实现中，上述预设操作包括用户拖动第一界面元素并在第二位置释放的操作或者用户拖动第一界面元素并在第一界面元素的初始位置释放的操作。

在上述第一方面的一种可能实现中，上述第一位置为用户释放第一界面元素时，第一界面元素的中心所在的位置。

在上述第一方面的一种可能实现中，上述多个界面元素包括以下元素中的至少一种：窗口、滚动条、表格视图、按钮、菜单栏、文本框、导航栏、工具栏、图像、静态文本、部件、图标、卡片。

第二方面，本申请实施例提供了一种交互装置，该交互装置包括：

检测单元，用于检测显示单元显示的多个界面元素中的第一界面元素的预设操作，其中第一界面元素具有第一位置；

显示单元，用于响应于预设操作，控制多个界面元素中的至少部分界面元素处于运动状态，其中运动状态包括：

界面元素以各界面元素的初始位置为中心，以对应各界面元素的振幅沿各界面元素与第一位置确定的直线方向振动，其中，各界面元素的振幅基于各界面元素的初始位置与第一位置之间的距离确定，并且各界面元素的振幅随各界面元素的初始位置与第一位置之间的距离的增加而减小、随运动时间增加而减小。

第三方面，本申请实施例提供了一种电子设备，该电子设备包括：存储器，用于存储由电子设备的一个或多个处理器执行的指令；以及处理器，是电子设备的处理器之一，用于执行存储器中存储的指令以实现上述第一方面及上述第一方面的各种可能实现提供的任意一种交互方法。

第四方面，本申请实施例提供了一种可读存储介质，该可读存储介质上存储有指令，该指令在电子设备上执行时使电子设备实现上述第一方面及上述第一方面的各种可能实现提供的任意一种交互方法。

第五方面，本申请实施例提供了一种程序产品，该程序产品上电子设备上执行时使电子设备实现上述第一方面及上述第一方面的各种可能实现提供的任意一种交互方法。

附图说明

图1A与1B示出了本发明的一些实施例的示例UI的示意图；

图2A至2E示出了本发明的一些实施例的不同动画时刻的示例UI的示意图；

图3A至3B示出了本发明的一些实施例的不同缓和函数的示例位移时间曲线图；

图3C示出了本发明的一些实施例的周期函数的示例位移时间曲线图；

图4示出了本发明的一些实施例的缓和函数和周期函数结合的示例位移时间曲线图；

图5A示出了本发明的一些实施例的不同应用场景的示例UI的示意图；

图5B至5C示出了本发明的一些实施例的不规则UI元素的示例UI的示意图；

图6示出了本发明的一些实施例的一种交互方法流程图；

图7A示出了本发明的一些实施例的一种间距确定的示意图；

图7B示出了本发明的一些实施例的又一种间距确定的示意图；

图8示出了本发明的一些实施例的不同间距图标的位移时间曲线图；

图9示出了本发明的一些实施例的不同间距图标在不同动画时刻的动画示意图；

图10示出了本发明的一些实施例的一种交互装置的示意图；

图11示出了本发明的一些实施例的一种电子设备的硬件结构的示意图；

图12示出了本发明的一些实施例的一种电子设备的软件结构的示意图。

具体实施方式

本发明的说明性实施例包括但不限于交互方法、可读存储介质和电子设备。

需要说明的是，在本发明的一些实施例中所使用的术语“UI元素”是指图形界面中的可视化元素，包括但不限于：窗口(window)、滚动条(scrollbar)、表格视图(tableview)、按钮(button)、菜单栏(menu bar)、文本框(textbox)、导航栏、工具栏(tool bar)、图像(image)、静态文本(static text)、部件(Widget)、图标、卡片等。

下面以UI元素为图标，结合附图1至12对本发明的技术方案进行介绍。

图1A与1B根据本发明的一些实施例，示出了用户对UI元素进行拖拽移动的示例UI100A与100B的示意图。

在一些实施例中，电子设备检测到用户对UI上的UI元素进行触发操作时，被触发的UI元素可跟随用户的触发操作的行为在UI上进行跟随位移，UI上其他未被触发的UI元素无变化。如图1A所示，用户手指点击UI 100A上的图标101，将图标101沿箭头a方向拖拽使得图标101离开初始位置后，再将图标101沿箭头b方向拖拽使得图标101恢复初始位置的过程中，图标101可基于用户手指在UI 100A上的操作行为被触发以呈现跟随用户手指位移的动态动画效果，而UI 100A上除被用户点击的图标101外的其他图标无变化呈静态动画效果。

在另一些实施例中，电子设备检测到用户对UI上的UI元素进行触发操作后，被触发的UI元素可跟随用户的触发操作的行为在UI上进行跟随位移，UI上其他未被触发的部分UI元素可基于被触发的UI元素进行相应的位移变化。如图1B所示，用户手指点击UI 100B上的图标102，将图标102沿箭头方向拖拽使得图标102移动并期望改变图标102位置至图标103的初始位置的过程中，图标102可基于用户手指在UI 100B上的操作行为被触发以呈现跟随用户手指位移的动态动画效果，同时图标103、104、105、106及107可基于图标102的位置变化进行依次相对向后位移以对元素102进行让位位移的动态动画效果，而UI 100B上除图标102至图标107外的其他图标无变化呈静态动画效果。

如前所述，被用户触发的UI元素与未被触发的UI元素之间无联动效果，或仅为简单的动画组合，动画效果单一，影响用户体验。

为此，本发明提出一种交互方法，电子设备在检测到用户对某一UI元素的触发操作后(例如拖拽UI元素并释放的触发操作)，确定出动画中心(例如用户释放UI元素的位置动画中心)，使得UI中未被触发的其他UI元素以该动画中心呈现水波涟漪的动画效果。具体的，电子设备在确定出动画中心后，可以先基于不同UI元素的初始位置(例如，电子设备检测到上述触发操作时，各UI元素的位置)与动画中心的间距(以下简称间距)，确定出各个UI元素在动画时长内的不同动画时刻相对于动画中心的径向移动距离(以下简称移动距离)和缩放系数随动画时刻的变化关系。

其中，各UI元素的移动距离和缩放系数随动画时刻的增加，在数值0附近衰减振荡至少一个周期，每个振荡周期内，移动距离和缩放系数先由0增加到最大值、然后由最大值减小到小于0的最小值，再由最小值增加到0，并且每个振荡周期内最大值大于该周期的最小值的绝对值、小于上一个周期的最小值的绝对值)，并且在同一动画时刻，间距相同的UI元素具有相同的移动距离和缩放系数，间距不同的UI元素的移动距离或缩放系数随间距的增加而减小。

然后，电子设备基于上述变化关系，在不同的动画时刻，持续调整各UI元素的位置和尺寸。例如，在每个振荡周期内，电子设备可以在UI元素对应的移动距离和缩放系数由0增加到最大值的过程中，将UI元素逐渐向沿靠近动画中心的方向移动至与初始位置距离为该最大值的位置，期间逐渐缩小UI元素的尺寸；在UI元素对应的移动距离和缩放系数由最大值减小到0的过程中，将UI元素逐渐向远离动画中心的方向移动至初始位置，期间逐渐放大UI元素的尺寸至初始尺寸；在UI元素对应的移动距离和缩放系数由0减小到最小值的过程中，将UI元素逐渐向远离动画中心的方向移动至与初始位置距离为该最小值的绝对值的位置，期间逐渐放大UI元素的尺寸；在UI元素对应的移动距离和缩放系数由最小值增加到0的过程中，将UI元素逐渐向沿靠近动画中心的方向移动至初始位置，期间逐渐缩小UI元素的尺寸至初始尺寸。

如此，各UI元素总是同时向靠近动画中心的方向径向移动并缩小尺寸，或向远离动画中心的方向径向移动并放大尺寸，并且，在同一动画时刻，在以动画中心为圆心的同一个圆周上的UI元素具有相同的移动距离和缩放系数，不同半径圆周上的UI元素径向移动的距离和缩放系数随UI元素所在圆周的半径(即UI元素的间距)的增加而减小，各UI元素呈现出水波涟漪的动画效果，显示出各个独立UI元素之间的联动关系，进而实现UI中各个UI元素的联动动画，提高用户体验。

可以理解，在另一些实施例中，电子设备也可以基于确定出的变化关系，在每个振荡周期内，在UI元素对应的移动距离和缩放系数由0增加到最大值的过程中，将UI元素逐渐向沿远离动画中心的方向移动至与初始位置距离为该最大值的位置，期间逐渐放大UI元素的尺寸；在UI元素对应的移动距离和缩放系数由最大值减小到0的过程中，将UI元素逐渐向靠近动画中心的方向移动至初始位置，期间逐渐缩小UI元素的尺寸至初始尺寸；在UI元素对应的移动距离和缩放系数由0减小到最小值的过程中，将UI元素逐渐向靠近动画中心的方向移动至与初始位置距离为该最小值的绝对值的位置，期间逐渐缩小UI元素的尺寸；在UI元素对应的移动距离和缩放系数由最小值增加到0的过程中，将UI元素逐渐向沿远离动画中心的方向移动至初始位置，期间逐渐放大UI元素的尺寸于初始尺寸。

可以理解，前述触发操作包括但不限于用户对UI元素的拖拽和释放，触发操作还是可以是用户通过电子设备设置或下载以在UI上新增UI元素的触发操作等，在此不作限制。

例如，在一些实施例中，如图2A所示，应用于电子设备的桌面UI场景的UI 200上显示有多个UI元素，多个UI元素可包括有时钟、日历、图库、备忘录、文件管理、运动健康、录音机、信息等应用程序的图标。参考图2B，当电子设备检测到用户沿箭头a方向将UI 200中的图标201拖拽离开初始位置后，再沿箭头b方向将图标201拖拽后释放使得图标201恢复初始位置的操作后，电子设备可以检测到触发操作，并将图标201作为UI 200的目标图标并将图标201最后停留的位置确定为动画中心，再基于UI 200上其他各个图标与动画中心的间距，确定出对应其他各个图标的移动距离或缩放系数随动画时间的变化关系，并根据确定出的变化关系使得UI 200上的其他各个图标基于动画中心呈现出水波涟漪的动画效果。

例如，图2C至图2E根据本发明的一些实施例，分别示出了在1/4、3/4及4/4动画时长的UI示意图。元素可通过以先沿靠近动画中心方向产生移动距离并缩小尺寸，例如，参考图2C，各个图标以图标201作为动画中心沿靠近动画中心方向产生移动距离并缩小尺寸；然后，再沿远离动画中心方向产生移动距离并放大尺寸，例如，参考图2D，各个图标以图标201作为动画中心沿远离动画中心方向产生移动距离并放大尺寸；最后各个图标恢复初始位置和初始尺寸，例如，参考图2E，可以理解为最后各个图标以图标201作为动画中心沿靠近动画中心方向产生移动距离并缩小尺寸至恢复初始位置和初始尺寸的方式呈现水波涟漪的动画效果。

具体地，在一些实施例中，前述各个图标的移动距离或缩放系数随动画时间的变化关系可以通过以下公式(1)所示的衰减振荡曲线得到：

D(x，t)＝A(x，t)×B(C(T，t))                (1)

公式(1)中，t为动画时间，T为动画时长，且t的取值范围为0≤t≤T，x为图标的初始位置与动画中心的距离(间距)；D(x，t)用于表征间距为x的图标在t时刻的移动距离或缩放系数；A(x，t)为缓和函数，用于表征间距为x的图标在t时刻的最大振幅，且A(x，t)随间距x的增大而减小，随时间t的增大而减小；B(C(T，t))是以C(T，t)为自变量的周期函数且周期为N，用于表征图标的振荡规律，其中C(T，t)＝n×t×N/T，n为正整数，可基于动画时长、效果、周期等进行设定，或也可通过电子设备进行设定，用于表征图标在动画时长T内的振荡周期数。例如，动画时长为T，用户期望在动画时长T中图标可进行1个或多个振荡周期数的动画效果，则可通过电子设备将n对应设定为1或多个对应的正整数。

在一些实施例中，可以将图标从初始位置和初始尺寸经动画变化改变位置和尺寸后恢复初始位置和初始尺寸的过程作为1个震荡周期，或也可在上述过程叠加至最后恢复初始位置和初始尺寸的过程作为1个震荡周期。例如，图标从初始位置和初始尺寸经动画变化改变位置和尺寸后恢复初始位置和初始尺寸，再经动画变化改变位置和尺寸后恢复初始位置和原始尺的过程作为1个震荡周期，在此不做限制。

可以理解，衰减振荡曲线，是指振荡幅度逐渐减小的曲线，通常由一个函数值随时间减小的函数(例如前述缓和函数A(x，t))与另一个周期函数(例如前述周期函数B(C(T，t)))相乘得到。公式(1)所示的衰减振荡曲线只是一种示例，在另一些实施例中，各个图标的移动距离或缩放系数随动画时间的变化关系也可以由其他衰减振荡曲线确定，在此不做限定。

可以理解，缓和函数可以是缓和曲线对应的函数，使得衰减振荡曲线D(x，t)的取值可以平滑变化，进而使得水波涟漪效果更为平滑，进一步提升用户体验。

从上述公式(1)可知，在t从0变化至T的期间，缓和函数A逐渐减小，周期函数B中C(T，t)的取值范围为0至n×N，即周期函数B经过了n个周期的变化。由此，可以理解为，在t从0变化至T的期间，各个图标相对初始位置或初始尺寸进行n个周期的波动变化后恢复初始位置或初始尺寸，且波动变化过程中的振幅随时间逐渐减小，从而呈现水波涟漪的动画效果。

可以理解，基于上述公式(1)确定的各图标的移动距离或缩放系数随动画时间和间距的变化关系，电子设备可以在移动距离增加时使图标向远离动画中心的方向移动相应距离或放大相应尺寸、在移动距离减小时使图标向靠近动画中心的方向移动相应距离或减小相应尺寸，或者在移动距离增加时使图标向靠近动画中心的方向移动相应距离或减小相应尺寸、在移动距离减小时使图标向远离动画中心的方向移动相应距离或放大相应尺寸，或者在移动距离增加时使图标向远离动画中心的方向移动相应距离或减小相应尺寸、在移动距离减小时使图标向靠近动画中心的方向移动相应距离或放大相应尺寸，或者在移动距离增加时使图标向靠近动画中心的方向移动相应距离或放大相应尺寸、在移动距离减小时使图标向远离动画中心的方向移动相应距离或减小相应尺寸，来使得各图标呈现水波涟漪效果。

可以理解，在另一些实施例中，也可以只基于上述公式(1)确定各图标的移动距离，而在各图标远离初始位置时增大图标的尺寸、在图标靠近初始位置时缩小图像的尺寸，在此不做限定。

可以理解，缓和函数A(x，t)可以是函数值随间距x以及时间t的增加而逐渐减小的任意函数，在此不做限定。

例如，在一些实施例中，缓和函数A(x，t)可以通过以下公式(2)得到：

A(x，t)＝(k-x)×(1-t/ T)                  (2)

公式(2)中，k为常数，可通过图标最大移动距离阈值或最大缩放系数阈值设定，且k>x，t的取值范围为0≤t≤T。图3A示出了公式(2)确定的缓和函数A(x，t)的函数图像，参考图3A，A(x，t)随x的增大而减小、随t的增加而减小。

在另一些实施例中，A(x，t)还可以通过以下公式(3)得到：

A(x，t)＝(x/k)×(1-(t×t×t×(6×t×t-15×t+10)))       (3)

公式(3)中，k为常数，可通过图标最大移动距离阈值或最大缩放系数阈值设定，且k<x，t的取值范围为0≤t≤T。图3B示出了公式(3)确定的缓和函数A(x，t)的函数图像，参考图3B，A(x，t)随x的增大而减小、随t的增加而减小。

可以理解，在一些实施例中，周期函数B(C(T，t))可以是任意的周期函数，在此不做限制。

例如，在一些实施例中，B(C(T，t))可以为正弦函数或余弦函数。具体地，B(C(T，t))可以是如公式(4)所示的正弦函数：

B(C(T，t))＝sin(C(T，t)×2π/N+θ)               (4)

公式(4)中，C(T，t)＝n×t×N/T，n为图标在0至T内的振荡周期数量；θ可以理解为动画开始的初始位置。在动画时间t由0增加到T时，C(T，t)由0增加到nN，而B(C(T，t))的周期为N，可见在动画时间t由0增加到T的过程中，正弦函数经过了n个周期。

特别的，在n＝1、T＝1、N＝1、θ＝0时，上述周期函数B(C(T，t))＝sin(2πt)。进而周期函数B(C(T，t))在t取0至1的函数图像可以参考图3C。从图3C可知，周期函数B(C(T，t))在动画初始时刻(t＝0)和终止时刻(t＝1)时为0，从而在动画初始时刻和终止时刻各图标的位移D(x，t)为0，即各图标的在动画结束后的位置与动画开始时相同。

又例如，在另一些实施例中，周期函数也可以是公式(5)所示的余弦函数：

B(C(T，t))＝cos(C(T，t)×2π/N+θ)                    (5)

公式(5)中，θ可以理解为动画开始的初始位置，例如θ可以是-3π/2或π/2，表征动画从B(C(T，t))＝0开始，t的取值范围为0≤t≤T，C(T，t)＝n×t×N/T。

在一些实施例中，结合公式(2)至(4)对上述公式(1)进行描述，可以理解为公式(1)所对应的位移时间曲线呈周期变化，且在该周期内曲线的位移变化的幅度随时间t及间距x的增加呈平缓或平滑的减小。例如图4所示，结合公式(2)与(4)对公式(1)的位移时间曲线进行说明描述，在一个完整周期内，图4的曲线位移随动画时间t先由0逐渐增加位移到最大值，再由最大值逐渐减小为小于0的最小值，然后逐渐增加位移直至归零。

结合上述图2C至图2E的描述，可以理解为，当图4曲线位移随动画时间t由0增加到最大值的过程中，对应图2C中各个图标沿靠近动画中心方向产生移动距离并缩小尺寸；当图4曲线位移由最大值减小到最小值的过程中，对应图2D中各个图标沿远离动画中心方向产生移动距离并放大尺寸；当图4曲线位移随动画时间t由最小值增加为0的过程中，对应图2E中各个图标沿靠近动画中心方向产生移动距离并缩小尺寸至恢复初始位置和初始尺寸。由此，通过上述公式(1)至(5)可确定出各个图标的移动距离或缩放系数随动画时间的变化关系，通过该变化关系调整图标在UI中的位置和大小，可呈现水波涟漪的动画效果。

可以理解，在另一些实施例中，当图4曲线位移随动画时间t由0增加到最大值或由最小值增加到0的过程中，各个图标也可以沿远离动画中心方向产生移动距离并增大尺寸；当图4曲线位移由最大值减小到最小值的过程中，各个图标也可以沿靠近动画中心方向产生移动距离并缩小尺寸，也可以呈现水波涟漪的动画效果。

应当理解，上述公式(1)至(5)仅仅是能够实施本发明的一个或多个实施例的两种示函数公式，其不应当构成对本文所描述的实施例的功能和范围的任何限制。

如前所述，在一些实施例中，前述图2A所示的UI 200适用于电子设备的桌面UI场景，也可以适用于电子设备的其他UI场景。例如图5A所示，适用于电子设备的下拉框UI500A场景，UI 500A中显示的多个图标可以包括手电筒、响铃、自动旋转、分享、蓝牙、飞行模式、移动数据、截屏等设置按钮。同时，前述图2A所示的UI 200的图标可适用于相同的尺寸和形状，也可适用于不规则的尺寸和形状，同一个UI中也可包括多种类型的UI元素，例如参考图5B，UI 500B中包括卡片501和多个图标，其中卡片501与其他UI元素，例如图标501具有不同的尺寸、形状和类型，或如图5C所示，UI 500C中包括有多个UI元素，其中卡片501的右侧空缺，即不存在UI元素。

下面结合图2A所示的桌面UI场景对本发明的一些实施例的技术方案进行描述。

具体地，图6根据本发明的一些实施例，示出了一种交互方法的流程示意图。该方法的执行主体为电子设备，如图6所示，该流程包括如下步骤。

S601：检测到用户对目标图标的触发操作，确定动画中心及其他各个图标与动画中心的间距。

示例性地，在一些实施例中，如前述图2A至2B所示，用户沿箭头a方向将UI 200中的图标201拖拽离开初始位置后，再沿箭头b方向将图标201拖拽后释放使得图标201恢复初始位置的触发操作。电子设备通过检测用户对图标201的触发操作，将图标201作为UI 200的目标图标，并将图标201最后停留的位置确定为动画中心后，确定UI 200上其他各个图标与动画中心的间距。

可以理解，在一些实施例中，上述动画中心电子设备检测到用户对目标图标的触发操作时，目标图标的中心。例如，在图2B中，动画中心可以是图标201在初始位置时的中心。

可以理解，各个图标与动画中心的间距可以电子设备显示的界面中各图标的初始位置与动画中心的像素距离；也可以是将对电子设备显示的界面划分为多个网格，并以图标所在的网格与动画中心所在网格间的网格数据为各个图标与动画中心的间距，还可以是其他的间距方式，在此不做限定。

具体地，图7A至7B示出了本发明的一些实施例的图标的间距的确定的示意图。

在一些实施例中，以UI 200中的目标图标201作为基点建立直角坐标系，通过横轴坐标或纵轴坐标可确定位于横轴或纵轴上各个图标与基点的间距，未在横轴或纵轴的图标，可通过图标对应的横轴坐标与纵轴坐标计算得出图标与基点的间距。例如图7A所示，图标701位于纵轴可通过纵轴坐标确定，如图标701的间距为b1；图标702和703位于横轴可通过横轴坐标确定间距，如图标702的间距为a1，图标703的间距为a2，且a1<a2，未在横轴或纵轴的图标704可基于对应的横轴坐标a2与纵轴坐标b2通过勾股定理计算得到，如图标704的间距为

且

在另一些实施例中，以UI 200中的目标图标201作为圆心，确定具有各自半径的多个圆，确定与多个圆相交的各个图标，以对应圆的半径作为间距。例如图7B所示，与圆710B相交的各个图标的间距为a，与圆720B相交的各个图标的间距为b，与圆730B相交的各个图标的间距为c，与圆740B相交的各个图标的间距为d，且a<b<c<d。需特别说明的是，除了圆之外，还可以以触发图标作为中点，确定具有各自尺寸的任何其他适当形状，例如矩形、菱形等，本发明在此不受限制。

可以理解，在另一些实施例中，用户对目标元素的触发操作也可以是其他操作，例如将目标元素移动到与原始位置不同的另一位置再释放的操作，在目标元素处的双击、捏合等操作，在此不做限定。

可以理解，在另一些实施例中，动画中心也可以是其他位置，在此不做限定。

S602：基于各个图标的间距，确定对应图标的移动距离或缩放系数随动画时间的变化关系。

示例性地，电子设备在确定出各图标的间距后，可以确定对应图标的移动距离或缩放系数随动画时间的变化关系。其中，在相同的动画时间，间距越大的图标的移动距离或缩放系数越大，并且对于某一确定图标，移动距离随动画时间的增加周期性振荡，且振幅越来越小。

在一些实施例中，如前述图7A所示，图标702的间距为a1，图标703的间距为a2，a1<a2，图标704的间距为

得到

既图标702、703、704的间距大小关系为：图标702<图标703<图标704。

例如，图8示出了不同间距的图标的位移时间曲线的示意图。如图8所示，从曲线801至803对应的位移坐标(纵坐标)，可知曲线801至803的振幅大小或位移大小关系为：曲线801>曲线802>曲线803。如此，结合前述图7A所示，基于图标702至704的大小关系中，曲线801可以用于表征图标702移动距离或缩放系数随动画时间的变化关系，曲线802可以用于表征图标703移动距离或缩放系数随动画时间的变化关系，曲线803可以用于表征图标704移动距离或缩放系数随动画时间的变化关系。由此，从曲线801至803的位移时间变化关系可知，图标702至704的移动距离或缩放系数随动画时间的变化大小关系为：图标702>图标703>图标704，与图标702至704的间距大小关系呈负相关关系，即在相同动画时间，间距越大，移动距离或缩放系数越小。

在一些实施例中，根据上述变化关系，确定变化关系对应的预设函数的参数，通过调用函数对图标的移动距离或缩放系数进行调整。

具体地，假设动画时长为1秒，动画过程中每个图标进行振荡的周期数量为1，基于前述公式(1)、公式(2)和公式(4)，可以得到如下公式(6)所示的预设函数具体如下：

D(x，t)＝(k-x)×(1-t)×sin(2πt)                (6)

公式(6)中，t的取值范围为0≤t≤T，k预设的最大移动距离或缩放系数预设为10。其中，在一些实施例中，基于上述图标702至704的变化关系，对应将图标702的间距设为5，图标703的间距设为6，图标704的间距设为7。结合公式(6)，对图标702至704的在t为0、1/4、3/4、1时的移动距离或放大尺寸进行计算展示：

图标702

在t＝0，A(x，t)＝5，D＝5×sin(2π×0)＝0；

在t＝1/4时，A(x，t)＝3.75，D＝3.75×sin(2π×1/4)＝3.75；

在t＝3/4时，A(x，t)＝1.25，D＝1.25×sin(2π×3/4)＝-1.25；

在t＝1时，A(x，t)＝0，D＝0×sin(2π×π)＝0。

图标703

在t＝0，A(x，t)＝4，D＝4×sin(2π×0)＝0；

在t＝1/4时，A(x，t)＝3，D＝3×sin(2π×1/4)＝3；

在t＝3/4时，A(x，t)＝1，D＝1×sin(2π×3/4)＝-1；

在t＝1时，A(x，t)＝0，D＝0×sin(2π×0)＝0。

图标704

在t＝0，A(x，t)＝1，D＝1×sin(2π×0)＝0；

在t＝1/4时，A(x，t)＝2.25，D＝2.25×sin(2π×1/4)＝2.25；

在t＝3/4时，A(x，t)＝0.75，D＝2.75×sin(2π×3/4)＝-0.75；

在t＝1时，A(x，t)＝0，D＝0×sin(2π×0)＝0。

由此，可以得到在动画时间t＝0时，图标702至704的移动距离或缩放系数均为0，此时图标702至704处于初始位置和初始尺寸；在t＝1/4时，图标702至704移动距离或缩放系数依次为3.75、3、2.25，即图标702至704分别相对各自的初始位置和初始尺寸向靠近或远离动画中心方向移动3.75、3、2.25或分别缩小或放大3.75、3、2.25；在t＝3/4时，图标702至704移动距离或缩放系数依次为-1.25、-1、-0.75，既图标702至704分别相对各自的初始位置和初始尺寸向远离或靠近动画中心方向分别移动1.25、1、0.75或分别放大或缩小1.25、1、0.75；在t＝1时，图标702至704的移动距离或缩放系数均为0，既图标702至704恢复至初始位置和初始尺寸。

如前所述，在一些实施例中，图标在t＝1/4和t＝3/4时的移动方向和尺寸增减是相反的，如可以是t＝1/4为向靠近动画中心方向移动且缩小，对应t＝3/4为向背离动画中心方向移动且放大；或也可以是t＝1/4为向背离动画中心方向移动且缩小，对应t＝3/4为向靠近动画中心方向移动且放大；或也可以是t＝1/4为向背离动画中心方向移动且放大，对应t＝3/4为向靠近动画中心方向移动且缩小；或也可以是或也可以是t＝1/4为向靠近动画中心方向移动且放大，对应t＝3/4为向背离动画中心方向移动且缩小，在此不做限制。

如前所述，在一些实施例中，图标在t＝1/4缩放系数，可以理解为在t＝1/4时图标702至704的长宽分别缩小或放大3.75、3、2.25，或也可以理解为在t＝1/4时图标702至704分别缩小或放大3.75、3、2.25倍，在t＝3/4时同理，在此不做限制。

可以理解，在另一些实施例中，图标移动距离和缩放系数可以不同，例如，在t＝1/4时，图标702可以向远离动画中心方向移动3，放大0.3倍，在此不做限定。

如此，基于上述不同动画时间对应的移动距离或缩放系数对上述图标进行调整，可使图标以动画中心为基点呈现水波涟漪的动画效果。

可以理解，在另一些实施例中，只有与确定出的动画中心的距离小于预设距离的图标的移动距离和/或缩放系数才会随动画时间变化。

S603：根据变化关系随动画时间调整各个图标的移动距离或缩放系数，使得UI显示水波涟漪的动画效果。

电子设备可以根据前述步骤S602确定出的变化关系，调整各个图标在不同动画时间移动距离或缩放系数，使得UI界面中的各图标呈现水波涟漪的动画效果。

示例性的，在一些实施例中，基于前述图7A和图8所示，对图标702和703的动画效果进行描述。如图9所示：

在t＝0，图标201跟随用户手指沿箭头方向被拖拽并释放，使得图标201回到初始位置。此时图标702和703处于初始位置和初始尺寸的状态；

在t＝1/4，基于图标201最后停留位置作为动画中心，调整图标702相对图标702的初始位置和初始尺寸沿靠近动画中心的方向移动3.75且长宽缩小3.75，调整图标703相对图标703的初始位置和初始尺寸沿靠近动画中心的方向移动3且长宽缩小3；

在t＝3/4，调整图标702相对图标702的初始位置和初始尺寸沿远离动画中心的方向移动1.25且长宽放大1.25，调整图标703相对图标703的初始位置和初始尺寸沿远离动画中心的方向移动1且长宽放大1；

在t＝1，图标702和703至恢复初始位置和初始尺寸。

由此，图标702和703基于动画中心呈现出水波涟漪的动画效果。

可以理解，在一些实施例中，电子设备可以基于电子设备的操作系统中的预设的函数来调整各个UI元素的位置和大小。例如，假设电子设备采用操作系统为安卓^TM系统，则电子设备可以调用安卓^TM系统的视图系统中setTranslationX、setTranslationY、setScaleY、setScaleX函数来调整各UI元素的位置和大小。其中，setTranslationX函数用于调整UI元素的横向位移、setTranslationY函数用于调整UI元素的纵向位移、setScaleY函数用于调整UI元素的纵向大小、setScaleX函数用于调整UI元素的横向大小。

具体地，例如，在需要对UI元素的移动距离进行调整时，可以基于待调整的UI元素与X轴(即横轴)的夹角，并基于移动距离和该夹角的三角函数关系，确定出该UI元素的移动距离在横轴的移动分量和纵轴的移动分量，通过setTranslationX函数调整UI元素相对初始位置在横轴的移动分量，通过setTranslationY函数调整UI元素相对初始位置在纵轴的移动分量；在需要对缩放系数进行调整时，可通过setScaleX函数调整UI元素相对初始尺寸的宽度大小(横向)，通过setScaleX函数调整UI元素相对初始尺寸的长度大小(纵向)，既UI元素相对初始尺寸的宽度大小和UI元素相对初始尺寸的长度大小相同。

例如，参考图7A，图标704位于动画中心图标201的左斜上方，则通过调用setTranslationX和setTranslationY可以调整图标704沿图标704与图标201的连线方向且靠近图标201产生移动距离(如图7A中图标704与图标201的虚线连线方向)。如前所述，图标704在t为1/4时移动距离为2.25，则可对应调用setTranslationX在t为1/4时调整图标704向右产生2.25的移动距离，并同时调用setTranslationY在t为1/4时调整图标704向下产生2.25的移动距离，以使图标704呈现出沿图标704与图标201的连线方向且靠近图标201调整位置。

可以理解，在一些实施例中，电子设备可以调整各图标的移动距离，也可以只调整各图标的缩放系数，还可以既调整各图标的移动距离，也调整各图标的缩放系数，在此不做限定。

通过本发明实施例提供的方法，电子设备检测到用户的触发操作后，确定动画中心及各个UI元素与动画中心的间距，基于间距确定各个UI元素的径向移动距离或缩放系数随动画时间的变化关系，通过变化关系调整各个UI元素的位置和大小，使得UI上各个UI元素可基于动画中心呈现出水波涟漪的动画效果，显示出各个独立UI元素之间的联动关系，进而实现UI中各个UI元素的联动动画，提高用户体验。

图10示出了本发明的一些实施例的一种交互装置1100的示意图。如图10所示，交互装置1100至少包括检测单元1110、确定单元1120及显示单元1130。

检测单元1110可以用于检测到用户对目标UI元素的触发操作，确定其他各个UI元素与目标UI元素的间距。检测单元1110的具体功能，以及实现该具体功能的方法，可以参考前述触发操作、间距确定的相关描述(例如前述对交互方法中步骤S601的相关描述等)，在此不做赘述。

确定单元1120可以用于基于各个UI元素的间距，确定对应UI元素的移动距离或缩放系数随动画时间的变化关系。确定单元1120的具体功能，以及实现该具体功能的方法，可以参考前述周期函数、缓和函数、动画时间的相关描述(例如前述对交互方法中步骤S602的相关描述等)，在此不做赘述。

显示单元1130可以用于根据变化关系随动画时间调整各个UI元素的移动距离或缩放系数，使得UI显示水波涟漪的动画效果。显示单元1130的具体功能，以及实现该具体功能的方法，可以参考前述动画效果显示的相关描述(例如前述对交互方法中步骤S603的相关描述等)，在此不做赘述。

通过本发明实施例提供的交互装置1100，该装置在检测到用户的触发操作后，确定动画中心及各个UI元素与动画中心的间距，基于间距确定各个UI元素初始位置的径向移动距离或缩放系数随动画时间的变化关系，通过变化关系调整各个UI元素的位置和大小，使得UI上各个UI元素可基于动画中心呈现出水波涟漪的动画效果，显示出各个独立UI元素之间的联动关系，进而实现UI中各个UI元素的联动动画，提高用户体验。

图11示出了本发明的一些实施例的一种电子设备100的硬件结构的示意图。

如图11所示，电子设备100可以包括处理器110、外部存储器接口120、内部存储器121、通用串行总线(universal serial bus，USB)接口130、充电管理模块140、电源管理模块141、电池142、天线1、天线2、移动通信模块150、无线通信模块160、音频模块170、扬声器170A、受话器170B、麦克风170C、耳机接口170D、传感器模块180、按键190、马达191、指示器192、摄像头193、显示屏194、以及用户标识模块(subscriber identification module，SIM)卡接口195等。传感器模块180可以包括压力传感器180A、陀螺仪传感器180B、气压传感器180C、磁传感器180D、加速度传感器180E、距离传感器180F、接近光传感器180G、指纹传感器180H、温度传感器180J、触摸传感器180K、环境光传感器180L、骨传导传感器180M等。

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

处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)、调制解调处理器、图形处理器(graphics processingunit，GPU)、图像信号处理器(image signal processor，ISP)、控制器、视频编解码器、数字信号处理器(digital signal processor，DSP)、基带处理器、和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。在一些实施例中，处理器110可以执行前述各实施例提供的交互方法对应的指令。例如，在电子设备100用于检测用户对目标UI元素的触发操作时，处理器110可以用于运行确定其他各个UI元素与目标UI元素的间距、基于间距确定对应UI元素的移动距离或缩放系数随动画时间的变化关系，基于变化关系随动画时间调整各个UI元素的移动距离或缩放系数的指令等。

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

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

I2C接口是一种双向同步串行总线，包括一根串行数据线(serial data line，SDA)和一根串行时钟线(derail clock line，SCL)。在一些实施例中，处理器110可以包含多组I2C总线。处理器110可以通过不同的I2C总线接口分别耦合触摸传感器180K、充电器、闪光灯、摄像头193等。例如，处理器110可以通过I2C接口耦合触摸传感器180K，使处理器110与触摸传感器180K通过I2C总线接口通信，实现电子设备100的触摸功能。

I2S接口可以用于音频通信。在一些实施例中，处理器110可以包含多组I2S总线。处理器110可以通过I2S总线与音频模块170耦合，实现处理器110与音频模块170之间的通信。在一些实施例中，音频模块170可以通过I2S接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。

PCM接口也可以用于音频通信，将模拟信号抽样、量化和编码。在一些实施例中，音频模块170与无线通信模块160可以通过PCM总线接口耦合。在一些实施例中，音频模块170也可以通过PCM接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。所述I2S接口和所述PCM接口都可以用于音频通信。

UART接口是一种通用串行数据总线，用于异步通信。该总线可以为双向通信总线。它将要传输的数据在串行通信与并行通信之间转换。在一些实施例中，UART接口通常被用于连接处理器110与无线通信模块160。例如，处理器110通过UART接口与无线通信模块160中的蓝牙模块通信，实现蓝牙功能。在一些实施例中，音频模块170可以通过UART接口向无线通信模块160传递音频信号，实现通过蓝牙耳机播放音乐的功能。

MIPI接口可以被用于连接处理器110与显示屏194、摄像头193等外围器件。MIPI接口包括摄像头串行接口(camera serial interface，CSI)、显示屏串行接口(displayserial interface，DSI)等。在一些实施例中，处理器110和摄像头193通过CSI接口通信，实现电子设备100的拍摄功能。处理器110和显示屏194通过DSI接口通信，实现电子设备100的显示功能。

GPIO接口可以通过软件配置。GPIO接口可以被配置为控制信号，也可被配置为数据信号。在一些实施例中，GPIO接口可以用于连接处理器110与摄像头193、显示屏194、无线通信模块160、音频模块170、传感器模块180等。GPIO接口还可以被配置为I2C接口、I2S接口、UART接口、MIPI接口等。

USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口、Micro USB接口、USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用于电子设备100与外围设备之间传输数据。也可以用于连接耳机，通过耳机播放音频。该接口还可以用于连接其他电子设备，例如AR设备等。

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

充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备100供电。

电源管理模块141用于连接电池142、充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110、内部存储器121、显示屏194、摄像头193、和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。

电子设备100的无线通信功能可以通过天线1、天线2、移动通信模块150、无线通信模块160、调制解调处理器以及基带处理器等实现。天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如，可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。

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

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

无线通信模块160可以提供应用在电子设备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)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。

在一些实施例中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications，GSM)、通用分组无线服务(general packet radio service，GPRS)、码分多址接入(codedivision multiple access，CDMA)、宽带码分多址(wideband code division multipleaccess，WCDMA)、时分码分多址(time-division code division multiple access，TD-SCDMA)、长期演进(long term evolution，LTE)、5G以及后续演进标准、BT、GNSS、WLAN、NFC、FM、和/或IR技术等。其中GNSS可以包括全球卫星定位系统(global positioning system，GPS)、全球导航卫星系统(global navigation satellite system，GLONASS)、北斗卫星导航系统(beidou navigation satellite system，BDS)、准天顶卫星系统(quasi-zenithsatellite system，QZSS)和/或星基增强系统(satellite-based augmentation systems，SBAS)。

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

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

电子设备100可以通过ISP、摄像头193、视频编解码器、GPU、显示屏194以及应用处理器等实现拍摄功能。ISP用于处理摄像头193反馈的数据。例如，在拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点，亮度，肤色进行算法优化。ISP还可以对拍摄场景的曝光，色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。

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

数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。

视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如，动态图像专家组(moving picture experts group，MPEG)1、MPEG2、MPEG3、MPEG4等。

NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如图像识别、人脸识别、语音识别、文本理解等。

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

内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。处理器110通过运行存储在内部存储器121的指令、和/或存储在设置于处理器中的存储器的指令，执行电子设备100的各种功能应用以及数据处理。例如，在一些实施例中，内部存储器121可以用于临时存储前述各实施例提供的交互方法的指令，也可以用于存储各界面显示的临时副本等。

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

SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195，或从SIM卡接口195拔出，实现和电子设备100的接触和分离。电子设备100可以支持1个或N个SIM卡接口，N为大于1的正整数。SIM卡接口195可以支持Nano SIM卡、Micro SIM卡、SIM卡等。同一个SIM卡接口195可以同时插入多张卡。所述多张卡的类型可以相同，也可以不同。SIM卡接口195也可以兼容不同类型的SIM卡。SIM卡接口195也可以兼容外部存储卡。电子设备100通过SIM卡和网络交互，实现通话以及数据通信等功能。在一些实施例中，电子设备100采用eSIM，即嵌入式SIM卡。eSIM卡可以嵌在电子设备100中，不能和电子设备100分离。

电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构或云架构。本发明的实施例以分层架构的一种移动操作系统为例，示例性说明电子设备100的软件结构。

图12示出了本发明的一些实施例的一种电子设备100的软件结构的示意图。分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，可以将操作系统分为四层，从上至下分别为应用程序层1210、应用程序框架层1220、系统库1230以及内核层1240。

应用程序层1210可以包括一系列应用程序包。如图1A或1B所示，应用程序包可以包括相机、图库、日历、电话、信息、通讯录、天气、浏览器、音乐、视频等应用程序。

应用程序框架层1220为应用程序层1210的应用程序提供应用编程接口(application programming interface，API)和编程框架。应用程序框架层1220包括一些预先定义的函数。

应当理解，图11所示出的电子设备100仅仅是能够实施本发明的一个或多个实施例的示例电子设备，其不应当构成对本文所描述的实施例的功能和范围的任何限制。

如图12所示，应用程序框架层1220可以包括窗口管理器、内容提供器、视图系统、电话管理器、资源管理器、通知管理器等。窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频、图像、音频、拨打和接听的电话、浏览历史和书签、电话簿等。

视图系统包括可视控件，例如显示文字的控件，显示图像的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，在一些实施例中，前述各实施例中UI元素的移动距离或缩放系数可通过视图系统中的setTranslationX、setTranslationY、setScaleY、setScaleX函数进行调整。如通过setTranslationX和setTranslationY函数调整前述UI元素相对初始位置的偏移量(既移动距离)，通过setScaleY和setScaleX函数调整前述UI元素相对初始尺寸的大小(高度、宽度、长度等，既缩放系数)。

继续参考图12，操作系统运行时包括核心库和虚拟机。操作系统运行时负责操作系统的调度和管理。核心库包含两部分，一部分是Java语言需要调用的功能函数，另一部分是操作系统的核心库。应用程序层1210和应用程序框架层1220运行在虚拟机中。虚拟机将应用程序层1210和应用程序框架层的Java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理、堆栈管理、线程管理、安全和异常的管理、以及垃圾回收等功能。系统库1230可以包括多个功能模块。例如，表面管理器(surface manager)、媒体库(MediaLibraries)、三维图形处理库(例如OpenGL ES)、2D图形引擎(例如：SGL)等。

表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如，MPEG4、H.264、MP3、AAC、AMR、JPG、PNG等。三维图形处理库用于实现三维图形绘图、图像渲染、合成、和图层处理等。2D图形引擎是2D绘图的绘图引擎。

内核层1240是硬件和软件之间的层。内核层1240至少包含显示驱动、摄像头驱动、音频驱动、传感器驱动。

在附图中，可以以特定布置和/或顺序示出一些结构或方法特征。然而，应该理解，可能不需要这样的特定布置和/或排序。而是，在一些实施例中，这些特征可以以不同于说明性附图中所示的方式和/或顺序来布置。另外，在特定图中包括结构或方法特征并不意味着暗示在所有实施例中都需要这样的特征，并且在一些实施例中，可以不包括这些特征或者可以与其他特征组合。

需要说明的是，本申请各设备实施例中提到的各单元/模块都是逻辑单元/模块，在物理上，一个逻辑单元/模块可以是一个物理单元/模块，也可以是一个物理单元/模块的一部分，还可以以多个物理单元/模块的组合实现，这些逻辑单元/模块本身的物理实现方式并不是最重要的，这些逻辑单元/模块所实现的功能的组合才是解决本申请所提出的技术问题的关键。此外，为了突出本申请的创新部分，本申请上述各设备实施例并没有将与解决本申请所提出的技术问题关系不太密切的单元/模块引入，这并不表明上述设备实施例并不存在其它的单元/模块。

需要说明的是，在本专利的示例和说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

虽然通过参照本申请的某些优选实施例，已经对本申请进行了图示和描述，但本领域的普通技术人员应该明白，可以在形式上和细节上对其作各种改变，而不偏离本申请的范围。

Claims (17)

1.一种交互方法，应用于电子设备，其特征在于，包括：

电子设备显示有第一界面，所述第一界面包括多个界面元素；

检测到用户对所述多个界面元素中的第一界面元素的预设操作，其中所述第一界面元素具有第一位置；

响应于所述预设操作，控制所述多个界面元素中的至少部分界面元素处于运动状态，其中所述运动状态包括：

界面元素以各界面元素的初始位置为中心，以对应各界面元素的振幅沿各界面元素与所述第一位置确定的直线方向振动，

其中，各界面元素的振幅基于各界面元素的初始位置与所述第一位置之间的距离确定，并且各界面元素的振幅随各界面元素的初始位置与所述第一位置之间的距离的增加而减小、随运动时间增加而减小。

2.根据权利要求1所述的方法，其特征在于，所述运动状态还包括：各所述界面元素的尺寸在振动过程中随各界面元素与对应的初始位置间的距离的变化而变化。

3.根据权利要求2所述的方法，其特征在于，所述各所述界面元素的尺寸在振动过程中随各界面元素与对应的初始位置间的距离的变化而变化，包括：

在各界面元素的位置与所述第一位置的距离小于各界面元素的初始位置与所述第一位置的距离的情况下，各界面元素的尺寸随各界面元素与对应的初始位置间的距离的增加而缩小；

在各界面元素的位置与所述第一位置的距离大于各界面元素的初始位置与所述第一位置的距离的情况下，各界面元素的尺寸随各界面元素与对应的初始位置间的距离的增加而增加；

在各界面元素的位置与所述第一位置的距离等于各界面元素的初始位置与所述第一位置的距离的情况下，各界面元素的尺寸为各界面元素的初始尺寸。

4.根据权利要求2所述的方法，其特征在于，所述各所述界面元素的尺寸在振动过程中随各界面元素与对应的初始位置间的距离的变化而变化，包括：

在各界面元素的位置与所述第一位置的距离小于各界面元素的初始位置与所述第一位置的距离的情况下，各界面元素的尺寸随各界面元素与对应的初始位置间的距离的增加而增加；

在各界面元素的位置与所述第一位置的距离大于各界面元素的初始位置与所述第一位置的距离的情况下，各界面元素的尺寸随各界面元素与对应的初始位置间的距离的增加而缩小；

在各界面元素的位置与所述第一位置的距离等于各界面元素的初始位置与所述第一位置的距离的情况下，各界面元素的尺寸为各界面元素的初始尺寸。

5.根据权利要求2所述的方法，其特征在于，所述各所述界面元素的尺寸在振动过程中随各界面元素与对应的初始位置间的距离的变化而变化，包括：

各所述界面元素的尺寸在振动过程中的尺寸随各界面元素与对应的初始位置间的距离的增大而减小，或者随各界面元素与对应的初始位置间的距离的增大而增大。

6.根据权利要求1所述的方法，其特征在于，所述至少部分界面元素包括初始位置与所述第一位置的距离小于预设值的界面元素。

7.根据权利要求1至6中任一项所述的方法，其特征在于，所述各界面元素的振幅基于各界面元素的初始位置与所述第一位置之间的距离确定，包括：

界面元素的振幅基于缓和函数A(x，t)确定，其中，A(x，t)表示初始位置与所述第一位置的距离为x的界面元素在t运动时间的振幅，并且A(x，t)的取值随t的而减小，随x的增加而增加。

8.根据权利要求7所述的方法，其特征在于，所述控制所述多个界面元素中的至少部分界面元素处于运动状态，包括：控制所述多个界面元素中的至少部分界面元素在预设运动时长内处于运动状态。

9.根据权利要求8所述的方法，其特征在于，所述界面元素以各界面元素的初始位置为中心，以对应各界面元素的振幅沿各界面元素与所述第一位置确定的直线方向振动，包括：

各界面元素在不同运动时间的振动距离通过以下公式确定：

D(x，t)＝A(x，t)×sin(2πnt/T)，

其中，D(x，t)表示初始位置与所述第一位置的距离为x的界面元素在t运动时间的振动距离，T为所述预设运动时长，n为各所述界面元素在T时间内的振荡周期数量，0≤t≤T。

10.根据权利要求9所述的方法，其特征在于，在振动距离大于0时，各界面元素与所述第一位置的距离小于各界面元素的初始位置与所述第一位置的距离，在振动距离小于0时，各界面元素与所述第一位置的距离大于各界面元素的初始位置与所述第一位置的距离，在振动距离等于0时，各界面元素位于初始位置。

11.根据权利要求9所述的方法，其特征在于，在振动距离大于0时，各界面元素与所述第一位置的距离大于各界面元素的初始位置与所述第一位置的距离，在振动距离小于0时，各界面元素与所述第一位置的距离小于各界面元素的初始位置与所述第一位置的距离，在振动距离等于0时，各界面元素位于初始位置。

12.根据权利要求9所述的方法，其特征在于，所述缓和函数为A(x，t)＝(k-x)(1-t/T)，其中k为预设值，x<k。

13.根据权利要求1至12中任一项所述的方法，其特征在于，所述预设操作包括用户拖动所述第一界面元素并在第二位置释放的操作或者用户拖动所述第一界面元素并在所述第一界面元素的初始位置释放的操作。

14.根据权利要求13所述的方法，其特征在于，所述第一位置为用户释放所述第一界面元素时，所述第一界面元素的中心所在的位置。

15.根据权利要求1至14中任一项所述的方法，其特征在于，所述多个界面元素包括以下元素中的至少一种：窗口、滚动条、表格视图、按钮、菜单栏、文本框、导航栏、工具栏、图像、静态文本、部件、图标、卡片。

16.一种电子设备，其特征在于，包括：

存储器，用于存储由电子设备的一个或多个处理器执行的指令；

以及处理器，是所述电子设备的处理器之一，用于执行所述存储器中存储的指令以实现权利要求1至15中任一项所述方法。

17.一种可读存储介质，其特征在于，所述可读存储介质上存储有指令，所述指令在电子设备上执行时使所述电子设备实现权利要求1至15中任一项所述的方法。

Images