一种图标处理方法、终端设备及存储介质技术

本申请实施例公开了一种图标处理方法、终端设备及存储介质，适用于人机交互技术领域，该方法包括：在控制图标移动过程中，当检测到控制图标与目标图标相交时，对控制图标和目标图标进行融合处理；刷新来电界面，叠加显示融合处理后的控制图标和目标图标。本申请实施例可以丰富来电界面的动画效果，提升人机交互效果。果。果。

【技术实现步骤摘要】
一种图标处理方法、终端设备及存储介质


[0001]本申请涉及人机交互领域，尤其涉及一种图标处理方法、终端设备及存储介质。

技术介绍

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

技术实现思路

[0004]有鉴于此，本申请实施例提供了图标处理方法、终端设备及存储介质，可以解决来电界面的动画效果较为单一的问题。
[0005]本申请实施例的第一方面提供了一种图标处理方法，来电界面内包含控制图标和目标图标，目标图标为接听图标或者拒接图标。方法包括：在控制图标移动过程中，当检测到控制图标与目标图标相交时，基于相交区域对控制图标和目标图标进行融合处理。刷新来电界面，叠加显示融合处理后的控制图标和目标图标。
[0006]在本申请实施例中，通过在控制图标移动的过程中，对相交的控制图标和目标图标进行融合。从而使得控制图标与目标图标整个相交的动态过程中，可以实现实时动态的融合动画效果。使得来电过程中来电界面内的动画效果更为丰富，使得用户在使用过程中的人机交互效果更佳，人机交互体验更佳。
[0007]在第一方面的第一种可能的实现方式中，控制图标包含图层1，目标图标包含图层2和图层3，图层1为圆形的蒙版层，图层2为圆形的图案层，图层3为电话形状的图案层，图层2的内容仅在图层1的圆形覆盖区域内可以显示。
[0008]基于相交区域对控制图标和目标图标进行融合处理，包括：对图层1在相交区域内的内容和图层3在相交区域内的内容进行模糊化处理。
[0009]对模糊化处理后的图层1和图层2在相交区域内的内容进行平滑混色，得到平滑混色处理后的图层1，完成对控制图标和目标图标的融合处理。
[0010]相应的，刷新来电界面，叠加显示融合处理后的控制图标和目标图标，包括：刷新来电界面，叠加显示平滑混色处理后的图层1和模糊化处理后的图层3。
[0011]在本申请实施例中，通过对图层1和图层3进行模糊化处理，使得图层1和图层3在相交区域内的边界会变得相对模糊。因此两者的边界感会减弱，边界处的线条更加顺畅自然，从而使得融合过程的视觉效果上更为自然顺畅。同时对图层1和图层2进行平滑混色，且
对图层2进行蒙版遮蔽。可以使得相交区域内的像素点像素值过渡自然，实现图层间自然不突兀的融合效果，从而极大地提示了图标融合的动画效果丰富性和生动灵活性，提升了用户的人机交互效果。
[0012]作为本申请的一个实施例，图层2的圆形半径大等于图层3外接圆形半径，且图层2的圆形圆心与图层3外接圆形圆心位置相同。
[0013]在本申请实施例，图层2的半径大等于图层3，且圆心位置相同。使得图层2的圆形可以覆盖住图层3的图案，因此使得控制图标和目标图标开始接触时，图层2即可以第一时间与控制图标相交。从而使得整个相交融合的过程更加自然。
[0014]在第一方面的第二种可能的实现方式中，图层2和图层3的颜色相同。对模糊化处理后的图层1和图层2在相交区域内的内容进行平滑混色，包括：根据第一像素点在图层2内对应的RGBA通道内的主要颜色分量值，确定其对应的平滑系数。第一像素点为相交区域内的任意像素点，主要颜色分量值为RGBA通道包含的R值、G值和B值中的最大值。
[0015]基于平滑系数，对第一像素点在模糊化处理后的图层1中的像素值，和在图层2中的像素值进行混色，得到混色后第一像素点的像素值，完成对第一像素点的平滑混色。
[0016]在本申请实施例中，图层2和图层3的颜色相同，且基于像素点在图层2内对应的RGBA通道内的主要颜色分量值（亦即为图层3电话图案的主要颜色分量）进行平滑混色，可以让图层3中的电话图案可以更加自然的融合到控制图标中。使得整体混色效果更为自然。
[0017]作为本申请的一个实施例，对第一像素点在模糊化处理后的图层1中的像素值，和在图层2中的像素值进行混色，包括利用以下公式对第一像素点进行平滑混色：mixi=mix(srcColori，dstColori，a)其中，mixi是第一像素点平滑混色后的像素值，srcColori是第一像素点在模糊化处理后的图层1中的像素值，dstColori是第一像素点在放大处理后的图层2中的像素值。
[0018]作为本申请的一个实施例，控制图标还包含图层4，图层4为颜色与图层3不相同的电话形状的图案层。
[0019]由于图层2和图层3为相同颜色，因此控制图标和目标图标重合后，图层3的电话形状图案会融于图层2之中。通过在控制图标内增加颜色不同的电话形状团，可以提升最终的显示动画的提醒效果，使得动画效果更加丰富且人性化，提升人机交互体验。
[0020]作为本申请的一个实施例，图层1的颜色为灰色。
[0021]在第一方面的第三种可能的实现方式中，根据第一像素点在图层2对应的RGBA通道内的主要颜色分量值，确定对应的平滑系数，包括：利用以下公式确定平滑系数：a=smoothstep(0，b，dstColori.c)其中，a为平滑系数，smoothstep（）为平滑函数，b为常量系数，dstColori.c为第一像素点对应的主要颜色分量值的归一化值，b∈（0，1]。
[0022]在本申请实施例中，通过平滑函数smoothstep实现了对图层的有效平滑过渡。
[0023]作为一个可选实施例，将图层2中圆心的像素值和最边缘的像素值取均值并归一化处理后作为b。以提升平滑过渡的流畅性。
[0024]在第一方面的第四种可能的实现方式中，图层2和图层3均为单种颜色。图层2的圆
形包含内圆区域和边缘区域，其中，边缘区域内有效像素点的密度低于内圆区域内有效像素点的密度，且边缘区域内有效像素点的密度，与到图层2的圆形边界的距离呈负相关。有效像素点为非透明的像素点。
[0025]在本申请实施例中，图层2具有渐变模糊的效果，使得融合时先于密度较低的边缘区域进行融合，并逐步提升融合区域的像素点密度。可以让整个图标融合的过程更加自然不突兀，提升视觉效果。
[0026]在第一方面的第五种可能的实现方式中，在对模糊化处理后的图层1和图层2在相交区域内的内容进行平滑混色之前，还包括：获取控制图标的位移数据，并基于位移数据对图层2进行放大处理。其中，当图层1和图层2的圆心重合时，放大处理后的内圆区域半径，大等于图层1的圆形半径。
[0027]对模糊化处理后的图层1和图层2在相交区域内的内容进行平滑混色，得到平滑混色处理后的图层1，包括：对模糊化处理后的图层1和放大处理后的图层2在相交区域内的内容进行平滑混色，得本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种图标处理方法，其特征在于，来电界面内包含控制图标和目标图标，所述目标图标为接听图标或者拒接图标；所述方法包括：在所述控制图标移动过程中，当检测到所述控制图标与所述目标图标相交时，基于相交区域对所述控制图标和所述目标图标进行融合处理；刷新所述来电界面，叠加显示所述融合处理后的所述控制图标和所述目标图标。2.根据权利要求1所述的图标处理方法，其特征在于，所述控制图标包含图层1，所述目标图标包含图层2和图层3，所述图层1为圆形的蒙版层，所述图层2为圆形的图案层，所述图层3为电话形状的图案层，所述图层2的内容仅在所述图层1的圆形覆盖区域内可以显示；所述基于相交区域对所述控制图标和所述目标图标进行融合处理，包括：对所述图层1在所述相交区域内的内容和所述图层3在所述相交区域内的内容进行模糊化处理；对所述模糊化处理后的所述图层1和所述图层2在所述相交区域内的内容进行平滑混色，得到所述平滑混色处理后的所述图层1，完成对所述控制图标和所述目标图标的所述融合处理；所述刷新所述来电界面，叠加显示所述融合处理后的所述控制图标和所述目标图标，包括：刷新所述来电界面，叠加显示所述平滑混色处理后的所述图层1和所述模糊化处理后的所述图层3。3.根据权利要求2所述的图标处理方法，其特征在于，所述图层2和所述图层3的颜色相同；所述对所述模糊化处理后的所述图层1和所述图层2在所述相交区域内的内容进行平滑混色，包括：根据第一像素点在所述图层2内对应的RGBA通道内的主要颜色分量值，确定其对应的平滑系数；所述第一像素点为所述相交区域内的任意像素点，所述主要颜色分量值为所述RGBA通道包含的R值、G值和B值中的最大值；基于所述平滑系数，对所述第一像素点在所述模糊化处理后的所述图层1中的像素值，和在所述图层2中的像素值进行混色，得到混色后所述第一像素点的像素值，完成对所述第一像素点的所述平滑混色。4.根据权利要求3所述的图标处理方法，其特征在于，所述根据第一像素点在所述图层2对应的RGBA通道内的主要颜色分量值，确定对应的平滑系数，包括：利用以下公式确定所述平滑系数：a=smoothstep(0，b，dstColori.c)其中，a为所述平滑系数，smoothstep（）为平滑函数，b为常量系数，dstColori.c为所述第一像素点对应的所述主要颜色分量值的归一化值，b∈（0，1]。5.根据权利要求2至4任一所述的图标处理方法，其特征在于，所述图层2和所述图层3均为单种颜色；所述图层2的圆形包含内圆区域和边缘区域，其中，所述边缘区域内有效像素点的密度低于所述内圆区域内所述有效像素点的密度，且所述边缘区域内所述有效像素点的密度，与到所述图层2的...

【专利技术属性】
技术研发人员：胡建沛，熊棉，
申请(专利权)人：荣耀终端有限公司，
类型：发明
国别省市：