一种图标处理方法、终端设备及存储介质与流程

1.本技术涉及人机交互领域，尤其涉及一种图标处理方法、终端设备及存储介质。


背景技术：

2.在具备滑动接听电话功能的终端设备中，来电界面可以显示拒接图标、接听图标和控制图标。用户可以将控制图标向拒接图标拖动，以拒接来电，或者将控制图标向接听图标拖动，以接听来电。
3.在用户将控制图标向拒接图标或接听图标拖动的过程中，来电界面内的控制图标会随着用户的拖动而移动。直至控制图标移动到拒接图标或接听图标的位置，终端设备拒接或接听电话。这期间来电界面的动画效果较为单一，缺乏灵活性。使得用户人机交互操作单一，用户人机交互体验较差。


技术实现要素：

4.有鉴于此，本技术实施例提供了图标处理方法、终端设备及存储介质，可以解决来电界面的动画效果较为单一的问题。
5.本技术实施例的第一方面提供了一种图标处理方法，来电界面内包含控制图标和目标图标，目标图标为接听图标或者拒接图标。方法包括：在控制图标移动过程中，当检测到控制图标与目标图标相交时，基于相交区域对控制图标和目标图标进行融合处理。刷新来电界面，叠加显示融合处理后的控制图标和目标图标。
6.在本技术实施例中，通过在控制图标移动的过程中，对相交的控制图标和目标图标进行融合。从而使得控制图标与目标图标整个相交的动态过程中，可以实现实时动态的融合动画效果。使得来电过程中来电界面内的动画效果更为丰富，使得用户在使用过程中的人机交互效果更佳，人机交互体验更佳。
7.在第一方面的第一种可能的实现方式中，控制图标包含图层1，目标图标包含图层2和图层3，图层1为圆形的蒙版层，图层2为圆形的图案层，图层3为电话形状的图案层，图层2的内容仅在图层1的圆形覆盖区域内可以显示。
8.基于相交区域对控制图标和目标图标进行融合处理，包括：对图层1在相交区域内的内容和图层3在相交区域内的内容进行模糊化处理。
9.对模糊化处理后的图层1和图层2在相交区域内的内容进行平滑混色，得到平滑混色处理后的图层1，完成对控制图标和目标图标的融合处理。
10.相应的，刷新来电界面，叠加显示融合处理后的控制图标和目标图标，包括：刷新来电界面，叠加显示平滑混色处理后的图层1和模糊化处理后的图层3。
11.在本技术实施例中，通过对图层1和图层3进行模糊化处理，使得图层1和图层3在相交区域内的边界会变得相对模糊。因此两者的边界感会减弱，边界处的线条更加顺畅自然，从而使得融合过程的视觉效果上更为自然顺畅。同时对图层1和图层2进行平滑混色，且
对图层2进行蒙版遮蔽。可以使得相交区域内的像素点像素值过渡自然，实现图层间自然不突兀的融合效果，从而极大地提示了图标融合的动画效果丰富性和生动灵活性，提升了用户的人机交互效果。
12.作为本技术的一个实施例，图层2的圆形半径大等于图层3外接圆形半径，且图层2的圆形圆心与图层3外接圆形圆心位置相同。
13.在本技术实施例，图层2的半径大等于图层3，且圆心位置相同。使得图层2的圆形可以覆盖住图层3的图案，因此使得控制图标和目标图标开始接触时，图层2即可以第一时间与控制图标相交。从而使得整个相交融合的过程更加自然。
14.在第一方面的第二种可能的实现方式中，图层2和图层3的颜色相同。对模糊化处理后的图层1和图层2在相交区域内的内容进行平滑混色，包括：根据第一像素点在图层2内对应的rgba通道内的主要颜色分量值，确定其对应的平滑系数。第一像素点为相交区域内的任意像素点，主要颜色分量值为rgba通道包含的r值、g值和b值中的最大值。
15.基于平滑系数，对第一像素点在模糊化处理后的图层1中的像素值，和在图层2中的像素值进行混色，得到混色后第一像素点的像素值，完成对第一像素点的平滑混色。
16.在本技术实施例中，图层2和图层3的颜色相同，且基于像素点在图层2内对应的rgba通道内的主要颜色分量值（亦即为图层3电话图案的主要颜色分量）进行平滑混色，可以让图层3中的电话图案可以更加自然的融合到控制图标中。使得整体混色效果更为自然。
17.作为本技术的一个实施例，对第一像素点在模糊化处理后的图层1中的像素值，和在图层2中的像素值进行混色，包括利用以下公式对第一像素点进行平滑混色：mixi=mix(srccolori，dstcolori，a)其中，mixi是第一像素点平滑混色后的像素值，srccolori是第一像素点在模糊化处理后的图层1中的像素值，dstcolori是第一像素点在放大处理后的图层2中的像素值。
18.作为本技术的一个实施例，控制图标还包含图层4，图层4为颜色与图层3不相同的电话形状的图案层。
19.由于图层2和图层3为相同颜色，因此控制图标和目标图标重合后，图层3的电话形状图案会融于图层2之中。通过在控制图标内增加颜色不同的电话形状团，可以提升最终的显示动画的提醒效果，使得动画效果更加丰富且人性化，提升人机交互体验。
20.作为本技术的一个实施例，图层1的颜色为灰色。
21.在第一方面的第三种可能的实现方式中，根据第一像素点在图层2对应的rgba通道内的主要颜色分量值，确定对应的平滑系数，包括：利用以下公式确定平滑系数：a=smoothstep(0，b，dstcolori.c)其中，a为平滑系数，smoothstep（）为平滑函数，b为常量系数，dstcolori.c为第一像素点对应的主要颜色分量值的归一化值，b∈（0，1]。
22.在本技术实施例中，通过平滑函数smoothstep实现了对图层的有效平滑过渡。
23.作为一个可选实施例，将图层2中圆心的像素值和最边缘的像素值取均值并归一化处理后作为b。以提升平滑过渡的流畅性。
24.在第一方面的第四种可能的实现方式中，图层2和图层3均为单种颜色。图层2的圆
形包含内圆区域和边缘区域，其中，边缘区域内有效像素点的密度低于内圆区域内有效像素点的密度，且边缘区域内有效像素点的密度，与到图层2的圆形边界的距离呈负相关。有效像素点为非透明的像素点。
25.在本技术实施例中，图层2具有渐变模糊的效果，使得融合时先于密度较低的边缘区域进行融合，并逐步提升融合区域的像素点密度。可以让整个图标融合的过程更加自然不突兀，提升视觉效果。
26.在第一方面的第五种可能的实现方式中，在对模糊化处理后的图层1和图层2在相交区域内的内容进行平滑混色之前，还包括：获取控制图标的位移数据，并基于位移数据对图层2进行放大处理。其中，当图层1和图层2的圆心重合时，放大处理后的内圆区域半径，大等于图层1的圆形半径。
27.对模糊化处理后的图层1和图层2在相交区域内的内容进行平滑混色，得到平滑混色处理后的图层1，包括：对模糊化处理后的图层1和放大处理后的图层2在相交区域内的内容进行平滑混色，得到平滑混色处理后的图层1。
28.在本技术实施例中，在控制图标位移的过程中逐渐放大目标图标的图层2。使得在控制图标与目标图标重合，即图层2的圆心与图层1的圆心重合时，图层2的内圆可以覆盖图层1的圆形。使得最终图层2显示出的效果为纯色无渐变圆形。可以提醒用户成功将控制图标移动至目标图标，起到图示提醒效果，提升动画效果及人机交互效果。
29.在第一方面的第六种可能的实现方式中，基于位移数据对图层2进行放大处理，包括：根据位移数据确定缩放变量。
30.基于缩放变量对图层2包含的像素点的原始坐标进行坐标扩张，得到对应的目标坐标。
31.将图层2包含的像素点的像素值，赋值给对应的目标坐标处的像素点，完成对图层2的放大处理。
32.本技术实施例通过像素坐标扩展的方式，实现了对图层2图案的放大。
33.作为本技术的一个实施例，像素点坐标扩张公式：目标坐标 = (2
×
像素点原始坐标 scale
ꢀ‑ꢀ
1) / (2
×
scale)其中，scale为缩放变量，取值范围为（0，2.5]，且scale与移动距离呈斜率大于0的线性相关。例如在一些实施例中，可以设置为：scale=2.5
×
（d1-d3）/d2。其中d1为控制图标的总移动距离，d2为控制图标与目标图标接触时的最大圆心间距离，d3是控制图标在与目标图标接触前的移动距离。
34.本技术实施例的第二方面提供了一种图标处理方法，来电界面内包含控制图标和目标图标，目标图标为接听图标或者拒接图标。控制图标包含图层1，目标图标包含图层2和图层3，图层1为圆形的蒙版层，图层2为圆形的图案层，图层3为电话形状的图案层，图层2的内容仅在图层1的覆盖区域内可以显示。方法包括：当检测到控制图标移动时，创建视图glsurfaceview替换来电界面的当前视图。
35.当检测到控制图标与目标图标相交时，调用渲染器glcallrender。
36.通过glcallrender加载片元着色器。
37.通过片元着色器，对图层1在相交区域内的内容和图层3在相交区域内的内容进行
模糊化处理。
38.通过片元着色器，对模糊化处理后的图层1和图层2在相交区域内的内容进行平滑混色，得到平滑混色处理后的图层1。
39.刷新来电界面，叠加显示平滑混色处理后的图层1和模糊化处理后的图层3。
40.在本技术实施例中，还可以实现如上述第一方面任一项的方法。
41.本技术实施例的第三方面提供了一种图标处理装置，来电界面内包含控制图标和目标图标，目标图标为接听图标或者拒接图标。装置包括：融合模块，用于在控制图标移动过程中，当检测到控制图标与目标图标相交时，基于相交区域对控制图标和目标图标进行融合处理。
42.显示模块，用于刷新来电界面，叠加显示融合处理后的控制图标和目标图标。
43.第四方面，本技术实施例提供一种终端设备，包括存储器、处理器以及存储在存储器中并可在处理器上运行的计算机程序，处理器执行计算机程序时实现如上述第一方面任一项的方法。
44.第五方面，本技术实施例提供一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序被处理器执行时实现如上述第一方面任一项的方法。
45.第六方面，本技术实施例提供一种芯片系统，该芯片系统包括处理器，处理器与存储器耦合，处理器执行存储器中存储的计算机程序，以实现如上述第一方面任一项所述的方法。该芯片系统可以为单个芯片，或者多个芯片组成的芯片模组。
46.第七方面，本技术实施例提供一种计算机程序产品，当计算机程序产品在终端设备上运行时，使得终端设备执行上述第一方面任一项所述的方法。
47.可以理解的是，上述第二方面至第七方面的有益效果可以参见上述第一方面中的相关描述，在此不再赘述。
附图说明
48.图1a为本技术实施例提供的手机的结构示意图；图1b为本技术实施例提供的终端设备一种软件结构框图；图2为本技术实施例提供的来电界面的场景示意图；图3a为本技术实施例提供的终端设备一种软件架构框图；图3b为本技术实施例提供的图标处理方法的底层实现时序图；图3c为本技术实施例提供的图标对应图层的一种场景示意图；图3d为本技术实施例提供的图标对应图层的另一种场景示意图；图3e为本技术实施例提供的来电界面的效果示意图；图4为本技术实施例提供的图标处理方法的流程示意图；图5为本技术实施例提供的图标处理方法中进行图标融合的流程示意图；图6a为本技术实施例提供的图层相交的一种场景示意图；图6b为本技术实施例提供的图层相交的另一种场景示意图；图7为本技术实施例提供的图层2的场景示意图；图8a为本技术实施例提供的图标融合效果的一种场景示意图；图8b为本技术实施例提供的图标融合效果的另一种场景示意图；
图9a为本技术实施例提供的图标融合效果的另一种场景示意图；图9b为本技术实施例提供的图层蒙版遮蔽的效果示意图；图10为本技术实施例提供的图标处理装置的结构示意图；图11为本技术实施例提供的终端设备硬件结构示意图。
具体实施方式
49.以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本技术实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本技术。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本技术的描述。
50.本技术实施例提供的图标处理方法可以应用于手机、平板电脑和可穿戴设备等终端设备上，此时终端设备即为本技术实施例提供的图标处理方法的执行主体，本技术实施例对终端设备的具体类型不作任何限制。
51.下文以终端设备是手机为例，图1a示出了手机100的结构示意图。
52.手机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，以及sim卡接口195等。其中传感器模块180可以包括陀螺仪传感器180a，加速度传感器180b，气压传感器180c，磁传感器180d，环境光传感器180e，距离传感器180f，接近光传感器180g、指纹传感器180h，温度传感器180j，触摸传感器180k（当然，手机100还可以包括其它传感器，比如压力传感器、气压传感器、骨传导传感器等，图中未示出）。
53.可以理解的是，本发明实施例示意的结构并不构成对手机100的具体限定。在本技术另一些实施例中，手机100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
54.处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器（application processor，ap)，调制解调处理器，图形处理器（graphics processing unit， gpu)，图像信号处理器（image signal processor，isp)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，dsp)，基带处理器，和/或神经网络处理器( neural-network processing unit，npu)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。其中，控制器可以是手机100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。
55.处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。
56.处理器110可以运行本技术实施例提供的图标处理方法，以便于丰富来电界面的
动画效果，提升灵活度，提升用户的体验。处理器110可以包括不同的器件，比如集成cpu和gpu时，cpu和gpu可以配合执行本技术实施例提供的图标处理方法，比如图标处理方法中部分算法由cpu执行，另一部分算法由gpu执行，以得到较快的处理效率。
57.显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(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个显示屏194，n为大于1的正整数。显示屏194可用于显示由用户输入的信息或提供给用户的信息以及各种图形用户界面（graphical user interface，gui）。例如，显示屏194可以显示照片、视频、网页、或者文件等。再例如，显示屏194可以显示图形用户界面。其中图形用户界面上包括状态栏、可隐藏的导航栏、时间和天气小组件（widget）、以及应用的图标，例如浏览器图标等。状态栏中包括运营商名称（例如中国移动）、移动网络（例如4g）、时间和剩余电量。导航栏中包括后退（back）键图标、主屏幕（home）键图标和前进键图标。此外，可以理解的是，在一些实施例中，状态栏中还可以包括蓝牙图标、wi-fi图标、外接设备图标等。还可以理解的是，在另一些实施例中，图形用户界面中还可以包括dock栏，dock栏中可以包括常用的应用图标等。当处理器检测到用户的手指（或触控笔等）针对某一应用图标的触摸事件后，响应于该触摸事件，打开与该应用图标对应的应用的用户界面，并在显示屏194上显示该应用的用户界面。
58.在本技术实施例中，显示屏194可以是一个一体的柔性显示屏，也可以采用两个刚性屏以及位于两个刚性屏之间的一个柔性屏组成的拼接显示屏。当处理器110运行本技术实施例提供的图标处理方法后，处理器110可以控制外接的音频输出设备切换输出的音频信号。
59.摄像头193（前置摄像头或者后置摄像头，或者一个摄像头既可作为前置摄像头，也可作为后置摄像头）用于捕获静态图像或视频。通常，摄像头193可以包括感光元件比如镜头组和图像传感器，其中，镜头组包括多个透镜（凸透镜或凹透镜），用于采集待拍摄物体反射的光信号，并将采集的光信号传递给图像传感器。图像传感器根据所述光信号生成待拍摄物体的原始图像。
60.内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行手机100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，应用程序(比如相机应用，微信应用等)的代码等。存储数据区可存储手机100使用过程中所创建的数据(比如相机应用采集的图像、视频等)等。
61.内部存储器121还可以存储本技术实施例提供的图标处理方法对应的一个或多个计算机程序1210。该一个或多个计算机程序1210被存储在上述存储器121中并被配置为被该一个或多个处理器110执行，该一个或多个计算机程序1210包括指令，上述指令可以用于执行如图3b至图5相应实施例中的各个步骤。当内部存储器121中存储的图标处理方法的代码被处理器110运行时，处理器110可以控制终端设备进行图标数据处理。
62.此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，ufs)等。
63.当然，本技术实施例提供的图标处理方法的代码还可以存储在外部存储器中。这种情况下，处理器110可以通过外部存储器接口120运行存储在外部存储器中的图标处理方法的代码，处理器110可以控制终端设备进行图标数据处理。
64.下面介绍传感器模块180的功能。
65.陀螺仪传感器180a，可以用于确定手机100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180a确定手机100围绕三个轴(即，x，y和z轴)的角速度。即陀螺仪传感器180a可以用于检测手机100当前的运动状态，比如抖动还是静止。
66.当本技术实施例中的显示屏为可折叠屏时，陀螺仪传感器180a可用于检测作用于显示屏194上的折叠或者展开操作。陀螺仪传感器180a可以将检测到的折叠操作或者展开操作作为事件上报给处理器110，以确定显示屏194的折叠状态或展开状态。
67.加速度传感器180b可检测手机100在各个方向上(一般为三轴)加速度的大小。即陀螺仪传感器180a可以用于检测手机100当前的运动状态，比如抖动还是静止。当本技术实施例中的显示屏为可折叠屏时，加速度传感器180b可用于检测作用于显示屏194上的折叠或者展开操作。加速度传感器180b可以将检测到的折叠操作或者展开操作作为事件上报给处理器110，以确定显示屏194的折叠状态或展开状态。
68.接近光传感器180g可以包括例如发光二极管(led)和光检测器，例如光电二极管。发光二极管可以是红外发光二极管。手机通过发光二极管向外发射红外光。手机使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时，可以确定手机附近有物体。当检测到不充分的反射光时，手机可以确定手机附近没有物体。当本技术实施例中的显示屏为可折叠屏时，接近光传感器180g可以设置在可折叠的显示屏194的第一屏上，接近光传感器180g可根据红外信号的光程差来检测第一屏与第二屏的折叠角度或者展开角度的大小。
69.陀螺仪传感器180a（或加速度传感器180b）可以将检测到的运动状态信息（比如角速度）发送给处理器110。处理器110基于运动状态信息确定当前是手持状态还是脚架状态（比如，角速度不为0时，说明手机100处于手持状态）。
70.指纹传感器180h用于采集指纹。手机100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。
71.触摸传感器180k，也称“触控面板”。触摸传感器180k可以设置于显示屏194，由触摸传感器180k与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180k用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180k也可以设置于手机100的表面，与显示屏194所处的位置不同。
72.示例性的，手机100的显示屏194显示主界面，主界面中包括多个应用（比如相机应用、微信应用等）的图标。用户通过触摸传感器180k点击主界面中相机应用的图标，触发处理器110启动相机应用，打开摄像头193。显示屏194显示相机应用的界面，例如取景界面。
73.手机100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块
160，调制解调处理器以及基带处理器等实现。
74.天线1和天线2用于发射和接收电磁波信号。手机100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
75.移动通信模块150可以提供应用在手机100上的包括2g/3g/4g/5g等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，lna)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。在本技术实施例中，移动通信模块150还可以用于与其它终端设备进行信息交互。
76.调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170a，受话器170b等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块150或其他功能模块设置在同一个器件中。
77.无线通信模块160可以提供应用在手机100上的包括无线局域网(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)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。本技术实施例中，无线通信模块160可以用于接入接入点设备，向其它终端设备发送和接收消息。
78.另外，手机100可以通过音频模块170，扬声器170a，受话器170b，麦克风170c，耳机接口170d，以及应用处理器等实现音频功能。例如音乐播放，录音等。手机100可以接收按键190输入，产生与手机100的用户设置以及功能控制有关的键信号输入。手机100可以利用马达191产生振动提示（比如来电振动提示）。手机100中的指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。手机100中的sim卡接口195用于连接sim卡。sim卡可以通过插入sim卡接口195，或从sim卡接口195拔出，实现和手机100的接触和分离。
79.应理解，在实际应用中，手机100可以包括比图1a所示的更多或更少的部件，本技术实施例不作限定。图示手机100仅是一个范例，并且手机100可以具有比图中所示出的更多的或者更少的部件，可以组合两个或更多的部件，或者可以具有不同的部件配置。图中所示出的各种部件可以在包括一个或多个信号处理和/或专用集成电路在内的硬件、软件、或
硬件和软件的组合中实现。
80.终端设备的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本发明实施例以分层架构的android系统为例，示例性说明终端设备的软件结构。图1b是本发明实施例的终端设备的软件结构框图。
81.分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时（android runtime）和系统库，以及内核层。
82.应用程序层可以包括一系列应用程序包。
83.如图1b所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，wlan，蓝牙，音乐，视频，短信息等应用程序。其中，通话应用程序包括电话和其他即时通信类等可以进行通话的应用程序，通话应用程序可以接收呼叫请求并显示来电界面（in call user interface，incallui）。
84.应用程序框架层为应用程序层的应用程序提供应用编程接口（application programming interface，api）和编程框架。应用程序框架层包括一些预先定义的函数。
85.如图1b所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。
86.窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。
87.内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。
88.视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。
89.电话管理器用于提供终端设备的通信功能。例如通话状态的管理（包括接通，挂断等）。
90.资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。
91.通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，终端设备振动，指示灯闪烁等。
92.android runtime包括核心库和虚拟机。android runtime负责安卓系统的调度和管理。
93.核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。
94.应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。
95.系统库可以包括多个功能模块。例如：表面管理器（surface manager），媒体库（media libraries），以及图形硬件（graphic hardware）对应的外部函数库（external library，如图1b中的三维图形处理库（例如：opengl、opengl es）和2d图形引擎（例如：sgl、egl）等），以及hal函数库（如gralloc函数库）等。
96.表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2d和3d图层的融合。
97.媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如：mpeg4， h.164， mp3， aac， amr， jpg， png等。
98.三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。基于opengl es的框架，应用程序框架层可以创建 surfaceview、glsurfaceview等视图。同时可以通过渲染器调用相应的渲染器接口，如调用渲染器glcallrender，并通过glcallrender调用glsurfaceview.renderer接口。
99.2d图形引擎是2d绘图的绘图引擎。
100.内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。android系统是基于linux 内核层的操作系统，因此图1b中的内核层为linux 内核层。其中还可以包含gpu驱动。
101.下面结合手机100基于图标处理的场景，示例性说明手机100软件以及硬件的工作流程。
102.当触摸传感器180k接收到触摸操作，相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件，原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件，通过调用应用程序框架层中资源管理器对来电界面中的图标进行移动以及融合显示。
103.以下对本技术实施例中可能涉及到的一些相关概念进行说明：来电界面：在本技术实施例中，来电界面是指终端设备在接收到呼叫请求时显示的，包含拒接图标、接听图标和控制图标的界面。在一些可选实施例中，来电界面还可以包含其他更多的图标，如用于快捷回复短信的短信图标，以及用于定时提醒用户的提醒图标等。具体可根据实际应用情况确定。其中，本技术实施例不对终端设备显示来电界面时的设备状态要求做过多限定。例如，在一些实施例中，可以设定为终端设备处于锁屏状态下接收到呼叫请求时，显示来电界面。在另一些实施例中，亦可以设定为终端设备处于锁屏状态或处于未锁屏状态下接收到呼叫请求时，均显示来电界面。
104.目标图标：本技术实施例将来电界面中与控制图标相交的图标称为目标图标。因此，具体需根据实际场景情况来确定目标图标具体是何种图标。例如当用户将控制图标向接听图标拖动，使得控制图标与接听图标相交时，目标图标为接听图标。而当控制图标与拒接图标相交时，目标图标则为拒接图标。
105.通话应用程序：是指具有接收呼叫请求并显示来电界面功能的通话类应用程序。如电话应用程序，以及一些可以进行通话的即时通信应用程序等。
106.opengl(open graphics library)意为开放图形库，是一个跨平台的图形api，用于指定3d图形处理硬件中的软硬件编程接口。
107.opengl es(opengl for embedded system)是一个跨平台的2d/3d图形库接口
api，其是opengl的一个子集。
108.顶点着色器（vertex shader）：主要用来对gpu上所绘制物体的形状进行处理的代码片段。通过顶点着色器，终端设备知道顶点应该绘制在具体什么位置。
109.片元着色器（fragment shader）：用于计算像素点颜色，并给像素点填充颜色。
110.像素值：在本技术实施例中，像素值是指像素点的颜色值。
111.圆形的边缘模糊：在本技术实施例中，存在边缘模糊的圆形可划分为内圆和边缘。其中内圆的圆心即为该圆形的圆心，内圆的半径小于该圆形，且内圆的半径与边缘的宽度之和等于该圆形半径。边缘模糊是指，该圆形的边缘区域内有效像素点密度，低于内圆区域内的有效像素点密度。有效像素点是指可显示出的非透明的像素点。其中，内圆半径和边缘宽度的具体值此处不做限定。
112.圆形的边缘渐变模糊：在边缘模糊的基础上，圆形的边缘区域内，有效像素点密度与到该圆形的边界的距离呈负相关。即边缘区域内，越靠近该圆形边界的区域，其有效像素点密度越低。
113.为了更好地理解本技术实施例，以下对本技术实施例进行简要说明：可以参考图2，在具备滑动接听电话功能的终端设备中，来电界面可以显示拒接图标、接听图标和控制图标。用户可以将控制图标向拒接图标拖动，以拒接来电，或者将控制图标向接听图标拖动，以接听来电。
114.在用户将控制图标向拒接图标或接听图标拖动的过程中，来电界面内的控制图标会随着用户的拖动而移动。直至控制图标移动到拒接图标或接听图标的位置，终端设备拒接或接听电话。这期间来电界面中拒接图标和接听图标等图标都是静态不变的，控制图标也仅是简单的在来电界面中位移。无论控制图标移动到何种位置，都不会影响拒接图标或接听图标等图标的显示效果。因此对来电界面中控制图标移动的动画效果较为单一，缺乏灵活性。使得用户交互操作单一，用户交互体验较差。
115.为了丰富来电界面动画效果，本技术实施例中，当有来电时终端设备可显示来电界面。用户可以在来电界面中拖动控制图标至其他图标，如拖动至拒接图标或接听图标。在控制图标移动的过程中，终端设备检测控制图标是否与其他图标相交。当检测到有相交时，终端设备会基于相交区域对于控制图标和相交的目标图标进行融合处理，并刷新显示融合后的控制图标和目标图标。
116.由于控制图标和目标图标相交是一个动态的过程，其会随着控制图标向目标图标的靠近或远离而动态变化。在这个相交的动态过程中，本技术实施例控制图标和目标图标的融合效果也会动态变化。因此本技术实施例可以实现来电过程中生动的动态视觉效果，丰富来电界面中的动画效果，且动画效果更为灵活。从而提升用户操作时的人机交互效果，使得用户在接听或拒接来电的过程中，人机交互体验更佳。
117.本技术实施例可适用于任意具有来电界面的终端设备使用场景之中。以下以通话应用程序的来电界面为例进行实施例说明。其中，本技术实施例会从底层实现原理，以及方案实现细节两个角度，来对本技术所述的技术方案进行具体实施例的说明。
118.一、底层实现原理。
119.图3a示出了本技术实施例中终端设备的系统软件架构图。在图3a的基础上，参考图3b，示出了本技术实施例提供的一种实现图标融合刷新的图标处理方法时序图。详述如
下：终端设备在接收到呼叫请求时，显示来电界面。用户可以在来电界面中拖动控制图标。
120.s101，当检测到用户拖动控制图标时，通话应用程序控制该控制图标移动，并创建视图glsurfaceview替换来电界面当前视图。
121.其中，glsurfaceview继承自surfaceview视图，内嵌的surface负责opengl的渲染。glsurfaceview能完成较为细节的图标绘制，利用glsurfaceview的图标绘制能力，可以实现本技术实施例中所需的图标融合绘制。
122.在检测到用户拖动控制图标的操作时，通话应用程序根据用户的操作，控制对应的控制图标进行移动。例如，向拒接图标或接听图标移动。其中，控制图标的移动轨迹可以是单向的，也可以是往复移动等，具体需根据用户的操作确定。
123.在控制图标移动的过程中，通话应用程序根据控制图标移动对应的位移数据（如移动距离），以及来电界面内其他图标的位置数据，检测控制图标是否与其他图标相交。同时还可以确定出具体相交的图标以及与控制图标相交的区域。
124.s102，若检测到控制图标与其他图标相交，调用渲染器glcallrender，并通过glcallrender调用glsurfaceview.renderer接口。
125.在检测到控制图标与其他图标相交时，本技术实施例通过图形库opengl es创建渲染器glcallrender，对控制图标和相交的目标图标进行融合处理。
126.s103，glcallrender加载顶点着色器和片元着色器，创建程序对象，并将顶点着色器和片元着色器绑定程序对象。
127.步骤s102和s103用于搭建框架，以创建操作的程序对象program，并与图形硬件交互。此时可以通过调用程序对象的方式使用关联的顶点着色器和片元着色器。
128.在本技术实施例中，顶点着色器告诉片元着色器可以绘制的“画布”区域。由片元着色器确定绘制的位置以及绘制内容。
129.s104，片元着色器将控制图标和目标图标转换为纹理进行处理，并根据控制图标和目标图标中包含的图层层级关系，将控制图标和目标图标各分为至少一个图层。
130.本技术实施例中，片元着色器将控制图标和目标图标转换为纹理。使得本技术实施例在进行图标融合和显示时，无需进行图标的重新绘制，而是可以使用纹理的方式进行填充。可以极大地减少图标绘制的工作量，在本技术实施例中，来电界面内的图标均包含一个或多个图层，纹理转换后，每个图层被转换为对应的纹理图片。其中，目标图标包含两个图层：图层2和图层3，且图层2边缘逐渐模糊。
131.作为本技术的一个可选实施例，可以参考图3c或图3d，当目标图标为接听图标时：图层2为一个绿色圆形的图案层，且圆形边缘逐渐模糊，图层3为一个绿色电话形状的图案层。同理，当目标图标为拒接图标时：图层2为一个红色圆形的图案层，且圆形边缘逐渐模糊，图层3为一个红色电话形状的图案层。
132.在一些实施例中，可以参考图3c，控制图标可以包含单个图层：图层1。此时图层1为一个灰色圆形的蒙版层。而在另一些实施例中，可以参考图3d，控制图标可以包含两个图层：图层1和图层4。其中图层1为一个灰色圆形的蒙版层，图层4是一个白色电话形状的图案
层。
133.通过s104，可以将控制图标和目标图标转换为多个图层对应的纹理图片。
134.s105，片元着色器根据位移数据，对控制图标和目标图标的图层进行融合处理，得到控制图标和目标图标对应的各个像素点的坐标及像素值。其中，像素点的坐标及像素值可以存入颜色缓冲区中。
135.在本技术实施例中，由片元着色器负责进行图层融合并确定像素点的具体像素值（即颜色值）。具体而言，片元着色器会根据位移数据，确定出控制图标与目标图标重叠相交的区域。并根据相交区域对应的图层进行混色处理，实现图层之间的融合。再基于融合操作后的各个图层确定出各个像素点的像素值数据，从而得到控制图标和目标图标对应的各个像素点的坐标及像素值。具体可参考具体实现细节部分的实施例说明。
136.s106，片元着色器将控制图标和目标图标对应的各个像素点的坐标及像素值，传入opengl es的程序对象中。将像素值填充至对应坐标的像素点，使得像素点显示相应的颜色。从而实现来电界面每帧的实时刷新。
137.此时采用gpu合成来电界面的画面显示到终端设备屏幕。
138.二、具体实现细节。
139.参考图4，示出了本技术实施例提供的一种具体实现图标融合刷新的图标处理方法流程图。详述如下：s201，终端设备检测到用户在来电界面对控制图标的拖动操作时，根据用户的拖动操作移动控制图标，并检测控制图标是否与其他图标相交。
140.在接收到呼叫请求后，终端设备显示来电界面以供用户操作。其中，作为本技术的一个实施例，可以设置为终端设备在锁屏状态下接收到呼叫请求时，显示本技术实施例中的呼叫请求。
141.用户可以根据需要在来电界面拖动控制图标，以接听电话或拒接电话等。终端设备根据用户的拖动操作同步控制该控制图标进行移动，以响应用户的操作。同时终端设备会根据控制图标的位移数据，检测其是否与其他图标相交。如可以根据位移数据判断控制图标的坐标是否与其他图标的坐标有重叠区域，若有则说明两者相交。其中，相交亦可称为接触或重叠等。即从控制图标和其他图标有接触开始，均可视为本技术实施例中的图标相交。当控制图标和其他图标的边界接触时，相交区域即为相接触的边界区域。
142.当将控制图标还没有移动到与其他图标相交时，来电界面内的控制图标与其他图标相互独立显示。
143.当控制图标移动到与其他图标相交时，本技术实施例则会对控制图标及相交的目标图标进行融合处理，此时则执行s202的操作。
144.s202，当检测到控制图标与目标图标相交时，终端设备基于相交区域对控制图标和目标图标进行融合处理。
145.参考图3d，在本技术实施例中，控制图标包含图层1和图层4。其中图层1为一个灰色圆形的蒙版层，图层4是一个白色电话形状的图案层。目标图标包含图层2和图层3，图层3是一个电话形状的图案层。图层2是一个单色的圆形图案层，且圆形边缘逐渐模糊呈渐变的效果。其中，图层3的颜色需根据具体目标图标的情况确定，图层2的颜色则与图层3的颜色相同。例如，接听图标和拒接图标均包含图层2和图层3。其中对于接听图标，图层2为一个绿
色圆形的图案层，且圆形边缘逐渐模糊呈渐变的效果，图层3为一个绿色电话形状的图案层。对于拒接图标，图层2为一个红色圆形的图案层，且圆形边缘逐渐模糊呈渐变的效果，图层3为一个红色电话形状的图案层。应当理解地，在其他实施例中，控制图标亦可以不包含图层4，如图3c所示实施例。
146.同时在本技术实施例中，为实现更为生动的交互效果，图层2的图案内容仅会在图层1的圆形蒙版覆盖区域内显示，在圆形蒙版以外的内容不显示。因此在控制图标与目标图标未相交时，目标图标可显示图层3的图案内容，但不显示图层2的图案内容。
147.图层2默认大小及位置为：若对图层3构建外接圆，图层2与该外接圆的圆心位置相同，且图层2的半径大于或等于该外接圆半径。图层1默认大小及位置为：若对图层4构建外接圆，图层1与该外接圆的圆心位置相同，且图层1的半径大于或等于该外接圆半径。
148.在满足图3d所示实施例设定条件的基础上，可以参考图3e，是本技术的一个具体实施例中的一种来电界面效果示意图。由图3e可以看出，可以作为目标图标的接听图标和拒接图标，其图层2的内容由于没有被控制图标的图层3所覆盖到，因此均没有显示。
149.参考图5，是本技术实施例提供的实现s202的一种具体实现方式的流程图，详述如下：s2021，对图层1和图层3在相交区域的内容进行模糊化处理。
150.为实现控制图标与目标图标更好的相融效果，本技术实施例会对图层1和图层3相交区域进行模糊化处理，使得两者在接触的边界处变得相对模糊，从而减弱边界感。其中，具体模糊化处理方法的此处不做过多限定。包括但不限于如使用高斯模糊(gaussian blur)、方框模糊(box blur)、移轴模糊(tilt shift blur)或光圈模糊(iris blur)等模糊方法进行模糊化处理。
151.作为本技术的一个实施例，可以采用高斯模糊来实现对图层1和图层的相交区域的分别模糊化处理。此时可以设定对应的高斯滤波核，并通过高斯滤波核对领域内像素点像素值进行加权计算，即可得到高斯模糊处理后的各个像素点像素值。例如在一些实施例中可以设定高斯滤波核为：{1 2 1，2 4 2，1 2 1}，此时对于像素点的像素值计算如下：g(x，y)=(1/16)
×
[f(x-1，y-1) 2f(x，y-1) f(x 1，y-1) 2f(x-1，y) 4f(x，y) 2f(x 1，y) f(x-1，y 1) 2f(x，y 1) f(x 1，y 1)]
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
（1）其中f(x，y)为坐标（x，y）处像素点原始像素值，g(x，y)为坐标（x，y）处像素点高斯模糊处理后的像素值。
[0152]
在利用高斯模糊处理图层1和图层3之后，图层1和图层3在相交区域内的边界会变得相对模糊。因此两者的边界感会减弱，从而使得融合视觉效果上更为自然顺畅。
[0153]
例如可以参考图6a，是对图层1和图层3的开始相交时，未进行高斯模糊处理处理的效果示意图。参考图6b中的图层1和图层3，是对图层1和图层3的开始相交时，进行高斯模糊处理后的融合效果示意图。对比图6a和图6b可以看出，模糊化处理后图层1和图层3相交处的边界是相互融合的，而不是简单的边界叠加，其相交边界处的线条更为顺畅自然，两个图层之间的相融效果更佳。
[0154]
s2022，根据位移数据对图层2进行放大。
[0155]
参考图7，图层2是一个边缘逐渐模糊呈渐变效果的圆形，而边缘渐变模糊可以使
得图层2在与图层1相交过程中，呈现一个渐变过渡的融合效果。从而使得控制图标移动至目标图标的整个过程，融合效果更为生动自然。其中设图层2中圆形的总半径为r1，存在渐变模糊的边缘宽度为r2，为纯色无渐变模糊部分的内圆半径为r3，r1=r2 r3。本技术实施例不对r2和r3的具体大小做过多限定。
[0156]
为了在控制图标与目标图标重合，即图层2的圆心与图层1的圆心重合时，图层2的内圆可以覆盖图层1的圆形。使得最终图层2显示出的效果为纯色无渐变圆形，以提醒用户成功将控制图标移动至目标图标，提升动画效果及人机交互效果。本技术实施例会在图层1位移的过程中逐渐放大图层2，直至最终图层2的圆心与图层1的圆心重合时，图层2的纯色无渐变模糊部分的内圆半径r3，大于或等于图层1的半径r4。
[0157]
为了实现最终的r3大等于r4，同时图层1移动过程中有一个与图层2和图层3逐渐融合的动画效果。本技术实施例会根据控制图标的位移数据确定其移动距离，根据移动距离来逐步放大图层2。其中，图层2放大倍数与移动距离的大小呈正相关，即控制图标移动距离越远，目标图标中的图层2相对其原始状态的放大倍数越大。作为本技术的一个可选实施例，图层2放大倍数与移动距离的大小可以呈斜率大于0的线性相关。
[0158]
作为本技术的一个可选实施例，可以利用以下公式实现将图层2中各个像素点进行扩张映射，从而实现对图层2的放大：像素点目标坐标 = (2
×
像素点原始坐标 scale
ꢀ‑ꢀ
1) / (2
×
scale)
ꢀꢀꢀꢀ
（2）scale为缩放变量，取值范围为（0，2.5]，且scale与移动距离呈斜率大于0的线性相关。例如在一些实施例中，可以设置为：scale=2.5
×
（d1-d3）/d2。其中d1为控制图标的总移动距离，d2为控制图标与目标图标接触时的最大圆心间距离，d3是控制图标在与目标图标接触前的移动距离。此时，当控制图标与目标图标刚接触时，d1-d3趋近于0值，scale趋近于0值。而当控制图标与目标图标圆心重合时，则d1-d3=d2，此时scale=2.5。
[0159]
确定出目标坐标后，将像素点在原始坐标的像素值赋值给目标坐标处的像素点即可完成像素点的扩张，实现图层2的放大。
[0160]
以一实例进行示例说明，假设scale=0.5，像素点i的原始坐标为（1，2）。根据公式（2）可以计算出像素点i对应的目标坐标中x轴坐标=(2
×
1 0.5
ꢀ‑ꢀ
1) / (2
×
0.5)=1.5，y轴坐标=(2
×
2 0.5
‑ꢀ
1) / (2
×
0.5)=3.5。因此像素点i映射的新像素点坐标为（1.5，3.5）。此时可以向该新像素点坐标填充像素点i的像素值，从而实现对图层2的放大。
[0161]
可以理解地，当图层2在放大时，图层2与图层1的相交区域也会应变大，即控制图标与目标图标的相交区域也会变大。
[0162]
s2023，对模糊化处理后的图层1以及放大处理后的图层2进行相交区域的平滑混色，得到图层1和图层2平滑混色后的混色图层。以实现对控制图标和目标图标的融合。
[0163]
在完成模糊化处理和放大处理后，开始对图层1和图层2的相交区域进行混色（即平滑混色），以实现对两个图层的融合。为了方便说明，本技术实施例将图层1和图层2混色后得到的图层称为混色图层。其中应当理解地，由于图层1是图层2的蒙版层，对于图层1覆盖区域外位置的图层2内容不进行显示。因此混色图层的大小仍保持与图层1相同，混色图层亦为平滑混色处理后的图层1。对混色的说明如下：本技术实施例的混色是像素点级别的混色，对于相交区域内的像素点，其实就是对像素点在图层1和图层2对应的像素值进行混色。
[0164]
对于相交区域内任意像素点，首先会根据其在图层2中对应的rgba通道内的目标通道值，计算其对应的计算平滑系数a。再基于平滑系数对像素点在模糊化处理后的图层1中的像素值，和放大处理后的图层2中的像素值，进行加权计算。从而得到相交区域内各个像素点对应的像素值。对于图层1和图层2在相交区域外的像素点，由于2个图层没有相交，因此相应的像素点像素值可以不进行混色，而是保留其原本的像素值。至此可以实现对图层1和图层2的混色，得到混色图层。其中，目标通道值是指图层2的主要颜色分量对应的通道值。
[0165]
作为本技术的一个实施例，对像素点在图层1和图层2对应的像素值混色公式如下：mixi=（1-a）
×
srccolori a
×
dstcolori，a=smoothstep(0，b，dstcolori.c)
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
（3）mixi=（1-a）
×
srccolori a
×
dstcolori 亦可写为mixi=mix(srccolori，dstcolori，a)。
[0166]
其中，mixi是像素点i（亦可称为第一像素点）混色后的像素值，a是平滑系数。srccolori是像素点i在模糊化处理后的图层1中的像素值，dstcolori是放大处理后的图层2中的像素值。dstcolori.c是像素点i在放大处理后的图层2中，对应的rgba通道内的目标通道值的归一化值，即dstcolori.c是dstcolori在rgba通道内的目标通道值的归一化值。如假设目标通道值为g值，此时dstcolori.c=g值/255。其中图层2是一个单色的圆形图案层，目标通道值是指图层2的rgba通道内的主要颜色分量值。例如当目标图标为拒接图标，此时图层2的主要颜色分量为红色，dstcolori.c是dstcolori在rgba通道内r值的归一化值。当目标图标为接听图标，此时图层2的主要颜色分量为绿色，dstcolori.c是dstcolori在rgba通道内g值的归一化值。从而使得混色得到的混色图层可以更好地与目标图标进行融合，提升动画效果。b是常量系数，可根据实际图层2中各个像素点像素值分布情况选定。smoothstep是一个平滑函数，其会在dstcolori.c处于（0，b）范围内时，确定出一个大于0且小于1的平滑系数a。当dstcolori.c小等于0时，a=0。当dstcolori.c大等于b时，a=1。对于常量系数b的取值，作为一个可选实施例，可以将图层2中圆心的像素值和最边缘的像素值取均值并归一化处理后作为b。作为本技术的另一个实施例，b可以设定为0.74，此时可以实现较好的视觉混色效果。
[0167]
对公式（3）进行合并，得到公式（4）：mixi=mix(srccolori，dstcolori，smoothstep(0，b，dstcolori.c))
ꢀꢀꢀꢀꢀ
（4）由于平滑系数a与像素点在图层2中对应的rgba通道内的目标通道值大小，在一定范围内呈正相关。因此在相交区域内混色时，越靠近目标图标的像素点，其混色的结果越接近其在图层2中原本的颜色。反之，越靠近控制图标的像素点，其混色结果越接近其在图层1中原本的颜色。因此混色图层在整个相交区域内的像素点颜色会有较为平滑的过渡，而非简单的直接颜色叠加，从而实现较佳的混色效果。
[0168]
在本技术实施例中，对控制图标和目标图标的融合，关键是对图层1和图层2的融合。因此在完成s2023的操作得到混色图层后，即可实现对控制图标和目标图标的融合作为本技术的一个可选实施例，在进行图标绘制的时候，若选择将图标包含的图层进行纹理化处理。此时每个图层都是纹理图片，上述s2021至s2023的操作，实际是对图层
对应的纹理图片的融合。
[0169]
在对图层进行纹理化处理后，每个图层都是纹理图片。上述图层的融合，实际是对图层对应的纹理图片的融合。
[0170]
应当说明地，步骤s2021至s2023对图层间的混色，可以实现图层间自然不突兀的融合效果，从而极大地提示了图标融合的动画效果丰富性和灵活性，提升了用户的人机交互效果。
[0171]
s203，终端设备刷新来电界面，对融合处理之后的控制图标和目标图标进行叠加显示。
[0172]
其中，在采用图5所示实施例中s2021至s2023的操作实现融合处理时，对融合处理之后的控制图标和目标图标进行叠加显示，是指将混色图层、模糊化处理后的图层3和图层4进行叠加显示。因此最终显示的效果，实际为对图层1和图层2的混色，以及模糊化处理后的图层3和图层4叠加显示的效果。可以参考图8a，是本技术实施例提供的一个混色并叠加显示后的控制图标和目标图标显示效果图。或者参考图8b，是本技术的一个具体实施例中提供的来电界面显示效果对比图。其中图中“进行了图标融合”，是指采用了上述本技术实施例提供的图标处理方法对控制图标和目标图标进行融合处理。从图8a和图8b可以看到，图层1和图层3融合的很自然，边界感极弱。图层1和图层2的相交区域内像素点像素值过渡自然。同时由于图层2和图层3的颜色相同，使得图层3在相交区域内的融入效果自然不突兀，因此融合效果较佳。使得整个控制图标与目标图标相融的结果均较为自然，动画显示效果生动灵活。其中应当理解地，在一些可选实施例中，亦可以选择不进行s2022图层2的放大操作。此时s203可以是指：将混色图层、图层3和图层4进行叠加显示。
[0173]
同时应当理解地，由于用户拖动控制图标与目标图标相交是一个动态的过程。因此上述s201至s203的操作，也会在用户拖动控制图标的过程中不断重复执行，并刷新来电界面进行更新显示。因此实际控制图标与目标图标是一个动态融合显示的过程，从而实现动画效果。
[0174]
可以参考图9a，是本技术实施例提供的一个控制图标和目标图标融合动态变化效果的示意图。其中，箭头标记的顺序依次为控制图标与目标图标：尚未相交、开始相交、相交较少、相交较多、大部分相交以及重合。为了说明图9a中图层1作为图层2蒙版遮蔽的效果，可以参考图9b，假设图层1为透明色仅边界为灰色可见，图层2为灰色。将图层1向图层2移动，此时箭头标记的顺序依次为图层1和图层2：开始相交、大部分相交以及重合。由图9b可以看出，图层2的内容，仅会在图层1圆形覆盖区域内显示。对于图层1覆盖区域外的图层2内容，则不会进行显示，即对用户不可见。
[0175]
由图9a可以看出，本技术实施例中终端设备在显示来电界面后，可以根据用户的拖动操作移动控制图标。并在控制图标与目标图标相交过程中，动态将控制图标与目标图标的图层进行融合和叠加显示。从而使得控制图标与目标图标整个相交的动态过程中，可以实现实时动态且自然的融合动画效果。使得来电过程中来电界面内的动画效果更为丰富且生动灵活。使得用户在使用过程中的人机交互效果更佳，人机交互体验更佳。
[0176]
应当理解地，作为本技术的另一个可选实施例，参考图3c，控制图标中也可以不包含图层4。此时在显示融合后的控制图标和目标图标时，最终显示的效果中不包含图层4的图案内容。如图9a所示实施例中，可以不包含图层4白色电话形状图案。
[0177]
作为本技术的一个可选实施例，可以对图9a所示实施例的整个控制图标和目标图标融合动态变化过程进行录制。再在终端设备接收到来电呼叫请求时，以视频或者动态图等方式播放录制内容，从而丰富后续来电界面的动画效果。
[0178]
对应于上文实施例所述的图标处理方法，图10示出了本技术实施例提供的图标处理装置的结构示意图，为了便于说明，仅示出了与申请实施例相关的部分。在本技术实施例中，来电界面内包含控制图标和目标图标，目标图标为接听图标或者拒接图标。
[0179]
参照图10，该图标处理装置包括：融合模块1001，用于在控制图标移动过程中，当检测到控制图标与目标图标相交时，基于相交区域对控制图标和目标图标进行融合处理。
[0180]
显示模块1002，用于刷新来电界面，叠加显示融合处理后的控制图标和目标图标。
[0181]
作为本技术的一个实施例，控制图标包含图层1，目标图标包含图层2和图层3，图层1为圆形的蒙版层，图层2为圆形的图案层，图层3为电话形状的图案层，图层2的内容仅在图层1的圆形覆盖区域内可以显示。
[0182]
融合模块1001，包括：模糊化模块，用于对图层1在相交区域内的内容和图层3在相交区域内的内容进行模糊化处理。
[0183]
混色模块，用于对模糊化处理后的图层1和图层2在相交区域内的内容进行平滑混色，得到平滑混色处理后的图层1，完成对控制图标和目标图标的融合处理。
[0184]
显示模块1002，具体用于：刷新来电界面，叠加显示平滑混色处理后的图层1和模糊化处理后的图层3。
[0185]
作为本技术的一个实施例，图层2的圆形半径大等于图层3外接圆形半径，且图层2的圆形圆心与图层3外接圆形圆心位置相同。
[0186]
作为本技术的一个实施例，图层2和图层3的颜色相同。混色模块，包括：系数确定模块，用于根据第一像素点在图层2内对应的rgba通道内的主要颜色分量值，确定其对应的平滑系数。第一像素点为相交区域内的任意像素点，主要颜色分量值为rgba通道包含的r值、g值和b值中的最大值。
[0187]
混色子模块，用于基于平滑系数，对第一像素点在模糊化处理后的图层1中的像素值，和在图层2中的像素值进行混色，得到混色后第一像素点的像素值，完成对第一像素点的平滑混色。
[0188]
作为本技术的一个实施例，混色子模块，具体用于：利用以下公式对第一像素点进行平滑混色：mixi=mix(srccolori，dstcolori，a)其中，mixi是第一像素点平滑混色后的像素值，srccolori是第一像素点在模糊化处理后的图层1中的像素值，dstcolori是第一像素点在放大处理后的图层2中的像素值。
[0189]
作为本技术的一个实施例，控制图标还包含图层4，图层4为颜色与图层3不相同的电话形状的图案层。
[0190]
作为本技术的一个实施例，图层1的颜色为灰色。
[0191]
作为本技术的一个实施例，系数确定模块，具体用于：利用以下公式确定平滑系数：
a=smoothstep(0，b，dstcolori.c)其中，a为平滑系数，smoothstep（）为平滑函数，b为常量系数，dstcolori.c为第一像素点对应的主要颜色分量值的归一化值，b∈（0，1]。
[0192]
作为本技术的一个实施例，图层2和图层3均为单种颜色。图层2的圆形包含内圆区域和边缘区域，其中，边缘区域内有效像素点的密度低于内圆区域内有效像素点的密度，且边缘区域内有效像素点的密度，与到图层2的圆形边界的距离呈负相关。有效像素点为非透明的像素点。
[0193]
作为本技术的一个实施例，图像处理装置，还包括：放大模块，用于获取控制图标的位移数据，并基于位移数据对图层2进行放大处理。其中，当图层1和图层2的圆心重合时，放大处理后的内圆区域半径，大等于图层1的圆形半径。
[0194]
混色模块，具体用于：对模糊化处理后的图层1和放大处理后的图层2在相交区域内的内容进行平滑混色，得到平滑混色处理后的图层1。
[0195]
作为本技术的一个实施例，放大模块，包括：变量确定模块，用于根据位移数据确定缩放变量。
[0196]
坐标扩张模块，用于基于缩放变量对图层2包含的像素点的原始坐标进行坐标扩张，得到对应的目标坐标。
[0197]
像素赋值模块，用于将图层2包含的像素点的像素值，赋值给对应的目标坐标处的像素点，完成对图层2的放大处理。
[0198]
作为本技术的一个实施例，像素点坐标扩张公式：目标坐标 = (2
×
像素点原始坐标 scale
ꢀ‑ꢀ
1) / (2
×
scale)。
[0199]
其中，scale为缩放变量，取值范围为（0，2.5]，且scale与移动距离呈斜率大于0的线性相关。例如在一些实施例中，可以设置为：scale=2.5
×
（d1-d3）/d2。其中d1为控制图标的总移动距离，d2为控制图标与目标图标接触时的最大圆心间距离，d3是控制图标在与目标图标接触前的移动距离。
[0200]
本技术实施例提供的图标处理装置中各模块实现各自功能的过程，具体可参考前述图4和图5所示实施例以及其他相关方法实施例的描述，此处不再赘述。
[0201]
需要说明的是，上述装置/单元之间的信息交互、执行过程等内容，由于与本技术方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。
[0202]
应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本技术实施例的实施过程构成任何限定。
[0203]
应当理解，当在本技术说明书和所附权利要求书中使用时，术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
[0204]
还应当理解，在本技术说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
[0205]
如在本技术说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下
文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。
[0206]
另外，在本技术说明书和所附权利要求书的描述中，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。还应理解的是，虽然术语“第一”、“第二”等在文本中在一些本技术实施例中用来描述各种元素，但是这些元素不应该受到这些术语的限制。这些术语只是用来将一个元素与另一元素区分开。例如，第一表格可以被命名为第二表格，并且类似地，第二表格可以被命名为第一表格，而不背离各种所描述的实施例的范围。第一表格和第二表格都是表格，但是它们不是同一表格。
[0207]
在本技术说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本技术的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。
[0208]
本技术实施例提供的图标处理方法可以应用于手机、平板电脑、可穿戴设备、车载设备、增强现实(augmented reality，ar)/虚拟现实(virtual reality，vr)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，umpc)、上网本、个人数字助理(personal digital assistant，pda)等终端设备上，本技术实施例对终端设备的具体类型不作任何限制。
[0209]
作为示例而非限定，当所述终端设备为可穿戴设备时，该可穿戴设备还可以是应用穿戴式技术对日常穿戴进行智能化设计、开发出可以穿戴的设备的总称，如眼镜、手套、手表、服饰及鞋等。可穿戴设备即直接穿在身上，或是整合到用户的衣服或配件的一种便携式设备。可穿戴设备不仅仅是一种硬件设备，更是通过软件支持以及数据交互、云端交互来实现强大的功能。广义穿戴式智能设备包括功能全、尺寸大、可不依赖智能手机实现完整或者部分的功能，如智能手表或智能眼镜等，以及只专注于某一类应用功能，需要和其它设备如智能手机配合使用，如各类进行体征监测的智能手环、智能首饰等。
[0210]
图11是本技术一实施例提供的终端设备的结构示意图。如图11所示，该实施例的终端设备11包括：至少一个处理器110（图11中仅示出一个）、存储器111，所述存储器111中存储有可在所述处理器110上运行的计算机程序112。所述处理器110执行所述计算机程序112时实现上述各个图标处理方法实施例中的步骤，例如图4所示的步骤201至203。或者，所述处理器110执行所述计算机程序112时实现上述各装置实施例中各模块/单元的功能，例如图10所示模块1001至1002的功能。
[0211]
所述终端设备11可以是桌上型计算机、笔记本、掌上电脑及云端服务器等具有通话功能的计算设备。所述终端设备可包括，但不仅限于，处理器110、存储器111。本领域技术人员可以理解，图11仅仅是终端设备11的示例，并不构成对终端设备11的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述终端设备还可以包括输入发送设备、网络接入设备、总线等。
[0212]
所称处理器110可以是中央处理单元（central processing unit，cpu），还可以是
其他通用处理器、数字信号处理器（digital signal processor，dsp）、专用集成电路（application specific integrated circuit，asic）、现成可编程门阵列（field-programmable gate array，fpga）或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
[0213]
所述存储器111在一些实施例中可以是所述终端设备11的内部存储单元，例如终端设备11的硬盘或内存。所述存储器111也可以是所述终端设备11的外部存储设备，例如所述终端设备11上配备的插接式硬盘，智能存储卡（smart media card，smc），安全数字（secure digital，sd）卡，闪存卡（flash card）等。进一步地，所述存储器111还可以既包括所述终端设备11的内部存储单元也包括外部存储设备。所述存储器111用于存储操作系统、应用程序、引导装载程序(bootloader)、数据以及其他程序等，例如所述计算机程序的程序代码等。所述存储器111还可以用于暂时地存储已经发送或者将要发送的数据。
[0214]
另外，所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
[0215]
本技术实施例还提供了一种终端设备，所述终端设备包括至少一个存储器、至少一个处理器以及存储在所述至少一个存储器中并可在所述至少一个处理器上运行的计算机程序，所述处理器执行所述计算机程序时，使所述终端设备实现上述任意各个方法实施例中的步骤。
[0216]
本技术实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现可实现上述各个方法实施例中的步骤。
[0217]
本技术实施例提供了一种计算机程序产品，当计算机程序产品在终端设备上运行时，使得终端设备执行时可实现上述各个方法实施例中的步骤。
[0218]
本技术实施例还提供了一种芯片系统，所述芯片系统包括处理器，所述处理器与存储器耦合，所述处理器执行存储器中存储的计算机程序，以实现上述各个方法实施例中的步骤。
[0219]
所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读存储介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、u盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器（read-only memory，rom）、随机存取存储器（random access memory，ram）、电载波信号、电信信号以及软件分发介质等。
[0220]
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。
[0221]
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本技术的范围。
[0222]
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
[0223]
以上所述实施例仅用以说明本技术的技术方案，而非对其限制；尽管参照前述实施例对本技术进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使对应技术方案的本质脱离本技术各实施例技术方案的精神和范围，均应包含在本技术的保护范围之内。