CN116700555B - 动效处理方法及电子设备 - Google Patents

动效处理方法及电子设备 Download PDF

Info

Publication number
CN116700555B
CN116700555B CN202211306561.5A CN202211306561A CN116700555B CN 116700555 B CN116700555 B CN 116700555B CN 202211306561 A CN202211306561 A CN 202211306561A CN 116700555 B CN116700555 B CN 116700555B
Authority
CN
China
Prior art keywords
icon
layer image
mask layer
color
image
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.)
Active
Application number
CN202211306561.5A
Other languages
English (en)
Other versions
CN116700555A (zh
Inventor
罗文璐
熊棉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Honor Device Co Ltd
Original Assignee
Honor Device Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Honor Device Co Ltd filed Critical Honor Device Co Ltd
Priority to CN202211306561.5A priority Critical patent/CN116700555B/zh
Publication of CN116700555A publication Critical patent/CN116700555A/zh
Application granted granted Critical
Publication of CN116700555B publication Critical patent/CN116700555B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开了一种动效处理方法及电子设备，该方法包括：若被拖拽的第一设备对应的第一图标与第二设备对应的第二图标之间的距离小于或等于粘连阈值，则执行粘连动效处理；若继续拖拽第一图标向第二图标移动，且第一设备与第二设备已建立连接，则执行跟手颜色渐变动效处理；若停止拖拽第一图标，且第一图标与第二图标之间的粘连宽度大于或等于第一阈值，且第一设备与第二设备未建立连接，则执行呼吸颜色渐变动效处理；在以呼吸的方式对第一图标的颜色进行渐变的过程中，若第一设备与第二设备已建立连接，则在第一预设时长内执行颜色渐变动效处理。通过本申请，能够为用户提供更为生动一致的动效视觉体验以及提高页面个性化。

Description

动效处理方法及电子设备
技术领域
本申请实施例涉及计算机领域，尤其涉及动效处理方法及电子设备。
背景技术
随着移动互联网的发展以及智能化进程的推进，智能设备的应用范围也愈来愈广。为了满足设备智能化的需求，可以对多个智能设备建立协同关系，以实现资源共享、协同互动等操作。
如图1所示，在多设备互联界面中包括智能手机的大球图标、平板电脑的小球图标以及智能电视的小球图标，用户可以将平板电脑的小球图标拖拽至智能手机的大球图标处，以表示建立智能手机和平板电脑之间的协同关系。为了能够给用户提供生动的视觉体验，可以在用户进行图标拖拽的过程中增加动效设计。所谓的动效设计是指用户界面上动态效果的设计。但是如何进行动效处理，以提供更为生动一致的动效视觉体验以及提高页面个性化，是一个有待解决的问题。
发明内容
本申请提供了一种动效处理方法及电子设备，能够为用户提供更为生动一致的动效视觉体验以及提高页面个性化。
第一方面提供了一种动效处理方法，该方法包括：若被用户拖拽的第一设备对应的第一图标与第二设备对应的第二图标之间的距离小于或等于粘连阈值，则对第一图标和第二图标执行粘连动效处理，该第一图标和第二图标显示于同一显示界面；若在第一图标和第二图标粘粘的情况下该用户继续拖拽第一图标向第二图标移动，且第一设备与第二设备已建立连接，则将第一图标的颜色渐变为第二图标的颜色；若在第一图标和第二图标粘粘的情况下该用户停止拖拽第一图标，且第一图标与第二图标之间的粘连宽度大于或等于第一阈值，且第一设备与第二设备未建立连接，则以呼吸的方式对第一图标的颜色进行渐变；在以呼吸的方式对第一图标的颜色进行渐变的过程中，若第一设备与第二设备已建立连接，则在第一预设时长内将第一图标的颜色渐变为第二图标的颜色。
在第一方面所描述的方法中，在不同的情况下执行不同的动效处理，通过这样的方式能够为用户提供更为生动一致的动效视觉体验以及提高页面个性化，体现一种自然交互的效果。
在一种可能的实现方式中，将第一图标的颜色渐变为第二图标的颜色之后，该方法还包括：若该用户拖拽第一图标远离第二图标，则将第一图标的颜色渐变为第一图标的原始颜色。基于该方式，在拖拽第一图标远离第二图标时，也能够实现跟手渐变第一图标颜色，以达到跟手褪色为第一图标的原始颜色的目的。
在一种可能的实现方式中，对第一图标和第二图标执行粘连动效处理，包括：对第一图标和第二图标进行高斯模糊处理，得到第一图像，该第一图像包括高斯模糊处理后的第一图标和第二图标；对该第一图像中的第一图标和第二图标进行粘粘处理，得到第二图像；对该第二图像进行颜色过滤处理，得到粘粘的第一图标和第二图标；显示该粘粘的第一图标和第二图标。基于该方式，能够提高第一图标与第二图标的粘连效果的自然性。
在一种可能的实现方式中，将该第一图标的颜色渐变为第二图标的颜色，包括：创建目标层图像、遮罩层图像和源层图像，遮罩层图像位于目标层图像之上，源层图像位于遮罩层图像之上，遮罩层图像用于遮挡该目标层图像，目标层图像的形状、源层图像的形状与第一图标的形状相同，目标层图像和源层图像完全重叠，且目标层图像的颜色为第二图标的颜色，源层图像的颜色为第一图标的原始颜色；确定该遮罩层图像的第一晕染方向和该遮罩层图像移动的中心线，该中心线为第一图标的中心点与第二图标的中心点之间的连线，该第一晕染方向与该第一图标的第一拖拽方向相反；在中心线上朝着该第一晕染方向移动该遮罩层图像；基于目标层图像与遮罩层图像之间未重叠的部分、源层图像与遮罩层图像之间重叠的部分，得到第一合成图像；在移动该遮罩层图像的过程中显示多帧第一合成图像。基于该方式，能够给用户产生跟手渐变第一图标颜色的效果，实现将第一图标的颜色渐变为第二图标的颜色的过程，更有个性化设计，体现一种自然交互的效果。
在一种可能的实现方式中，在中心线上朝着该第一晕染方向移动该遮罩层图像，包括：基于该用户对第一图标的拖拽距离在中心线上朝着该第一晕染方向移动该遮罩层图像。基于该方式，通过两个图标距离的转换动态改变遮罩层图像的移动以达到跟手渐变第一图标颜色的效果，提供更为生动一致的动效视觉体验。
在一种可能的实现方式中，以呼吸的方式对第一图标的颜色进行渐变，包括：创建目标层图像、遮罩层图像和源层图像，遮罩层图像位于目标层图像之上，源层图像位于遮罩层图像之上，遮罩层图像用于遮挡目标层图像，目标层图像的形状、源层图像的形状与第一图标的形状相同，目标层图像和源层图像完全重叠，且目标层图像的颜色为第二图标的颜色，源层图像的颜色为第一图标的原始颜色；确定该遮罩层图像移动的中心线，该中心线为第一图标的中心点与第二图标的中心点之间的连线；在中心线上来回移动该遮罩层图像，该遮罩层图像的单向移动时长为第二预设时长；基于目标层图像与遮罩层图像之间未重叠的部分、源层图像与遮罩层图像之间重叠的部分，得到第二合成图像；在移动该遮罩层图像的过程中显示多帧第二合成图像。基于该方式，不断循环渐变过程，给用户产生以呼吸的方式不断渐变第一图标的颜色的效果，提高用户的视觉体验。
在一种可能的实现方式中，在移动该遮罩层图像的过程中显示多帧第二合成图像，包括：基于预设动效曲线在移动该遮罩层图像的过程中显示多帧第二合成图像，该预设动效曲线用于设置动效属性值从初始值过渡到结束值的变化规律。基于该方式，能够提高第一图标进行颜色渐变动效的自然度，提高用户的视觉体验。
在一种可能的实现方式中，在第一预设时长内将第一图标的颜色渐变为第二图标的颜色，包括：创建目标层图像、遮罩层图像和源层图像，遮罩层图像位于目标层图像之上，源层图像位于遮罩层图像之上，遮罩层图像用于遮挡目标层图像，目标层图像的形状、源层图像的形状与第一图标的形状相同，目标层图像和源层图像完全重叠，且目标层图像的颜色为第二图标的颜色，源层图像的颜色为第一图标的原始颜色；确定该遮罩层图像的第二晕染方向和该遮罩层图像移动的中心线，该中心线为第一图标的中心点与第二图标的中心点之间的连线；在第一预设时长内在中心线上朝着该第二晕染方向移动该遮罩层图像；基于目标层图像与遮罩层图像之间未重叠的部分、源层图像与遮罩层图像之间重叠的部分，得到第三合成图像；在移动该遮罩层图像的过程中显示多帧第三合成图像。基于该方式，在第一预设时长内自动将第一图标的颜色渐变为第二图标的颜色，给用户产生在第一图标与第二图标粘连后自动渐变的效果，提高用户的视觉体验。
在一种可能的实现方式中，将第一图标的颜色渐变为第一图标的原始颜色，包括：确定该遮罩层图像的褪色方向，该褪色方向与第一图标的第二拖拽方向相反；在中心线上朝着该褪色方向移动该遮罩层图像；基于目标层图像与遮罩层图像之间未重叠的部分、源层图像与遮罩层图像之间重叠的部分，得到第四合成图像；在移动该遮罩层图像的过程中显示多帧第四合成图像。基于该方式，提高跟手渐变第一图标颜色的效果，提高用户的视觉体验。
第二方面提供了一种电子设备，包括一个或多个处理器和一个或多个存储器。该一个或多个存储器与一个或多个处理器耦合，一个或多个存储器用于存储计算机程序代码，计算机程序代码包括计算机指令，当一个或多个处理器执行计算机指令时，使得电子设备执行上述第一方面任一项可能的实现方式中的东西处理方法。
第三方面提供了一种动效处理装置，该动效处理装置可以是电子设备，也可以是电子设备中的装置，或者是能够和电子设备匹配使用的装置。其中，该动效处理装置还可以为芯片系统。该动效处理装置可执行第一方面所述的方法。该动效处理装置的功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。该硬件或软件包括一个或多个与上述功能相对应的单元或模块。该单元或模块可以是软件和/或硬件。该动效处理装置执行的操作及有益效果可以参见上述第一方面所述的方法以及有益效果，重复之处不再赘述。
第四方面提供了一种计算机存储介质，包括计算机指令，当计算机指令在电子设备上运行时，使得电子设备执行上述第一方面任一项可能的实现方式中的动效处理方法。
第五方面提供了一种计算机程序产品，当计算机程序产品在计算机上运行时，使得计算机执行上述任一方面任一项可能的实现方式中的动效处理方法。
附图说明
图1为本申请实施例提供的一种多设备互联的用户界面；
图2为本申请实施例提供的一种电子设备的硬件结构示意图；
图3为本申请实施例提供的一种电子设备的软件结构框图；
图4为本申请实施例提供的一种动效处理装置的结构示意图；
图5为本申请实施例提供的另一种多设备互联的用户界面；
图6A为本申请实施例提供的一种第一图标与第二图标达到粘连条件的示意图；
图6B为本申请实施例提供的一种高斯模糊处理后的第一图标和第二图标的示意图；
图6C为本申请实施例提供的一种颜色过滤处理后粘连的第一图标和第二图标的示意图；
图7为本申请实施例提供的另一种多设备互联的用户界面；
图8为本申请实施例提供的一种目标层图像、遮罩层图像和源层图像的侧面图；
图9A为本申请实施例提供的一种遮罩层图像的第一晕染方向和第一图标的第一拖拽方向的示意图；
图9B为本申请实施例提供的一种目标层图像、遮罩层图像和源层图像的正面图；
图9C为本申请实施例提供的另一种目标层图像、遮罩层图像和源层图像的正面图；
图9D为本申请实施例提供的一种第一合成图像的示意图；
图9E为本申请实施例提供的一种4帧第一合成图像的示意图；
图10A为本申请实施例提供的另一种目标层图像、遮罩层图像和源层图像的正面图；
图10B为本申请实施例提供的一种4帧第四合成图像的示意图；
图11A为本申请实施例提供的另一种多设备互联的用户界面；
图11B为本申请实施例提供的一种7帧第二合成图像的示意图；
图12为本申请实施例提供的另一种目标层图像、遮罩层图像和源层图像的正面图；
图13为本申请实施例提供的一种4帧第三合成图像的示意图；
图14为本申请实施例提供的一种动效处理装置的结构示意图。
具体实施方式
下面将结合附图对本申请实施例中的技术方案进行清楚、详尽地描述。其中，在本申请实施例的描述中，除非另有说明，“/”表示或的意思，例如，A/B可以表示A或B；文本中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况，另外，在本申请实施例的描述中，“多个”是指两个或多于两个。
以下，术语“第一”、“第二”仅用于描述目的，而不能理解为暗示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征，在本申请实施例的描述中，除非另有说明，“多个”的含义是两个或两个以上。
本申请以下实施例中的术语“用户界面(user interface，UI)”，是应用程序或操作系统与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。用户界面是通过java、可扩展标记语言(extensible markuplanguage，XML)等特定计算机语言编写的源代码，界面源代码在电子设备上经过解析，渲染，最终呈现为用户可以识别的内容。用户界面常用的表现形式是图形用户界面(graphicuser interface，GUI)，是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的文本、图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。
为了能够为用户提供更为生动一致的动效视觉体验以及提高页面个性化，本申请提供了一种动效处理方法。在具体实现中，上述所提及的动效处理方法可以由电子设备100执行。其中，电子设备100可以是手机、平板电脑、笔记本电脑或具备无线通讯功能的可穿戴电子设备(如智能手表)等，但并不局限于此。电子设备100配置有显示屏，并安装有预设应用程序(application，APP)。例如，用户可以通过显示屏在预设APP中进行移动图标等操作。
下面对电子设备100的硬件结构进行介绍。请参阅图2，图2是本申请实施例提供的电子设备100的硬件结构示意图。
电子设备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)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。
其中，控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。
处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。处理器110调用存储器中存储的指令或数据，使电子设备100执行以下方法实施例中电子设备所执行的动效处理方法。
在一些实施例中，处理器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)接口等。
充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。
电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，外部存储器，显示屏194，摄像头193，和无线通信模块160等供电在其他一些实施例中，电源管理模块141也可以设置于处理器110中。
电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wirelesslocal area networks，WLAN)(如Wi-Fi网络)，蓝牙(bluetooth，BT)，BLE广播，全球导航卫星系统(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可以通过无线通信技术与网络以及其他设备通信。
电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像，视频等。显示屏194包括显示面板。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。
电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。ISP用于处理摄像头193反馈的数据。摄像头193用于捕获静态图像或视频。数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。
NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。
外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。
内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行电子设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如闪存器件等。
电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。
音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。
扬声器170A，也称“喇叭”，用于将音频电信号转换为声音信号。受话器170B，也称“听筒”，用于将音频电信号转换成声音信号。麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。耳机接口170D用于连接有线耳机。压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。陀螺仪传感器180B可以用于确定电子设备100的运动姿态。气压传感器180C用于测量气压。磁传感器180D包括霍尔传感器。加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。距离传感器180F，用于测量距离。接近光传感器180G可以包括例如发光二极管(LED)和光检测器。环境光传感器180L用于感知环境光亮度。指纹传感器180H用于采集指纹。温度传感器180J用于检测温度。触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。骨传导传感器180M可以获取振动信号。按键190包括开机键，音量键等。马达191可以产生振动提示。指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。SIM卡接口195用于连接SIM卡。
电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本发明实施例以分层架构的Android系统为例，示例性说明电子设备100的软件结构。图3是本申请实施例的电子设备100的软件结构框图。分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。
应用程序层可以包括一系列应用程序包。如图3所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。如图3所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。
内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。
视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。
资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。
Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。
核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。
系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(media libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。
表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式。
三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。
下面进一步对本申请提供的动效处理方法进行详细描述。请参见图4，图4是本申请实施例提供的一种动效处理方法的流程示意图。如图4所示，该动效处理方法包括如下步骤S401～S404，图4所示的方法执行主体包括电子设备(如图2中的电子设备100)。或者，图4所示的方法执行主体包括电子设备中的芯片。图4以电子设备为执行主体为例进行说明。其中：
S401、若被用户拖拽的第一设备对应的第一图标与第二设备对应的第二图标之间的距离小于或等于粘连阈值，则电子设备对第一图标和第二图标执行粘连动效处理。
在本申请实施例中，第一图标和第二图标显示于同一显示界面。如图5所示，在多设备互联界面中显示有第一设备对应的第一图标和第二设备对应的第二图标，用户可以通过手指将第一图标拖拽靠近第二图标，以表示建立第一设备和第二设备的协同关系。在用户拖拽第一图标的过程中，第一图标与第二图标之间的距离不断减少，当第一图标与第二图标之间的距离小于或等于粘连阈值时，电子设备便会显示第一图标与第二图标粘连的动效。
在一种可能的实现方式中，电子设备对第一图标和第二图标执行粘连动效处理时，具体的实现方式可以包括以下步骤s11～s14：
s11、对第一图标和第二图标进行高斯模糊处理，得到第一图像，该第一图像包括高斯模糊处理后的第一图标和第二图标。
在具体实现中，所谓的高斯模糊处理是一种使图片产生模糊效果的算法，使用正态分布来平滑数据，也就是对整幅图像进行加权平均的过程，每一个像素点的值，都由其本身和邻域内的其他像素值经过加权平均后得到。在计算平均值时，取相邻点范围(即模糊半径)越大，模糊效果越强烈。例如，可以采用35个像素点作为模糊半径进行高斯模糊，边界采用重复的方式。具体地，可以采用以下公式(1)计算每个像素点以及周边像素的权重值：
其中，(x,y)为像素坐标，σ为标准差，G(x,y)为像素点的权重值。
示例性地，如图6A所示，此时的第一图标与第二图标之间的距离达到了粘连阈值，然后电子设备会对第一图标和第二图标进行高斯模糊处理，得到如图6B所示的图像，即第一图像。图6B所示的图像中包括高斯模糊处理后的第一图标和第二图标。
s12、对该第一图像中的第一图标和第二图标进行粘粘处理，得到第二图像。
在具体实现中，每个像素点可以包括4个通道，分别是R通道、G通道、B通道和Alpha通道。电子设备会将高斯模糊处理后的第一图标与高斯模糊处理后的第二图标进行叠加处理，其中，两个图标在相交处的Alpha值叠加后会得到一个新的值，此时两个图标可以看成一个整体模糊图像，即第二图像。
s13、对该第二图像进行颜色过滤处理，得到粘粘的第一图标和第二图标。
在具体实现中，所谓的颜色过滤处理是指通过增加像素Alpha对比度，以将模糊的图像转变为清晰的图像。具体地，可以利用以下公式(2)将第二图像的像素转换成新的像素，此时由新的像素组成的图像便是粘粘在一起的第一图标和第二图标。
其中，A为一个预定义4×5的色彩变换矩阵，即每一列分别表示R通道、G通道、B通道、Alpha通道和偏移值；C为第二图像中的像素，即/>P为转换后的新的像素，即/>其中：
R1＝a*R+b*G+c*B+d*A+e
G1＝f*R+g*G+h*B+i*A+j
B1＝k*R+l*G+m*B+n*A+o
A1＝p*R+q*G+r*B+s*A+t
此外，t＝-255*instensity。在本申请实施例中，A可以定义为可以设定instensity＝28，即t＝-255*28＝-7140；s＝60。
示例性地，如图6B所示，此时的第一图标和第二图标可以看成一个整体模糊图像(即第二图像)，然后电子设备对该第二图像进行颜色过滤处理，得到如图6C所示的图像，即粘粘的第一图标和第二图标。基于该方式，能够提高第一图标与第二图标的粘连效果的自然性。
s14、显示该粘粘的第一图标和第二图标。
在具体实现中，电子设备将粘粘的第一图标和第二图标显示在屏幕上，以使用户能够看到第一图标与第二图标进行粘连的动效，即完成了电子设备对第一图标和第二图标执行粘连动效处理。
S402、若在第一图标和第二图标粘粘的情况下该用户继续拖拽第一图标向第二图标移动，且第一设备与第二设备已建立连接，则电子设备将第一图标的颜色渐变为第二图标的颜色。
在本申请实施例中，如图7所示，在确定第一图标和第二图标之间的距离小于或等于粘连阈值(即第一图标与第二图标达到粘连状态)后，若此时用户并未松手，而是继续拖拽第一图标向第二图标移动，那么电子设备需要进一步判断第一设备与第二设备是否建立连接。若此时第一设备与第二设备已建立连接，那么便会在用户拖拽第一图标的时候在颜色渐变区域出现颜色渐变的动效，使得第一图标的颜色渐变为第二图标的颜色。
在一种可能的实现方式中，电子设备将第一图标的颜色渐变为第二图标的颜色时，具体的实现方式可以包括以下步骤s21～s25：
s21、创建目标层图像、遮罩层图像和源层图像。
在具体实现中，遮罩层图像位于目标层图像之上，源层图像位于遮罩层图像之上，遮罩层图像用于遮挡目标层图像，目标层图像的形状、源层图像的形状与第一图标的形状相同，目标层图像和源层图像完全重叠，且目标层图像的颜色为第二图标的颜色，源层图像的颜色为第一图标的原始颜色。
示例性地，电子设备在画布上绘制目标层图像、遮罩层图像和源层图像，如图8所示的侧面图，目标层图像、遮罩层图像和源层图像的层级位置为：遮罩层图像位于目标层图像之上，源层图像位于遮罩层图像之上。目标层图像的形状、源层图像的形状与第一图标的形状相同，均为圆形。其中，目标层图像和源层图像完全重叠，目标层图像的颜色为灰色，即第二图标的颜色；源层图像的颜色为白色，即第一图标的原始颜色。
s22、确定遮罩层图像的第一晕染方向和遮罩层图像移动的中心线。
在具体实现中，该中心线为第一图标的中心点与第二图标的中心点之间的连线，该第一晕染方向与第一图标的第一拖拽方向相反。其中，第一拖拽方向为用户拖拽第一图标靠近第二图标的方向。如图9A所示，中心线为第一图标和第二图标的圆心连线，用户拖拽第一图标向第二图标移动，拖拽的方向为西北方向，那么遮罩层图像的晕染方向为西北方向的相反方向，即东南方向。
s23、在中心线上朝着该第一晕染方向移动该遮罩层图像。
在具体实现中，如图9B所示，随着遮罩层图像在中心线上朝着该第一晕染方向移动，目标层图像被遮挡的范围也不断改变。
可选地，电子设备可以在中心线的预设线段上朝着该第一晕染方向移动该遮罩层图像。又如图9B所示，遮罩层图像的中心点在中心线上移动的路径为从m点移动至n点，实现从遮罩层图像刚好完全遮挡目标层到遮罩层图像刚好完全暴露目标层。
可选地，电子设备在中心线上朝着该第一晕染方向移动该遮罩层时，具体的实现方式可以是：基于该用户对第一图标的拖拽距离在中心线上朝着该第一晕染方向移动该遮罩层图像。也就是说，遮罩层图像会随着第一图标的拖拽而朝着第一晕染方向移动，遮罩层图像移动的距离与第一图标的拖拽距离相关。基于这样的方式，通过两个图标距离的转换动态改变遮罩层图像的偏移值以达到跟手渐变第一图标颜色的效果，提供更为生动一致的动效视觉体验。
具体地，在遮罩层图像移动的过程中，遮罩层图像的偏移是通过X轴和Y轴偏移的，根据第一晕染方向可知中心线与X轴和Y轴形成的直角三角形恰好与遮罩层图像在X轴和Y轴的偏移值产生的三角形是等比例三角形。因此，遮罩层图像在X轴上的偏移值可以采用以下公式(3)进行计算，遮罩层图像在Y轴上的偏移值可以采用以下公式(4)进行计算：
其中，c为遮罩层图像在中心线上的位移值，x为第一图标的中心点坐标在X轴上的值与第二图标的中心点坐标在X轴上的值之间的差值，y为第一图标的中心点坐标在Y轴上的值与第二图标的中心点坐标在Y轴上的值之间的差值，d为w为目标层图像的宽度/高度，f为遮罩偏移常量(可以设置为1.1)，X1为遮罩层图像在X轴上的偏移值，Y1为遮罩层图像在Y轴上的偏移值。
s24、基于该目标层图像与遮罩层图像之间未重叠的部分、该源层图像与遮罩层图像之间重叠的部分，得到第一合成图像。
在具体实现中，如图9C所示，图9C是遮罩层图像在移动的过程中的一帧图像，通过计算遮罩层图像在X轴上的偏移值以及遮罩层图像在Y轴上的偏移值便可确定遮罩层图像的位置。由图9C可知，目标层图像与遮罩层图像之间未重叠的部分为A，该源层图像与遮罩层图像之间重叠的部分为B。具体地，可以采用PorterDuff.Mode技术，通过PorterDuff.Mode.DST_OUT模式提取A部分，通过PorterDuff.Mode.DST_ATOP模式提取B部分。然后在画布上将A部分和B部分进行合成，得到如图9D所示的第一合成图像。
需要说明的是，遮罩层图像可以采用一个渐变球，以使得A部分与B部分相交区域呈现渐变晕染效果，有利于提高用户的视觉体验。
s25、在移动该遮罩层图像的过程中显示多帧第一合成图像。
在具体实现中，在移动该遮罩层的过程中可以实时获取到遮罩层图像的偏移值，即可获取到遮罩层图像每次移动的位置，从而基于该目标层图像与遮罩层图像之间未重叠的部分、该源层图像与遮罩层图像之间重叠的部分，便可得到多帧第一合成图像。随着用户拖拽第一图标向第二图标移动，遮罩层图像便会在中心线上朝着第一晕染方向进行同步移动，并在屏幕上实时显示多帧第一合成图像(如图9E中的4帧第一合成图像)，以给用户产生跟手渐变第一图标颜色的效果，实现将第一图标的颜色渐变为第二图标的颜色的过程，更有个性化设计，体现一种自然交互的效果。
在一种可能的实现方式中，电子设备将第一图标的颜色渐变为第二图标的颜色之后，该方法还包括：若该用户拖拽第一图标远离第二图标，则电子设备将第一图标的颜色渐变为第一图标的原始颜色。也就是说，第一图标的颜色渐变过程是可逆的，在用户拖拽第一图标靠近第二图标，使得第一图标的颜色渐变为第二图标的颜色之后，用户也可以拖拽第一图标远离第二图标，使得第一图标的颜色渐变为第一图标的原始颜色。基于该方式，在拖拽第一图标远离第二图标时，也能够实现跟手渐变第一图标颜色，以达到跟手褪色为第一图标的原始颜色的目的。
可选地，电子设备将第一图标的颜色渐变为第一图标的原始颜色时，具体的实现方式可以是：确定遮罩层的褪色方向，该褪色方向与第一图标的第二拖拽方向相反；在中心线上朝着该褪色方向移动该遮罩层；基于该目标层图像与遮罩层图像之间未重叠的部分、该源层图像与遮罩层图像之间重叠的部分，得到第四合成图像；在移动该遮罩层的过程中显示多帧第四合成图像。其中，第二拖拽方向便是用户拖拽第一图标远离第二图标的方向。
如图10A所示，随着用户拖拽第一图标远离第二图标，遮罩层图像便会在中心线上朝着褪色方向进行同步移动，在移动该遮罩层的过程中可以实时获取到遮罩层图像的偏移值，即可获取到遮罩层图像每次移动的位置，可以参考上述步骤s24所描述的具体实现方式，合成多帧第四合成图像，在此不做赘述。并且在屏幕上实时显示多帧第四合成图像(如图10B中的4帧第四合成图像)，以给用户产生跟手渐变第一图标颜色的效果，实现将第一图标的颜色褪色为第一图标的原始颜色的过程。
在一种可能的实现方式中，该方法还包括：电子设备将第一图标的颜色渐变为第二图标的颜色之后，可以将第一图标绕着第二图标进行移动。基于该方式，能够提高用户的视觉体验。
在一种可能的实现方式中，该方法还包括：若在第一图标和第二图标粘粘的情况下该用户继续拖拽第一图标向第二图标移动，且第一设备与第二设备未建立连接，则电子设备继续检测第一图标与第二图标之间的距离是否小于或等于粘连阈值。
S403、若在第一图标和第二图标粘粘的情况下该用户停止拖拽第一图标，且第一图标与第二图标之间的粘连宽度大于或等于第一阈值，且第一设备与第二设备未建立连接，则电子设备以呼吸的方式对第一图标的颜色进行渐变。
在本申请实施例中，如图11A所示，在确定第一图标和第二图标之间的距离小于或等于粘连阈值(即第一图标与第二图标达到粘连状态)后，若此时用户已松手，即停止拖拽第一图标，那么电子设备需要进一步判断第一图标与第二图标之间的粘连宽度是否大于或等于第一阈值，以及判断第一设备与第二设备是否建立连接。若此时第一图标与第二图标之间的粘连宽度大于或等于第一阈值，并且第一设备与第二设备未建立连接，那么电子设备便会以呼吸的方式对第一图标的颜色进行渐变。其中，此处的呼吸方式是指按照一定规律对第一图标进行着色(即将第一图标的颜色渐变为第二图标的颜色)和对第一图标进行褪色(即将第一图标的颜色渐变为第一图标的原始颜色)。
在一种可能的实现方式中，电子设备以呼吸的方式对第一图标的颜色进行渐变时，具体的实现方式可以包括以下步骤s31～s35：
s31、创建目标层图像、遮罩层图像和源层图像。
在具体实现中，遮罩层图像位于目标层图像之上，源层图像位于遮罩层图像之上，遮罩层图像用于遮挡目标层图像，目标层图像的形状、源层图像的形状与第一图标的形状相同，目标层图像和源层图像完全重叠，且目标层图像的颜色为第二图标的颜色，源层图像的颜色为第一图标的原始颜色。
s32、确定该遮罩层图像移动的中心线。
在具体实现中，该中心线为第一图标的中心点与第二图标的中心点之间的连线。
其中，步骤s31和s32的具体实现方式，可以参考上述步骤s21和s22中的具体实现方式，在此不做赘述。
s33、在中心线上来回移动该遮罩层图像。
在具体实现中，该遮罩层图像的单向移动时长为第二预设时长。可选地，电子设备可以在中心线的预设线段上来回移动该遮罩层图像。
如图9B所示，假设第二预设时长为850ms，该遮罩层图像的中心点可以在850ms内从中心线上的点m移动至点n，然后又在850ms内从中心线上的点n移动至点m。其中，m点到n点的距离为20dp。
s34、基于该目标层图像与遮罩层图像之间未重叠的部分、该源层图像与遮罩层图像之间重叠的部分，得到第二合成图像；
s35、在移动该遮罩层图像的过程中显示多帧第二合成图像。
在具体实现中，在该遮罩层图像在中心线上来回移动的过程中，可以实时获取到遮罩层图像的偏移值，即可获取到遮罩层图像每次移动的位置，可以参考上述步骤s24所描述的具体实现方式，合成多帧第二合成图像，在此不做赘述。并且在屏幕上实时显示多帧第二合成图像(如图11B中的7帧第二合成图像)，即在第二预设时长内将第一图标的颜色渐变为第二图标的颜色，然后又在第二预设时长内将第一图标的颜色渐变为第一图标的原始颜色，不断循环此过程，以给用户产生以呼吸的方式不断渐变第一图标的颜色的效果，提高用户的视觉体验。
可选地，电子设备在移动该遮罩层图像的过程中显示多帧第二合成图像时，具体的实现方式可以是：基于预设动效曲线在移动该遮罩层图像的过程中显示多帧第二合成图像。此处的动效曲线是插值器，是一种数学函数，用于设置动效属性值从初始值过渡到结束值的变化规律。电子设备可以利用预设动效曲线，使得多帧第二合成图像按照预设的变化规律进行显示，以提高第一图标进行颜色渐变动效的自然度，提高用户的视觉体验。例如，预设动效曲线可以采用(0.33，0，0.67，1)的贝塞尔曲线；其中，贝塞尔曲线的起始点可以为(0，0)，贝塞尔曲线的结束点可以为(1，1)，(0.33，0)为该贝塞尔曲线的第一个控制点，(0.67，1)为贝塞尔曲线的第二个控制点。
S404、在以呼吸的方式对第一图标的颜色进行渐变的过程中，若第一设备与第二设备已建立连接，则电子设备在第一预设时长内将第一图标的颜色渐变为第二图标的颜色。
在本申请实施例中，如图11A所示，在以呼吸的方式对第一图标的颜色进行渐变的过程中，需要实时判断第一设备与第二设备是否建立连接。若此时第一设备与第二设备已建立连接，那么电子设备便会在第一预设时长内将第一图标的颜色渐变为第二图标的颜色。
在一种可能的实现方式中，电子设备在第一预设时长内将第一图标的颜色渐变为第二图标的颜色时，具体的实现方式可以包括以下步骤s41～s45：
s41、创建目标层图像、遮罩层图像和源层图像。
在具体实现中，遮罩层图像位于目标层图像之上，源层图像位于遮罩层图像之上，遮罩层图像用于遮挡目标层图像，目标层图像的形状、源层图像的形状与第一图标的形状相同，目标层图像和源层图像完全重叠，且目标层图像的颜色为第二图标的颜色，源层图像的颜色为第一图标的原始颜色。
s42、确定遮罩层的第二晕染方向和遮罩层移动的中心线。
在具体实现中，该中心线为第一图标的中心点与第二图标的中心点之间的连线。
其中，步骤s41和s42的具体实现方式，可以参考上述步骤s21和s22中的具体实现方式，在此不做赘述。
s43、在第一预设时长内在中心线上朝着该第二晕染方向移动该遮罩层。
在具体实现中，该第二晕染方向可以是第二图标的中心点指向第一图标的中心点的方向。第一图标与第二图标达到粘连状态之后，电子设备便可在第一预设时长内在中心线上朝着该第二晕染方向移动该遮罩层。如图12所示，假设第一预设时长为250ms，电子设备可以在250ms内朝着该第二晕染方向将该遮罩层从中心线的m点移动至n点。
s44、基于该目标层图像与遮罩层图像之间未重叠的部分、该源层图像与遮罩层图像之间重叠的部分，得到第三合成图像；
s45、在移动该遮罩层的过程中显示多帧第三合成图像。
在具体实现中，在移动该遮罩层的过程中，可以实时获取到遮罩层图像的偏移值，即可获取到遮罩层图像每次移动的位置，可以参考上述步骤s24所描述的具体实现方式，合成多帧第三合成图像，在此不做赘述。并且在屏幕上实时显示多帧第三合成图像(如图13所示的4帧第三合成图像)，即在第一预设时长内自动将第一图标的颜色渐变为第二图标的颜色，以给用户产生在第一图标与第二图标粘连后自动渐变的效果，提高用户的视觉体验。
可选地，电子设备在移动该遮罩层图像的过程中显示多帧第三合成图像时，具体的实现方式可以是：基于预设动效曲线在移动该遮罩层图像的过程中显示多帧第三合成图像。同理，电子设备也可以利用预设动效曲线，使得多帧第三合成图像按照预设的变化规律进行显示，提高第一图标在第一预设时长内进行颜色渐变动效的自然度，提高用户的视觉体验。例如，预设动效曲线可以采用(0.33，0，0.67，1)的贝塞尔曲线；其中，贝塞尔曲线的起始点可以为(0，0)，贝塞尔曲线的结束点可以为(1，1)，(0.33，0)为该贝塞尔曲线的第一个控制点，(0.67，1)为贝塞尔曲线的第二个控制点。
在图4所描述的方法中，在第一图标与第二图标之间的距离小于或等于粘连阈值时，对第一图标和第二图标执行粘连动效处理；在第一图标和第二图标粘粘的情况下用户继续拖拽第一图标向第二图标移动，且第一设备与第二设备已建立连接时，将第一图标的颜色渐变为第二图标的颜色；在第一图标和第二图标粘粘的情况下用户停止拖拽第一图标，且第一图标与第二图标之间的粘连宽度大于或等于第一阈值，且第一设备与第二设备未建立连接时，以呼吸的方式对第一图标的颜色进行渐变；在以呼吸的方式对第一图标的颜色进行渐变的过程中，若第一设备与第二设备已建立连接时，在第一预设时长内将第一图标的颜色渐变为第二图标的颜色。在不同的情况下，执行不同的动效处理，通过这样的方式能够为用户提供更为生动一致的动效视觉体验以及提高页面个性化，体现一种自然交互的效果。
请参见图14，图14示出了本申请实施例的一种动效处理装置的结构示意图。图14所示的装置可以用于执行上述图4所描述的方法实施例中电子设备的部分或全部功能。其中，该装置还可以为芯片系统。图14所示的动效处理装置1400，可以包括粘连单元1401和渐变单元1402。可选地，该动效处理装置1400还可以包括处理单元，用于处理数据信息。其中：
粘连单元1401，用于若被用户拖拽的第一设备对应的第一图标与第二设备对应的第二图标之间的距离小于或等于粘连阈值，则对第一图标和第二图标执行粘连动效处理，该第一图标和第二图标显示于同一显示界面；
渐变单元1402，用于若在第一图标和第二图标粘粘的情况下该用户继续拖拽第一图标向第二图标移动，且第一设备与第二设备已建立连接，则将第一图标的颜色渐变为第二图标的颜色；
渐变单元1402，用于若在第一图标和第二图标粘粘的情况下该用户停止拖拽第一图标，且第一图标与第二图标之间的粘连宽度大于或等于第一阈值，且第一设备与第二设备未建立连接，则以呼吸的方式对第一图标的颜色进行渐变；
渐变单元1402，用于在以呼吸的方式对第一图标的颜色进行渐变的过程中，若第一设备与第二设备已建立连接，则在第一预设时长内将第一图标的颜色渐变为第二图标的颜色。
在一种可能的实现方式中，渐变单元1402，在将第一图标的颜色渐变为第二图标的颜色之后，还用于：若该用户拖拽第一图标远离第二图标，则将第一图标的颜色渐变为第一图标的原始颜色。
在一种可能的实现方式中，粘连单元1401，在对第一图标和第二图标执行粘连动效处理时，具体可用于：对第一图标和第二图标进行高斯模糊处理，得到第一图像，该第一图像包括高斯模糊处理后的第一图标和第二图标；对该第一图像中的第一图标和第二图标进行粘粘处理，得到第二图像；对该第二图像进行颜色过滤处理，得到粘粘的第一图标和第二图标；显示该粘粘的第一图标和第二图标。
在一种可能的实现方式中，渐变单元1402，在将该第一图标的颜色渐变为第二图标的颜色时，可具体用于：创建目标层图像、遮罩层图像和源层图像，遮罩层图像位于目标层图像之上，源层图像位于遮罩层图像之上，遮罩层图像用于遮挡该目标层图像，目标层图像的形状、源层图像的形状与第一图标的形状相同，目标层图像和源层图像完全重叠，且目标层图像的颜色为第二图标的颜色，源层图像的颜色为第一图标的原始颜色；确定该遮罩层图像的第一晕染方向和该遮罩层图像移动的中心线，该中心线为第一图标的中心点与第二图标的中心点之间的连线，该第一晕染方向与该第一图标的第一拖拽方向相反；在中心线上朝着该第一晕染方向移动该遮罩层图像；基于目标层图像与遮罩层图像之间未重叠的部分、源层图像与遮罩层图像之间重叠的部分，得到第一合成图像；在移动该遮罩层图像的过程中显示多帧第一合成图像。
在一种可能的实现方式中，渐变单元1402，在中心线上朝着该第一晕染方向移动该遮罩层图像时，可具体用于：基于该用户对第一图标的拖拽距离在中心线上朝着该第一晕染方向移动该遮罩层图像。
在一种可能的实现方式中，渐变单元1402，在以呼吸的方式对第一图标的颜色进行渐变时，可具体用于：创建目标层图像、遮罩层图像和源层图像，遮罩层图像位于目标层图像之上，源层图像位于遮罩层图像之上，遮罩层图像用于遮挡目标层图像，目标层图像的形状、源层图像的形状与第一图标的形状相同，目标层图像和源层图像完全重叠，且目标层图像的颜色为第二图标的颜色，源层图像的颜色为第一图标的原始颜色；确定该遮罩层图像移动的中心线，该中心线为第一图标的中心点与第二图标的中心点之间的连线；在中心线上来回移动该遮罩层图像，该遮罩层图像的单向移动时长为第二预设时长；基于目标层图像与遮罩层图像之间未重叠的部分、源层图像与遮罩层图像之间重叠的部分，得到第二合成图像；在移动该遮罩层图像的过程中显示多帧第二合成图像。
在一种可能的实现方式中，渐变单元1402，在移动该遮罩层图像的过程中显示多帧第二合成图像时，可具体用于：基于预设动效曲线在移动该遮罩层图像的过程中显示多帧第二合成图像，该预设动效曲线用于设置动效属性值从初始值过渡到结束值的变化规律。
在一种可能的实现方式中，渐变单元1402，在第一预设时长内将第一图标的颜色渐变为第二图标的颜色时，可具体用于：创建目标层图像、遮罩层图像和源层图像，遮罩层图像位于目标层图像之上，源层图像位于遮罩层图像之上，遮罩层图像用于遮挡目标层图像，目标层图像的形状、源层图像的形状与第一图标的形状相同，目标层图像和源层图像完全重叠，且目标层图像的颜色为第二图标的颜色，源层图像的颜色为第一图标的原始颜色；确定该遮罩层图像的第二晕染方向和该遮罩层图像移动的中心线，该中心线为第一图标的中心点与第二图标的中心点之间的连线；在第一预设时长内在中心线上朝着该第二晕染方向移动该遮罩层图像；基于目标层图像与遮罩层图像之间未重叠的部分、源层图像与遮罩层图像之间重叠的部分，得到第三合成图像；在移动该遮罩层图像的过程中显示多帧第三合成图像。
在一种可能的实现方式中，渐变单元1402，在将第一图标的颜色渐变为第一图标的原始颜色时，可具体用于：确定该遮罩层图像的褪色方向，该褪色方向与第一图标的第二拖拽方向相反；在中心线上朝着该褪色方向移动该遮罩层图像；基于目标层图像与遮罩层图像之间未重叠的部分、源层图像与遮罩层图像之间重叠的部分，得到第四合成图像；在移动该遮罩层图像的过程中显示多帧第四合成图像。
本发明实施例和图4所示方法实施例基于同一构思，其带来的技术效果也相同，具体原理请参照图4所示实施例的描述，在此不赘述。
本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有指令，当其在计算机或处理器上运行时，使得计算机或处理器执行上述任一个方法中的一个或多个步骤。
本申请实施例还提供了一种包含指令的计算机程序产品。当该计算机程序产品在计算机或处理器上运行时，使得计算机或处理器执行上述任一个方法中的一个或多个步骤。
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者通过所述计算机可读存储介质进行传输。所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如，固态硬盘(solid state disk，SSD))等。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，该流程可以由计算机程序来指令相关的硬件完成，该程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法实施例的流程。而前述的存储介质包括：ROM或随机存储记忆体RAM、磁碟或者光盘等各种可存储程序代码的介质。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (12)

1.一种动效处理方法，其特征在于，所述方法包括：
若被用户拖拽的第一设备对应的第一图标与第二设备对应的第二图标之间的距离小于或等于粘连阈值，则对所述第一图标和所述第二图标执行粘连动效处理，所述第一图标和所述第二图标显示于同一显示界面；
若在所述第一图标和所述第二图标粘粘的情况下所述用户继续拖拽所述第一图标向所述第二图标移动，且所述第一设备与所述第二设备已建立连接，则将所述第一图标的颜色渐变为所述第二图标的颜色；
若在所述第一图标和所述第二图标粘粘的情况下所述用户停止拖拽所述第一图标，且所述第一图标与所述第二图标之间的粘连宽度大于或等于第一阈值，且所述第一设备与所述第二设备未建立连接，则以呼吸的方式对所述第一图标的颜色进行渐变；
在以呼吸的方式对所述第一图标的颜色进行渐变的过程中，若所述第一设备与所述第二设备已建立连接，则在第一预设时长内将所述第一图标的颜色渐变为所述第二图标的颜色。
2.根据权利要求1所述的方法，其特征在于，所述将所述第一图标的颜色渐变为所述第二图标的颜色之后，所述方法还包括：
若所述用户拖拽所述第一图标远离所述第二图标，则将所述第一图标的颜色渐变为所述第一图标的原始颜色。
3.根据权利要求1或2所述的方法，其特征在于，所述对所述第一图标和所述第二图标执行粘连动效处理，包括：
对所述第一图标和所述第二图标进行高斯模糊处理，得到第一图像，所述第一图像包括高斯模糊处理后的第一图标和第二图标；
对所述第一图像中的第一图标和第二图标进行粘粘处理，得到第二图像；
对所述第二图像进行颜色过滤处理，得到粘粘的第一图标和第二图标；
显示所述粘粘的第一图标和第二图标。
4.根据权利要求1所述的方法，其特征在于，所述将所述第一图标的颜色渐变为所述第二图标的颜色，包括：
创建目标层图像、遮罩层图像和源层图像，所述遮罩层图像位于所述目标层图像之上，所述源层图像位于所述遮罩层图像之上，所述遮罩层图像用于遮挡所述目标层图像，所述目标层图像的形状、所述源层图像的形状与所述第一图标的形状相同，所述目标层图像和所述源层图像完全重叠，且所述目标层图像的颜色为所述第二图标的颜色，所述源层图像的颜色为所述第一图标的原始颜色；
确定所述遮罩层图像的第一晕染方向和所述遮罩层图像移动的中心线，所述中心线为所述第一图标的中心点与所述第二图标的中心点之间的连线，所述第一晕染方向与所述第一图标的第一拖拽方向相反；
在所述中心线上朝着所述第一晕染方向移动所述遮罩层图像；
基于所述目标层图像与所述遮罩层图像之间未重叠的部分、所述源层图像与所述遮罩层图像之间重叠的部分，得到第一合成图像；
在移动所述遮罩层图像的过程中显示多帧所述第一合成图像。
5.根据权利要求4所述的方法，其特征在于，所述在所述中心线上朝着所述第一晕染方向移动所述遮罩层图像，包括：
基于所述用户对所述第一图标的拖拽距离在所述中心线上朝着所述第一晕染方向移动所述遮罩层图像。
6.根据权利要求1所述的方法，其特征在于，所述以呼吸的方式对所述第一图标的颜色进行渐变，包括：
创建目标层图像、遮罩层图像和源层图像，所述遮罩层图像位于所述目标层图像之上，所述源层图像位于所述遮罩层图像之上，所述遮罩层图像用于遮挡所述目标层图像，所述目标层图像的形状、所述源层图像的形状与所述第一图标的形状相同，所述目标层图像和所述源层图像完全重叠，且所述目标层图像的颜色为所述第二图标的颜色，所述源层图像的颜色为所述第一图标的原始颜色；
确定所述遮罩层图像移动的中心线，所述中心线为所述第一图标的中心点与所述第二图标的中心点之间的连线；
在所述中心线上来回移动所述遮罩层图像，所述遮罩层图像的单向移动时长为第二预设时长；
基于所述目标层图像与所述遮罩层图像之间未重叠的部分、所述源层图像与所述遮罩层图像之间重叠的部分，得到第二合成图像；
在移动所述遮罩层图像的过程中显示多帧所述第二合成图像。
7.根据权利要求6所述的方法，其特征在于，所述在移动所述遮罩层图像的过程中显示多帧所述第二合成图像，包括：
基于预设动效曲线在移动所述遮罩层图像的过程中显示多帧所述第二合成图像，所述预设动效曲线用于设置动效属性值从初始值过渡到结束值的变化规律。
8.根据权利要求1所述的方法，其特征在于，所述在第一预设时长内将所述第一图标的颜色渐变为所述第二图标的颜色，包括：
创建目标层图像、遮罩层图像和源层图像，所述遮罩层图像位于所述目标层图像之上，所述源层图像位于所述遮罩层图像之上，所述遮罩层图像用于遮挡所述目标层图像，所述目标层图像的形状、所述源层图像的形状与所述第一图标的形状相同，所述目标层图像和所述源层图像完全重叠，且所述目标层图像的颜色为所述第二图标的颜色，所述源层图像的颜色为所述第一图标的原始颜色；
确定所述遮罩层图像的第二晕染方向和所述遮罩层图像移动的中心线，所述中心线为所述第一图标的中心点与所述第二图标的中心点之间的连线；
在第一预设时长内在所述中心线上朝着所述第二晕染方向移动所述遮罩层图像；
基于所述目标层图像与所述遮罩层图像之间未重叠的部分、所述源层图像与所述遮罩层图像之间重叠的部分，得到第三合成图像；
在移动所述遮罩层图像的过程中显示多帧所述第三合成图像。
9.根据权利要求4所述的方法，其特征在于，所述将所述第一图标的颜色渐变为所述第一图标的原始颜色，包括：
确定所述遮罩层图像的褪色方向，所述褪色方向与所述第一图标的第二拖拽方向相反；
在所述中心线上朝着所述褪色方向移动所述遮罩层图像；
基于所述目标层图像与所述遮罩层图像之间未重叠的部分、所述源层图像与所述遮罩层图像之间重叠的部分，得到第四合成图像；
在移动所述遮罩层图像的过程中显示多帧所述第四合成图像。
10.一种电子设备，其特征在于，包括：一个或多个处理器，一个或多个存储器；其中，一个或多个存储器与一个或多个处理器耦合，所述一个或多个存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令，当所述一个或多个处理器在执行所述计算机指令时，使得所述电子设备执行如权利要求1-9中任一项所述的方法。
11.一种计算机存储介质，其特征在于，所述计算机存储介质存储有计算机程序，所述计算机程序包括程序指令，当所述程序指令在电子设备上运行时，使得所述电子设备执行如权利要求1-9中任一项所述的方法。
12.一种计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如权利要求1-9中任一项所述的方法。
CN202211306561.5A 2022-10-25 2022-10-25 动效处理方法及电子设备 Active CN116700555B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211306561.5A CN116700555B (zh) 2022-10-25 2022-10-25 动效处理方法及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211306561.5A CN116700555B (zh) 2022-10-25 2022-10-25 动效处理方法及电子设备

Publications (2)

Publication Number Publication Date
CN116700555A CN116700555A (zh) 2023-09-05
CN116700555B true CN116700555B (zh) 2023-12-05

Family

ID=87828163

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211306561.5A Active CN116700555B (zh) 2022-10-25 2022-10-25 动效处理方法及电子设备

Country Status (1)

Country Link
CN (1) CN116700555B (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110750197A (zh) * 2019-10-17 2020-02-04 广州视源电子科技股份有限公司 文件共享方法、装置、系统、相应设备及存储介质
CN110908765A (zh) * 2019-11-29 2020-03-24 五八有限公司 一种界面显示方法、装置、终端设备及存储介质
CN113391751A (zh) * 2021-05-25 2021-09-14 腾讯科技（深圳）有限公司 界面展示方法、装置和存储介质及电子设备
CN114527901A (zh) * 2020-10-31 2022-05-24 华为技术有限公司 一种文件拖拽方法及电子设备

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103677526B (zh) * 2013-12-17 2019-06-28 北京猎豹移动科技有限公司 一种交互方法、客户端装置、移动终端及服务器
US9854654B2 (en) * 2016-02-03 2017-12-26 Pqj Corp System and method of control of a programmable lighting fixture with embedded memory

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110750197A (zh) * 2019-10-17 2020-02-04 广州视源电子科技股份有限公司 文件共享方法、装置、系统、相应设备及存储介质
CN110908765A (zh) * 2019-11-29 2020-03-24 五八有限公司 一种界面显示方法、装置、终端设备及存储介质
CN114527901A (zh) * 2020-10-31 2022-05-24 华为技术有限公司 一种文件拖拽方法及电子设备
CN113391751A (zh) * 2021-05-25 2021-09-14 腾讯科技（深圳）有限公司 界面展示方法、装置和存储介质及电子设备

Also Published As

Publication number Publication date
CN116700555A (zh) 2023-09-05

Similar Documents

Publication Publication Date Title
CN112269527B (zh) 应用界面的生成方法及相关装置
CN115473957B (zh) 一种图像处理方法和电子设备
CN111553846B (zh) 超分辨率处理方法及装置
CN113643186A (zh) 一种图像增强方法及电子设备
WO2022262475A1 (zh) 拍摄方法、图形用户界面及电子设备
WO2023130921A1 (zh) 一种适配多设备的页面布局的方法及电子设备
CN113837920A (zh) 一种图像渲染方法及电子设备
CN116700555B (zh) 动效处理方法及电子设备
CN117769696A (zh) 显示方法、电子设备、存储介质和程序产品
CN116688494B (zh) 生成游戏预测帧的方法和电子设备
CN115484392B (zh) 一种拍摄视频的方法及电子设备
CN116672707B (zh) 生成游戏预测帧的方法和电子设备
CN116757963B (zh) 图像处理方法、电子设备、芯片系统及可读存储介质
CN115484390B (zh) 一种拍摄视频的方法及电子设备
WO2023241544A1 (zh) 组件预览的方法和电子设备
EP4296845A1 (en) Screen projection method and system, and related apparatus
WO2024094063A1 (zh) 截屏处理方法及电子设备
WO2022247664A1 (zh) 图形界面显示方法、电子设备、介质以及程序产品
CN118034559A (zh) 截屏处理方法及电子设备
CN116737291A (zh) 桌面应用的处理方法和电子设备
CN117950846A (zh) 资源调度方法及相关装置
CN118043836A (zh) 一种广告归因的系统、方法以及装置
CN117372089A (zh) 一种广告归因的系统、方法以及装置
CN117692714A (zh) 视频显示方法和电子设备
CN117764853A (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