CN109241465A - 界面显示方法、装置、终端及存储介质 - Google Patents

Abstract

本申请提供了一种界面显示方法、装置、终端及存储介质，属于终端技术领域。本申请中，界面中会显示移动的天气元素，如果天气元素在移动的过程中，碰撞到了界面的目标区域，会在目标区域的周围，显示天气元素的变形图像，从而表现出天气元素与目标区域相互碰撞后，天气元素的形态产生的变化。通过这种界面显示方法，能够表现出天气元素与目标区域之间的交互，令天气元素与目标区域看起来是两个在界面中进行互动的对象，当天气元素作用于目标区域后，目标区域就会对天气元素产生反馈，让天气元素产生形变，从而提高了天气元素的真实感和表现力，进而提高了整个界面的真实感和表现力，增加了沉浸感，令界面的显示过程更加直观生动，从而提升了用户体验。

Description

界面显示方法、装置、终端及存储介质

技术领域

本申请涉及终端技术领域，特别涉及一种界面显示方法、装置、终端及存储介质。

背景技术

随着终端技术的发展，终端可以在屏幕中显示各种各样的界面，其中，在运行天气应用的过程中，终端可以在界面中显示天气图像，以便通过天气图像提示当前的天气。

针对显示界面的具体过程，终端会根据当前的天气类型，获取该天气类型对应的天气图像，例如天气类型为晴天时，会获取到阳光照射的图像，又如天气类型为雾时，会获取到雾气弥漫的图像。之后，终端将天气图像作为界面的背景，将天气图像绘制在背景图层上，将温度文本作为界面的前景，绘制在文本图层上，将背景图层作为底层图层，将文本图层作为该底层图层之上的图层，对背景图层和文本图层进行图层合成，得到界面，将界面发送给屏幕，则屏幕会显示该界面。

界面中的天气图像与温度文本缺乏交互，导致界面的视觉效果不够真实。

发明内容

本申请实施例提供了一种界面显示方法、装置、终端及存储介质。所述技术方案如下：

第一方面，提供了一种界面显示方法，所述方法包括：

获取界面中目标区域，所述目标区域为天气元素在移动显示过程中会碰撞的障碍区域；

获取所述界面中移动的天气元素当前的显示位置；

当所述显示位置与所述目标区域的距离符合预设条件时，在所述目标区域的预设范围内，显示所述天气元素的变形图像，所述变形图像用于表现所述天气元素碰撞到所述目标区域后，所述天气元素的形态产生的变化。

本实施例提供的方法，会在界面中显示移动的天气元素，如果天气元素在移动的过程中，碰撞到了界面的目标区域，会在目标区域的周围，显示天气元素的变形图像，从而表现出天气元素与目标区域相互碰撞后，天气元素的形态产生的变化。通过这种界面显示方法，能够表现出天气元素与目标区域之间的交互，令天气元素与目标区域看起来是两个在界面中进行互动的对象，当天气元素作用于目标区域后，目标区域就会对天气元素产生反馈，让天气元素产生形变，从而提高了天气元素的真实感和表现力，进而提高了整个界面的真实感和表现力，增加了沉浸感，令界面的显示过程更加直观生动，从而提升了用户体验。

在一种可能的实现中，所述获取界面中目标区域，包括：

当前台显示界面包含温度文本时，将所述温度文本中字符所处的区域作为所述目标区域；

基于这种实现，带来的有益效果至少包括：当天气元素碰撞到界面中的温度文本后，即可在温度文本的周围，显示天气元素的变形图像，从而表现出温度文本对天气元素产生了反馈，呈现出天气元素与温度文本两者进行互动的动态效果，提高了天气元素与温度文本的关联性，增加了沉浸感。

在一种可能的实现中，所述获取界面中目标区域，包括：

当检测到触摸操作时，将所述触摸操作的触摸点所处的区域，作为所述目标区域。

基于这种实现，带来的有益效果至少包括：当天气元素碰撞到触摸点附近后，即可在触摸点周围，显示天气元素的变形图像，从而呈现出天气元素与手指触摸的区域进行互动的动态效果。

在一种可能的实现中，所述获取界面中目标区域之后，所述方法还包括：

对所述目标区域对应的图层进行边缘提取，得到所述目标区域的边缘图像；

根据所述边缘图像，获取所述目标区域的边缘位置；

所述获取所述界面中移动的天气元素当前的显示位置之后，所述方法还包括：

当所述显示位置与所述边缘位置相同时，确定所述显示位置与所述目标区域的距离符合所述预设条件。

基于这种实现，带来的有益效果至少包括：通过获取目标区域的边缘位置，根据天气元素当前的显示位置与边缘位置是否相同，来显示天气元素的变形图像，则天气元素碰撞到目标区域的边缘，目标区域的周围就会显示天气元素的变形图像，让界面的显示更加生动。

在一种可能的实现中，所述根据所述边缘图像，获取所述目标区域的边缘位置，包括：

当所述目标区域具有弧形顶部时，获取所述边缘图像中弧形顶部的点坐标，作为所述边缘位置；或，

当所述目标区域具有直线形顶部时，获取所述边缘图像中直线形顶部的点坐标，作为所述边缘位置；或，

当所述目标区域具有斜坡形顶部时，获取所述边缘图像中斜坡形顶部的点坐标，作为所述边缘位置。

基于这种实现，带来的有益效果至少包括：充分考虑到边缘图像中目标区域具有的顶部形状，通过获取与目标区域的顶部形状匹配的边缘位置，根据根据天气元素当前的显示位置与顶部形状匹配的边缘位置是否相同，来显示天气元素的变形图像，可以保证变形图像的显示位置与目标区域的顶部形状吻合，避免变形图像与目标区域位置错开而导致界面失真的情况，提升界面的真实性。

尤其是，在目标区域为字符所处的区域时，对于0、2°等具有弧形顶部的字符，会在0、2°的弧形顶部上显示天气元素的变形图像，对于-、7等具有直线形顶部的字符，会在-、7的直线形顶部上显示天气元素的变形图像，对于1等具有斜坡形顶部的字符，会在1的斜坡形顶部上显示天气元素的变形图像，可以保证变形图像的显示位置，会与各个字符的顶部形状吻合，达到天气元素的变形图像正好落在每个字符的顶部的效果，增强了界面显示的趣味性和灵活性。

在一种可能的实现中，所述显示所述天气元素的变形图像，包括：

显示第一动画，所述第一动画用于显示变形了的天气元素在所述目标区域上进行弹跳。

基于这种实现，带来的有益效果至少包括：通过在天气元素碰撞到目标区域后，显示变形了的天气元素在目标区域上弹跳，可以模拟出真实世界中，物体碰撞到景物后，产生弹性形变，而在景物上弹跳的现象，从而将天气元素与目标区域模拟为真实世界的两个物体，表现出目标区域对天气元素施加了弹力，提升了界面的真实性。

显示第二动画，所述第二动画用于显示变形了的天气元素在所述目标区域上进行沉积。

基于这种实现，带来的有益效果至少包括：通过在天气元素碰撞到目标区域后，显示变形了的天气元素在目标区域上沉积，可以模拟出真实世界中，物体在运动过程中，当碰撞到景物后，受到景物的阻碍，而在景物上停留的现象，从而将天气元素与目标区域模拟为真实世界的两个物体，表现出目标区域对天气元素的运动产生了阻碍，提升了界面的真实性。

在一种可能的实现中，所述显示第一动画，包括：

连续显示多帧第一图像，每帧第一图像中天气元素在所述目标区域上，且任两帧相邻的第一图像中天气元素的位置变化符合弹跳运动轨迹。

基于这种实现，带来的有益效果至少包括：第一动画的任两帧第一图像中，下一帧第一图像中天气元素的位置相对于上一帧第一图像中天气元素的位置来说，位置变化即符合弹跳运动轨迹，则显示这两帧第一图像时，可以呈现天气元素弹跳了一步的效果，依次类推，随着多帧第一图像的连续显示，天气元素位置变化的程度越来越大，可以呈现天气元素进行了一次完整的弹跳运动的效果。

可选地，第一动画中第一帧第一图像中变形了的天气元素位于碰撞位置。

该碰撞位置是指界面中移动的天气元素与目标区域之间相互碰撞的位置，可以看作天气元素的移动轨迹与目标区域的边缘之间的交点。通过这种方式，由于第一帧第一图像中变形了的天气元素的显示位置可以看作弹跳运动的起跳点，可以达到变形了的天气元素以碰撞位置为起始点，开始弹跳的显示效果。

在一种可能的实现中，所述连续显示多帧第一图像之前，所述方法还包括：

根据弹跳运动参数，获取每帧第一图像中天气元素的位置，所述弹跳运动参数用于指示所述弹跳运动轨迹；

根据每帧第一图像中天气元素的位置，依次绘制所述多帧第一图像。

基于这种实现，带来的有益效果至少包括：根据弹跳运动参数，获取天气元素在每帧第一图像中的位置，在该位置处绘制天气元素，可以保证第一动画中任两帧相邻的第一图像中天气元素的位置变化符合弹跳运动轨迹。

可选地，根据天气元素对应的多个弹跳运动参数，获取每帧第一图像中多个变形了的天气元素的位置，所述多个弹跳运动参数不同；

根据每帧第一图像中多个变形了的天气元素的位置，在每帧第一图像中绘制多个变形了的天气元素。

基于这种实现，带来的有益效果至少包括：当界面中的天气元素碰撞到目标区域后，在碰撞位置处变形为多个变形了的天气元素，每个变形了的天气元素按照各自的弹跳运动轨迹进行弹跳，从而呈现出天气元素在目标区域上飞溅四射的效果。以天气元素为雨线元素为例，界面的显示效果可以为：雨线元素在碰撞到目标区域后，在目标区域上变形为多个雨滴，每个雨滴各自进行弹跳，呈现出碰撞位置处雨滴飞溅的效果。

在一种可能的实现中，所述显示第二动画，包括：

连续显示多帧第二图像，每帧第二图像中变形了的天气元素在所述目标区域上，且任两帧相邻的第二图像中，后一帧第二图像中变形了的天气元素，多于前一帧第二图像中变形了的天气元素。

基于这种实现，带来的有益效果至少包括：通过令后一帧第二图像比前一帧第二图像多出至少一个天气元素，则第二动画中各帧第二图像中天气元素的数量会越来越多，则显示第二动画时，可以呈现出目标区域上变形了的天气元素随着时间推移，而变得越来越多的效果，真实的模拟出沉积的现象。

在一种可能的实现中，所述任两帧相邻的第二图像中，后一帧第二图像中的新增天气元素高于前一帧第二图像的沉积高度，所述新增天气元素是指后一帧第二图像相对于前一帧第二图像增加的变形了的天气元素，所述沉积高度是指所述目标区域上已沉积的天气元素的总高度。

基于这种实现，带来的有益效果至少包括：每帧第二图像，都会在包含之前的第二图像的天气元素的基础上，还包含新增天气元素，而新增天气元素又恰好位于之前的沉积高度上，那么随着绘制过程的执行，每帧第二图像中绘制的天气元素高度越来越高，从而在连续播放多帧第二图像时，呈现出目标区域上的天气元素越堆越高的显示效果，真实地模拟出沉积的现象。

在一种可能的实现中，所述连续显示多帧第二图像之前，所述方法还包括：

根据已绘制的前一帧第二图像，获取所述前一帧第二图像中所述目标区域上已沉积的天气元素的总高度，得到沉积高度；

根据所述沉积高度，获取后一帧第二图像中新增天气元素的位置，所述新增天气元素在所述后一帧第二图像中的位置高于所述沉积高度；

根据所述新增天气元素的位置以及所述前一帧第二图像，绘制所述后一帧第二图像，所述后一帧第二图像包含所述前一帧第二图像中的每个天气元素以及所述新增天气元素。

基于这种实现，带来的有益效果至少包括：根据前一帧第二图像中目标区域的沉积高度，来绘制后一帧第二图像，可以各帧第二图像中沉积高度会越来越高，则连续播放多帧第二图像时，可以呈现出目标区域上的天气元素越堆越高的显示效果，真实地模拟出沉积的效果。

在一种可能的实现中，每帧第二图像中，已沉积的不同天气元素的透明度不同。

基于这种实现，带来的有益效果至少包括：目标区域上已沉积的不同天气元素的透明度可以不同，则透明度较低的天气元素的显示效果会较为不透明，看起来比较实，能够遮挡在该天气元素后侧的界面元素，透明度较高的天气元素的显示效果较为透明，看起来比较虚，能够透过该天气元素看到在该天气元素后侧的界面元素，则目标区域上不同天气元素呈现出的虚实程度不同，基于近实远虚的视觉原理，会让人感觉目标区域上沉积的天气元素，有的距离屏幕较近，有的距离屏幕较远，达到天气元素的布局稀疏错落的效果。

在一种可能的实现中，每帧第二图像中，已沉积的不同天气元素的位置不同。

基于这种实现，带来的有益效果至少包括：目标区域沉积的各个天气元素中，有的天气元素位置稍微偏上，有的天气元素的位置稍微偏下，有的天气元素的位置稍微偏左，有的天气元素的位置稍微偏右，从而令沉积的不同天气元素在排布时位置相互错开，达到天气元素的布局错落有致的效果。

在一种可能的实现中，所述方法还包括：

显示所述目标区域融化扭曲的图像；和/或，

显示第三动画，所述第三动画用于显示所述目标区域随时间推移，进行融化扭曲。

基于这种实现，带来的有益效果至少包括：可以应用在天气类型为晴天或者高温的场景中，通过显示目标区域融化扭曲的图像，可以模拟真实世界中物体由于气温的升高、阳光的照耀而产生融化的现象。

在一种可能的实现中，所述显示所述目标区域融化扭曲的图像，包括：

改变所述目标区域的至少一个子区域的顶点位置。

通过改变子区域的顶点位置，子区域中的图像会产生形变，从而产生扭曲，达到显示出融化扭曲的图像的效果。

在一种可能的实现中，可以获取子区域的顶点的点坐标，并获取随机量，向顶点的点坐标添加偏移量，将添加偏移量的点坐标作为改变后的顶点位置。

在一种可能的实现中，所述显示第三动画，包括：在绘制任一帧第三图像时，可以获取上一帧第三图像中每个子区域的顶点坐标以及偏移量，对偏移量进行更新，向子区域的顶点坐标添加更新后的偏移量，将添加了更新后的偏移量的顶点坐标作为本帧第三图像中子区域的顶点位置，则由于本帧第三图像相对于上一帧第三图像来说，目标区域中子区域的顶点位置发生了更新，可以实现目标区域融化扭曲的效果发生更新的效果。

在一种可能的实现中，第三动画的显示效果可以包括：随时间推移，目标区域融化扭曲的程度越来越强。

基于这种实现，带来的有益效果至少包括：通过显示目标区域融化扭曲程度越来越强，可以模拟真实世界中景物由于气温的升高、阳光的照耀，融化的程度越来越强，即景物被太阳晒化的现象。

在一种可能的实现中，显示第三动画包括：在绘制任一帧第三图像时，获取上一帧第三图像中每个子区域的顶点坐标以及偏移量，对偏移量进行递增，向子区域的顶点坐标添加递增后的偏移量，将添加了递增后的偏移量的顶点坐标，作为本帧第三图像中子区域的顶点位置，所述第三图像是指第三动画中的任一帧图像。

基于这种实现，带来的有益效果至少包括：由于本帧第三图像相对于上一帧第三图像来说，目标区域中子区域的顶点位置偏移地更多，可以实现目标区域融化扭曲的效果发生增强的效果。

可选地，在显示目标区域融化扭曲的图像的过程中，在界面中显示从内向外扩散光线线条。通过光线线条的扩散过程，可以模拟阳光的辐射过程。

在一种可能的实现中，终端根据当前的天气类型，获取所述天气类型对应的天气元素；终端依次绘制出多个包含天气元素的界面，不同界面中天气元素的位置不同。

基于这种实现，带来的有益效果至少包括：终端每次绘制的界面中天气元素的位置与上一次绘制的界面中天气元素的位置不同，后续通过连续显示这两次绘制的界面，可以显示出天气元素在界面中移动了一步的效果。以此类推，通过依次绘制出多个界面，多个界面中天气元素分别位于不同的位置，后续通过该连续显示多个界面，可以显示出天气元素在界面中不断移动的效果，而通过天气元素的移动，可以令界面的显示效果可以模拟真实世界的天气现象，例如，可以在界面中显示下落的雨滴元素，通过雨滴元素的下落，可以令界面的显示效果模拟出下雨的现象，又如，可以在界面中显示下落的雪花元素，通过下落的雪花元素，可以令界面的显示效果模拟出下雪的现象。

可选地，可以根据天气元素的衰减度，对天气元素的透明度、长度以及宽度进行衰减，得到每个界面中天气元素的透明度、长度以及宽度，在每个界面，绘制对应透明度、对应长度、对应宽度的天气元素。

基于这种实现，带来的有益效果至少包括：通过对天气元素的透明度进行衰减，天气元素在多个界面中的透明度会逐渐减小，则后续连续显示多个界面时，可以呈现出天气元素在界面中从实到虚、逐渐消失的显示效果，通过对天气元素的长度以及宽度进行衰减，天气元素在多个界面中的长度以及宽度会逐渐减小，则后续连续显示多个界面时，可以呈现出天气元素在界面中从大变小的显示效果。

第二方面，提供了一种界面显示装置，用于执行第一方面或第一方面的任一种可能实现方式中的界面显示方法。具体地，该界面显示装置包括用于执行上述第一方面或第一方面的任一种可能实现方式中的方法的功能模块。

第三方面，提供了一种终端，所述终端包括处理器和存储器，所述存储器中存储有至少一条指令，所述指令由所述处理器加载并执行以实现上述第一方面或第一方面的任一种可能实现方式中的界面显示方法。

第四方面，提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序由处理器加载并执行以实现上述第一方面或第一方面的任一种可能实现方式中的界面显示方法。

第五方面，提供了一种芯片，所述芯片包括处理器和/或程序指令，当所述芯片运行时，实现上述第一方面或第一方面的任一种可能实现方式中的界面显示方法。

附图说明

图1是本申请实施例提供的一种终端的结构示意图；

图2是本申请实施例提供的一种界面显示方法的流程图；

图3是本申请实施例提供的一种目标区域的边缘图像的示意图；

图4是本申请实施例提供的一种屏幕坐标系的示意图；

图5是本申请实施例提供的一种温度文本的边缘图像的示意图；

图6是本申请实施例提供的一种获取目标区域的弧形顶部的点坐标的示意图；

图7是本申请实施例提供的一种获取目标区域的弧形顶部的点坐标的示意图；

图8是本申请实施例提供的一种获取目标区域的直线形顶部的点坐标的示意图；

图9是本申请实施例提供的一种获取目标区域的斜线形顶部的点坐标的示意图；

图10是本申请实施例提供的一种获取目标区域中任一点的点坐标的示意图；

图11是本申请实施例提供的一种获取温度文本中边缘位置的点坐标的示意图；

图12是本申请实施例提供的一种透视投影的示意图；

图13是本申请实施例提供的一种三维坐标系的示意图；

图14是本申请实施例提供的一种雨线元素生成、显示和销毁的示意图；

图15是本申请实施例提供的一种雨滴飞溅的效果示意图；

图16是本申请实施例提供的一种雪粒子沉积的效果示意图；

图17是本申请实施例提供的一种雪花元素作用于温度文本的效果示意图；

图18是本申请实施例提供的一种霜元素作用于温度文本的效果示意图；

图19是本申请实施例提供的一种沙元素作用于温度文本的效果示意图；

图20是本申请实施例提供的一种融化扭曲的效果示意图；

图21是本申请实施例提供的一种划分子区域的示意图；

图22是本申请实施例提供的一种融化扭曲的效果示意图；

图23是本申请实施例提供的一种融化扭曲的效果示意图；

图24是本申请实施例提供的一种界面显示装置的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

图1是本申请实施例提供的一种终端的结构示意图。该终端可以用于实施下述实施例所示出的界面显示方法中的终端所执行的功能。具体来讲：

终端100可以包括射频(Radio Frequency，以下简称：RF)电路110、包括有一个或一个以上计算机可读存储介质的存储器120、输入单元130、显示单元140、传感器150、音频电路160、传输模块170、包括有一个或者一个以上处理核心的处理器180、以及电源190等部件。本领域技术人员可以理解，图1中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

RF电路110可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器180处理；另外，将涉及上行的数据发送给基站。通常，RF电路110包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM)卡、收发信机、耦合器、低噪声放大器(Low Noise Amplifier，以下简称：LNA)、双工器等。此外，RF电路110还可以通过无线通信与网络和其他终端通信。该无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(Global System ofMobilecommunication，以下简称：GSM)、通用分组无线服务(General Packet RadioService，以下简称：GPRS)、码分多址(Code Division Multiple Access，以下简称：CDMA)、宽带码分多址(Wideband Code Division Multiple Access,以下简称：WCDMA)、长期演进(Long Term Evolution,以下简称：LTE)、电子邮件、短消息服务(Short MessagingService，以下简称：SMS)等。

存储器120可用于存储软件程序以及模块，如上述示例性实施例所示出的终端所对应的软件程序以及模块，处理器180通过运行存储在存储器120的软件程序以及模块，从而执行各种功能应用以及数据处理，如实现基于视频的交互等。存储器120可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据终端100的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器120还可以包括存储器控制器，以提供处理器180和输入单元130对存储器120的访问。

输入单元130可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，输入单元130可包括触敏表面131以及其他输入终端132。触敏表面131，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面131上或在触敏表面131附近的操作)，并根据预先设定的程式驱动相应的链接装置。可选的，触敏表面131可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器180，并能接收处理器180发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面131。除了触敏表面131，输入单元130还可以包括其他输入终端132。具体地，其他输入终端132可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元140可用于显示由用户输入的信息或提供给用户的信息以及终端100的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元140可包括显示面板141，可选的，可以采用液晶显示器(Liquid CrystalDisplay，以下简称：LCD)、有机发光二极管(Organic Light-Emitting Diode,以下简称：OLED)等形式来配置显示面板141。进一步的，触敏表面131可覆盖显示面板141，当触敏表面131检测到在其上或附近的触摸操作后，传送给处理器180以确定触摸事件的类型，随后处理器180根据触摸事件的类型在显示面板141上提供相应的视觉输出。虽然在图1中，触敏表面131与显示面板141是作为两个独立的部件来实现输入和输出功能，但是在某些实施例中，可以将触敏表面131与显示面板141集成而实现输入和输出功能。

终端100还可包括至少一种传感器150，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板141的亮度，接近传感器可在终端100移动到耳边时，关闭显示面板141和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于终端100还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路160、扬声器161，传声器162可提供用户与终端100之间的音频接口。音频电路160可将接收到的音频数据转换后的电信号，传输到扬声器161，由扬声器161转换为声音信号输出；另一方面，传声器162将收集的声音信号转换为电信号，由音频电路160接收后转换为音频数据，再将音频数据输出处理器180处理后，经RF电路110以发送给比如另一终端，或者将音频数据输出至存储器120以便进一步处理。音频电路160还可能包括耳塞插孔，以提供外设耳机与终端100的通信。

终端100通过传输模块170可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线或有线的宽带互联网访问。虽然图1示出了传输模块170，但是可以理解的是，其并不属于终端100的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器180是终端100的控制中心，利用各种接口和线路链接整个手机的各个部分，通过运行或执行存储在存储器120内的软件程序和/或模块，以及调用存储在存储器120内的数据，执行终端100的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器180可包括一个或多个处理核心；优选的，处理器180可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器180中。

终端100还包括给各个部件供电的电源190(比如电池)，优选的，电源可以通过电源管理系统与处理器180逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源190还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，终端100还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，终端100的显示单元是触摸屏显示器，终端100还包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行上述一个或者一个以上程序包含用于实施下述实施例中终端所执行操作的指令。

在示例性实施例中，还提供了一种计算机可读存储介质，例如包括指令的存储器，上述指令可由终端中的处理器执行以完成下述实施例中的界面显示方法。例如，所述计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

图2是本申请实施例提供的一种界面显示方法的流程图，该方法的执行主体为终端，参见图2，该方法包括：

201、终端获取当前的天气类型。

本实施例中，终端可以是手机、个人电脑、平板电脑、可穿戴设备、个人数字助理(Personal Digital Assistant，以下简称：PDA)、数码相机等。天气类型可以包括晴、雨、多云/阴、雪、雾、冰雹、雷电、台风、霾、沙尘等至少一种或者几种的组合，可选地，终端还可以获取温度，该温度可以为-99°至99°之间的整数或小数。

关于终端获取当前的天气类型的过程，终端可以根据当前所处的地理位置，获取该地理位置对应的天气类型。在一种可能的实现中，终端可以安装天气应用，在运行天气应用的过程中，可以与天气应用关联的服务器进行网络连接，向服务器发送天气信息获取请求，该天气信息获取请求携带终端当前所处的地理位置，服务器接收到天气信息获取请求后，可以解析该天气信息获取请求，得到该天气信息获取请求携带的地理位置，获取该地理位置当前的天气信息，将天气信息发送给终端，终端可以接收服务器发送的天气信息，从而得到天气信息。在另一种可能的实现中，终端可以通过传感器，测量当前的天气信息，从而得到天气信息。关于终端获取天气信息的时机，终端可以实时获取天气信息，也可以按照预设时间周期定期获取天气信息，还可以当检测到用户对天气应用的启动操作时，获取天气信息。

202、终端获取界面中的目标区域。

目标区域为天气元素在移动显示过程中会碰撞的障碍区域，目标区域可以看作天气元素移动过程的障碍物。获取目标区域的实现方式可以包括以下方式一和方式二中的任一种或多种的组合：

方式一、当前台显示界面包含温度文本时，将温度文本中字符所处的区域作为目标区域。

前台显示界面是指当前在终端的屏幕中显示的界面，可以为天气应用的主界面、终端的桌面等。温度文本是指语义为温度的文本，可以包括数字和符号，该数字用于指示温度的大小，可以包括0、1、2、3、4、5、6、7、8、9和0，该符号可以包括-和°，-用于指示温度是零上的温度还是零下的温度，°为摄氏度符号。举例来说，温度文本可以为28°。

关于从前台显示界面中获取目标区域的过程，在一种可能的实现中，前台显示界面可以包括至少一个图层，不同图层用于显示不同的内容，其中文本图层用于显示温度文本。终端可以获取前台显示界面中的文本图层，确定文本图层中字符所处的区域，将字符所处的区域作为目标区域。

方式二、当检测到触摸操作时，将触摸操作的触摸点所处的区域，作为目标区域。

终端可以配置触摸屏，当用户在触摸屏上触发触摸操作时，终端可以检测到触摸操作，获取触摸操作的触摸点，确定该触摸点所处的区域，作为目标区域。示例性地，终端可以获取触摸点坐标，确定圆心为该触摸点坐标、半径为预设半径的圆形区域，将该圆形区域作为目标区域，从而将一个触摸点扩展为一个可呈现动态效果的区域。

203、终端获取该目标区域的边缘位置。

目标区域的边缘位置用于在界面中定位目标区域的边缘，可以为目标区域的外边缘位置。目标区域的边缘位置可以记录为边缘的像素点在屏幕坐标系中的点坐标。目标区域的边缘位置可以称为可交互位置，即目标区域的所有位置中可以与天气元素发生交互的位置，后续在天气元素在界面中移动显示的过程中，当天气元素移动至目标区域的边缘位置时，可以看作天气元素能够与目标区域进行交互，则可以在边缘位置附近显示天气元素的变形图像。而当天气元素尚未移动至目标区域的边缘位置时，可以继续显示天气元素的移动过程。

针对获取边缘位置的具体过程，可以包括以下步骤一至步骤二：

步骤一、对目标区域对应的图层进行边缘提取，得到目标区域的边缘图像。

边缘图像(Edge Image)中的任一像素点为目标区域的边缘，针对获取边缘图像的具体过程，终端可以应用边缘检测算法，对目标区域对应的图层进行边缘提取，该边缘检测算法可以为Canny边缘检测算法(Canny edge detection)，应用Canny边缘检测算法，能够从图层中快速得到温度文本中字符的边缘图像或者触摸点所在区域的边缘图像，并且大大减少要处理的数据量。

以目标区域为温度文本中字符所在的区域为例，请参见图3，图3中左图为未经过边缘提取的原始图像(Original Image)，该原始图像中的每个字符是实心的，该原始图像中的像素点对应于字符的边缘位置以及字符的中心位置。图3的右图为经过边缘提取后得到的边缘图像，该边缘图像中每个字符剩下了轮廓，为空心的线框，边缘图像中的像素点对应于字符的边缘。

步骤二、根据边缘图像，获取目标区域的边缘位置。

可以建立屏幕坐标系，获取边缘图像中每个像素点在屏幕坐标系中的点坐标，得到多个点坐标，从该多个点坐标中选取一个或多个点坐标，将该一个或多个点坐标作为目标区域的边缘位置。其中，屏幕坐标系可以如图4所示，屏幕坐标系的原点位于屏幕的左上角，屏幕坐标系的x轴的正方向沿屏幕向右，y轴的正方向沿屏幕向下。

示例性地，假设温度文本为“28°”，温度文本的边缘图像如图5所示，可以获取图5中每个白色像素点在屏幕坐标系中的点坐标，得到一段连续的点坐标，从这段连续的点坐标中选取一个或多个点坐标，作为温度文本的边缘位置。

针对选取点坐标的具体过程，在一种可能的实现中，可以根据目标区域的顶部的形状，从边缘图像中获取与该顶部的形状匹配的点坐标，作为目标区域的边缘位置。

以目标区域为字符所在的区域为例，可以根据字符的顶部形状的不同，将各种字符细分为三类，第一类字符具有弧形顶部，包括0、2、3、6、8、9、°，第二类字符具有直线形顶部，包括-、4、5、7，第三类字符具有斜线形顶部，包括1。可以预先设定这三类字符中，每类字符对应的显示天气元素的变形图像的边缘位置，例如，可以设定第一类字符对应的边缘位置可以为字符的上部，则后续会在字符的上部显示天气元素的变形图像，第二类字符对应的边缘位置可以为字符的顶部，则后续会在字符的顶部显示天气元素的变形图像，第三类字符对应的边缘位置可以为字符的斜面，则后续在字符的斜面显示天气元素的变形图像。

结合目标区域的顶部的形状，获取边缘位置的过程具体可以包括以下(1)至(3)：

(1)当目标区域具有弧形顶部时，获取边缘图像中目标区域的弧形顶部的点坐标，作为边缘位置。

获取弧形顶部的点坐标的过程可以包括以下步骤一至步骤二：

步骤一、获取边缘图像中最高的像素点的点坐标，作为目标区域的顶点坐标。

具体地，由于屏幕坐标系中任一像素点的纵坐标越小，表明该像素点的位置越高，可以获取边缘图像中每个像素点在屏幕坐标系中的点坐标，从得到的所有点坐标中选取纵坐标最小的点坐标，将该点坐标作为目标区域的顶点坐标。

步骤二、确定该顶点坐标与预设高度的和值。

预设高度用于指示弧形顶部的弦高，可以根据需求设置，比如以能够涵盖目标区域的弧形顶部为准。在实施中，预设高度可以取字符的字体高度的20％-25％。

步骤三、获取该顶点坐标与该和值之间的每个点坐标，得到弧形顶部的每个点坐标。

举例来说，请参见图6，图6示出了“0”的顶点坐标和预设高度。以此类推，对于第一类字符：0，2，3，6，8，9，°来说，假设预设高度表示为delta，顶点坐标表示为ymin，第一类字符的边缘位置的纵坐标表示为y1，请参见图7，y1的取值范围可以是ymin≤y1≤ymin+delta，其中ymin为边缘图像中纵坐标最小的像素点，可以理解为字符的弧形顶部的顶点，ymin+delta为边缘图像中纵坐标为(ymin+delta)的点，可以理解为字符的弧形顶部的弧底。

(2)当目标区域具有直线形顶部时，获取边缘图像中目标区域的直线形顶部的点坐标，作为边缘位置。

可以获取边缘图像中每个像素点在屏幕坐标系中的点坐标，从该多个点坐标中选取纵坐标最小的点坐标，将纵坐标最小的点坐标作为直线形顶部的点坐标。

举例来说，请参见图8，对于第二类字符-，4，5，7来说，假设第二类字符的边缘位置的纵坐标表示为y2，y2的取值范围可以是ymin，其中ymin为边缘图像中纵坐标最小的点。

(3)当目标区域具有斜坡形顶部时，获取边缘图像中目标区域的斜坡形顶部的至少一个点坐标，作为边缘位置。

可以获取边缘图像的顶点坐标，取边缘图像中该顶点坐标相邻的点坐标，获取顶点坐标与该点坐标之间的斜率，判断该斜率是否属于预设斜率范围，若该斜率属于预设斜率范围，将该点坐标作为斜坡形顶部上的点坐标，同理地，继续取边缘图像中该点坐标相邻的下一个点坐标，获取该点坐标与下一个点坐标之间的斜率，判断斜率是否属于预设斜率范围，若该斜率属于预设斜率范围，将下一个点坐标作为斜坡形顶部上的点坐标，以此类推，重复取边缘图像中的下一个点坐标，直至本次取的点坐标与上一次取的点坐标之间的斜率不属于预设斜率范围为止。其中，该预设斜率范围可以指示斜线的斜率所处的范围，可以为大于0且小于无穷大。

举例来说，请参见图9，假设“1”对应的边缘位置的纵坐标为y3，可以取边缘位置上的任意一点坐标A(x1,y1),取A相邻的下一点坐标值B(x2,y2),则两点间的斜率K＝(y2–y1)/(x2–x1)，若k大于0且不是无穷大，则记录点B的点坐标，再继续取点B的相邻点C，通过重复上述过程，可以将取到的每个点作为“1”的斜坡形顶部的点坐标。

可选地，当温度文本中包括多个字符时，对于任一字符周围的任意像素点，可以获取该像素点在该字符中的点坐标，根据温度文本中位于该字符之前的每个字符的宽度，获取该像素点相对于整个温度文本的点坐标。举例来说，请参见图10，表示零下的字符“-”和表示摄氏度的字符“°”的宽度为d0，表示数字的字符的宽度为d1,任两个相邻的字符之间的空隙为s,则任意字符m中任意点p在屏幕坐标系的点坐标，可以根据点p在字符m中的点坐标以及字符m之前的每个字符的宽度求得。在图10中，点p位于字符“8”，字符“8”之前有两个字符“-”和“3”，可以先获取p在“8”中的点坐标，在该点坐标的基础上，累加“-”和“3”的宽度，得到点p在整个屏幕坐标系的点坐标。

示例性地，请参见图11，假设温度文本为28°，字符的高度为320像素，预设高度取字符的高度的25％，对于摄氏度符号°来说，°具有弧形顶部，因此属于第一类字符，假设图11中°的所有纵坐标中最小的纵坐标为80，则基于上文中第一类字符的边缘位置的获取方式，ymin＝80，delta＝380*25％＝95，若°的边缘位置的纵坐标表示为y1，将ymin＝80、delta＝95代入到ymin≤y1≤ymin+delta，可得y1的坐标范围是80≤y1≤175。

204、终端根据天气信息，在界面中显示移动的天气元素。

天气元素：是一种界面元素，能够指示天气信息对应的天气。天气元素在界面中可以显示为一块比较小的图像，这块图像对应于天气的组成要素。示例性地，天气元素可以包括雨线元素、冰雹元素、雾气元素、霾元素、雪花元素、沙元素、尘土元素、阳光元素、多云元素等。以雨线元素为例，雨线元素能够指示雨天，雨线元素在界面中可以显示为雨线图像，该雨线图像可以为具有一定长度和宽度的透明线条。以雪花元素为例，雪花元素能够指示雪天，雪花元素在界面中可以显示为雪花图像，例如为一个白色的六角形。

本实施例中，终端可以在界面中显示移动的天气元素，通过天气元素的移动，可以令界面的显示效果可以模拟真实世界的天气现象，例如，可以在界面中显示下落的雨滴元素，通过雨滴元素的下落，可以令界面的显示效果模拟出下雨的现象，又如，可以在界面中显示下落的雪花元素，通过下落的雪花元素，可以令界面的显示效果模拟出下雪的现象。

在一种可能的实现中，显示移动的天气元素的具体过程可以包括以下步骤一至步骤三：

步骤一、终端根据天气类型，确定天气元素。

终端可以解析天气信息，得到天气信息携带的天气类型，根据该天气类型，查询天气类型与天气元素之间的映射关系，得到天气类型对应的天气元素。其中，天气类型与天气元素之间的映射关系可以在终端中预先存储，可以包括至少一种天气类型以及对应的至少一种天气元素。举例来说，天气类型与天气元素之间的映射关系可以如下表1所示：

表1

天气类型	天气元素
		雨	雨线元素
冰雹	冰雹元素
		雾	雾气元素
霾	霾元素
		沙尘暴	沙元素
晴天	阳光元素

步骤二、终端依次绘制出多个包含天气元素的界面，不同界面中天气元素的位置不同。

终端每次绘制的界面中天气元素的位置可以与上一次绘制的界面中天气元素的位置不同，例如上一次绘制的天气元素在界面中位于s1，本次绘制的天气元素在界面中位于s2，则后续通过连续显示这两次绘制的界面，可以显示出天气元素在界面中从s1移动至s2的效果。以此类推，通过依次绘制出多个界面，多个界面中天气元素分别位于不同的位置，后续通过该连续显示多个界面，可以显示出天气元素在界面中不断移动的效果。

在一种可能的实现中，本步骤具体可以包括以下(1)至(4)：

(1)建立三维场景。

终端可以通过开放的图形程序接口(Open Graphics Library，以下简称：OpenGL)，建立三维场景，以便在三维场景中绘制天气元素。OpenGL是一套标准的图形应用程序编程接口(Application Programming Interface,以下简称：API)，提供丰富的图形绘制能力，通过OpenGL可以方便地调用底层的三维(three-dimensional，以下简称：3D)图形库。OpenGL可以通过透视投影，模拟真实世界中“近大远小”的视觉效果，OpenGL的透视投影的基本原理可以如图12所示，通过设置一系列的初始参数创建透视投影，将被绘制的天气元素设置于近平面(NEAR_PLANE)与远平面(FAR_PLANE)之间，天气元素与近平面之间的距离越近，则观察到的天气元素越大。其中，由于OpenGL没有提供几何实体图元，无法直接通过OpenGL描述三维场景，可以通过一些转换程序，将AutoCAD、3DS等3D图形设计软件制作的DF2和3DS模型文件转换成OpenGL的顶点数组。

(2)建立三维坐标系；

可以建立三维坐标系，以便在该三维坐标系中绘制天气元素，以保证绘制的天气元素显示出三维立体的效果。其中，三维坐标系可以如图13所示，该三维坐标系中X轴和Y轴形成的平面为屏幕所在的平面，该三维坐标系中Z轴的负方向为人眼垂直于屏幕观察的方向，屏幕所在的平面为z＝0的平面，z坐标越大，天气元素看起来越近，z坐标越小，天气元素看起来越小，则通过改变天气元素的z坐标，可以实现天气元素近大远小的效果。

(3)获取天气元素的属性。

天气元素的属性可以包括颜色、透明度、长度、宽度、z坐标、初始位置的点坐标(x,y),初始速度、加速度、初始角度、衰减因子等。其中，长度、宽度以及z坐标能够确定天气元素在界面中显示的大小，透明度能够确定天气元素在界面中显示的清晰程度，另外透明度也称生命值，能够确定天气元素的生命周期，当天气元素的透明度为0时，会销毁该天气元素。初始位置能够确定第一次显示天气元素时天气元素所处的位置，每个天气元素的初始位置能够确定显示每个天气元素的先后顺序，速度、加速度、衰减因子能够确定天气元素在界面中移动的快慢，初始角度能够确定天气元素在界面中的移动方向。

天气元素的属性可以与天气元素的类型匹配，从而保证根据天气元素的属性绘制天气元素时，天气元素的外形会与真实环境中的天气粒子相似，以使天气元素能够真实地模拟天气粒子。例如，雨线元素的长度可以较长、宽度可以较窄、透明度可以较高，则根据雨线元素的属性，会绘制一个较长、较窄、较为透明的矩形，从而令该矩形与雨天中的下雨线条相似，以使雨线元素能够模拟出真实的雨线。

针对获取天气元素的属性的过程，可以建立天气元素的属性与天气元素类型之间的映射关系，可以根据要显示的天气元素类型，查询该天气元素的属性与天气元素类型之间的映射关系，得到天气元素的数学。

可选地，天气元素的长度、宽度、初始速度以及加速度，可以与天气信息携带的天气的强度等级正相关，即，天气的强度等级越高，天气元素的长度、宽度、初始速度以及加速度越大。在一种可能的实现中，可以预先建立强度等级、天气元素的长度、天气元素的宽度、天气元素的初始速度以及天气元素的加速度之间的映射关系，可以根据天气信息，获取天气的强度等级，根据该强度等级查询该映射关系，得到天气元素的长度、宽度、初始速度以及加速度。

通过根据天气的强度等级，获取天气元素的长度、宽度、初始速度以及加速度，可以保证界面中天气元素的尺寸以及移动快慢符合天气的强度。在一个示例性场景中，当天气为大雨时，则界面中移动的雨线元素较大、较宽，并且移动地较快，当天气为小雨时，则界面中移动的雨线元素较小、较窄，并且移动地较慢。

(4)根据天气元素的属性，在界面中绘制天气元素。

终端可以根据天气元素的属性，绘制该属性对应的图形，作为天气元素。例如，可以根据雨线元素的属性，绘制较长、较窄、较为透明的矩形，作为雨线元素，又如，可以根据雪花元素的属性，绘制白色的六角形，作为雪花元素，又如，可以根据沙元素的属性，绘制黄色的圆形，作为沙元素。

在此基础上，可以根据天气元素的初始位置、初始速度、加速度以及初始角度，获取每个界面中天气元素的显示位置，对于每个界面，会在界面中天气元素的显示位置处，绘制天气元素，由于天气元素在多个界面中的显示位置不同，后续通过连续显示多个界面，可以显示出天气元素在界面中移动的效果。

可选地，可以根据天气元素的衰减度，对天气元素的透明度、长度以及宽度进行衰减，得到每个界面中天气元素的透明度、长度以及宽度，在每个界面，绘制对应透明度、对应长度、对应宽度的天气元素，由于天气元素在多个界面中的透明度逐渐减小，后续通过连续显示多个界面，可以呈现出天气元素在界面中从实到虚、逐渐消失的显示效果，由于天气元素在多个界面中的长度以及宽度逐渐减小，后续通过连续显示多个界面，可以呈现出天气元素在界面中逐渐变小的显示效果。

针对绘制移动的天气元素的具体过程，在一种可能的实现中，请参见图14，可以设置天气元素生成区域、天气元素显示区域以及天气元素销毁区域，在该天气元素生成区域绘制生成的天气元素，在天气元素显示区域绘制移动的天气元素，在天气元素销毁区域销毁已生成的天气元素。其中，该天气元素生成区域以及天气元素销毁区域为虚拟的区域，可以位于屏幕外侧，例如天气元素生成区域可以位于屏幕的右上角，天气元素销毁区域可以位于屏幕的左侧，而天气元素显示区域可以与屏幕重合。

以天气元素为雨线元素为例，可以在天气元素生成区域随机生成各种属性的雨线元素，从而决定雨线元素的初始形态，在天气元素显示区域，雨线元素的各个属性会随着动画的执行，发生不同的衰减变化，从而呈现下雨效果，在动画显示过程中，当雨线元素的透明度衰减到0时雨线元素会被销毁，另外当雨线元素到达天气元素销毁区域后，雨线元素也会被销毁，而当销毁了雨线元素后，可以在天气元素生成区域重新随机生成雨线元素，重复以上过程，实现下雨的动画效果。

需要说明的是，由于人眼对阳光以及多云的识别性较弱，可以设置阳光元素和多云元素的内容为空，如果获取到阳光元素以及多云元素，则无需绘制阳光元素以及多云元素，也无需在界面中显示阳光元素以及多云元素。

步骤三、终端在屏幕中连续显示多个界面。

可以将已绘制的多个界面依次发送给屏幕，屏幕会依次显示多个界面，例如屏幕可以每经过预设时长，切换当前显示的界面，该预设时长可以很短，例如可以为16ms，通过快速地切换屏幕中显示的界面，可以达到连续显示多个界面的效果，呈现出天气元素在界面中不断移动的动画效果。

205、终端获取界面中移动的天气元素当前的显示位置。

在显示界面的过程中，天气元素会在界面中不断进行移动，可以实时检测界面中天气元素当前的显示位置，从而得到天气元素当前的显示位置。例如，可以每绘制一次界面后，获取绘制的界面中天气元素的位置，又如，可以每当屏幕刷新一次当前显示的界面后，获取屏幕中当前显示的天气元素的显示位置。进一步地，可以开启显示位置监听进程，该显示位置监听进程用于监听天气元素当前的显示位置，每当屏幕中的界面刷新一次，该显示位置监听进程会获取界面中天气元素当前的显示位置。

其中，天气元素的显示位置用于在显示的界面中定位天气元素，天气元素的显示位置在程序中可以记录为天气元素的点坐标，例如为天气元素在屏幕坐标系中的点坐标，可以为(x,y)。

可选地，若界面中移动显示多个z坐标不同的天气元素，可以只需获取z坐标与目标区域的z坐标相同的天气元素当前的显示位置，而无需获取z坐标与目标区域的z坐标不同的天气元素的显示位置。其中，z坐标用于在三维坐标系中定位任一对象所处的平面，该三维坐标系是指绘制界面中各个对象时使用的坐标系。

具体来说，可以获取界面中每个天气元素在三维坐标系中的z坐标以及目标区域在三维坐标系中的z坐标，若天气元素的z坐标与目标区域的z坐标相同，表明三维坐标系中天气元素与目标区域处于同一平面，天气元素在移动显示过程中，可能会碰撞到目标区域，则检测天气元素当前的显示位置，若天气元素的z坐标与目标区域的z坐标不同，表明三维坐标系中天气元素与目标区域不处于同一平面，换句话说，天气元素与目标区域在三维空间上相互错开，则天气元素在移动显示过程中，不会碰撞到目标区域，则无需检测该天气元素当前的显示位置，从而减少检测天气元素的显示位置的运算量。

示例性地，如果目标区域为温度文本中字符所在的区域，天气元素为下雨线条，在下雨线条在界面中移动显示的过程中，可以只需检测与温度文本具有相同z坐标的下雨线条，而无需检测与温度文本具有不同z坐标的下雨线条。

206、当天气元素的显示位置与目标区域之间的距离符合预设条件时，终端在目标区域的预设范围内，显示天气元素的变形图像。

天气元素的变形图像用于表现天气元素碰撞到目标区域后，天气元素的形态产生的变化，该形态产生的变化可以包括形状的变化、尺寸的变化等，天气元素的变形图像可以包括变形了的天气元素。举例来说，如果天气元素为雨线元素，雨线元素的变形图像可以包括雨滴，如果天气元素为雪花元素，雪花元素的变形图像可以包括雪粒子。

本申请实施例中，天气元素的变形图像可以称为物理反馈效果：当天气元素碰撞到目标区域后，可以理解为天气元素与目标区域之间产生了相互作用，目标区域对天气元素产生了反馈，天气元素由于目标区域的反馈，产生了物理变化，从而在界面中产生形变。

关于显示天气元素的变形图像的位置，可以在目标区域的预设范围显示天气元素的变形图像。其中，该目标区域的预设范围为界面中目标区域周围的区域，可以为目标区域上方的区域、目标区域左侧的区域、目标区域右侧的区域等，预设范围的大小可以根据需求设置。

关于触发显示天气元素的变形图像的时机，可以当天气元素的显示位置与目标区域足够接近时，显示该天气元素的变形图像。在一种可能的实现中，可以为天气元素的显示位置与目标区域之间的距离设置预设条件，可以根据天气元素的显示位置以及目标区域的显示位置，判断天气元素的显示位置与目标区域之间的距离是否符合预设条件，当天气元素的显示位置与目标区域的距离符合预设条件时，确认天气元素的显示位置与目标区域之间足够接近，则会在目标区域的预设范围内，显示天气元素的变形图像，当天气元素的显示位置与目标区域的距离不符合预设条件时，确认天气元素的显示位置与目标区域之间相距较远，则暂时无需显示天气元素的变形图像。

其中，预设条件用于指示天气元素的显示位置是否与目标区域足够接近，例如，预设条件可以为天气元素的显示位置与目标区域的边缘位置相同，则当天气元素移动至目标区域的边缘位置时，会显示天气元素的变形图像。又如，预设条件可以为天气元素的显示位置与目标区域的边缘位置之间的距离小于距离阈值，再如，预设条件可以为天气元素的显示位置与目标区域的中心点之间的距离小于距离阈值。

针对显示天气元素的变形图像的过程，可以预先存储天气元素的变形图像的属性，根据天气元素的变形图像的属性，在目标区域的预设范围内绘制天气元素的变形图像，将天气元素的变形图像显示到屏幕中。其中，该天气元素的变形图像的属性可以包括颜色、透明度、形状类型、长度、宽度、半径、x坐标、y坐标、z坐标、速度、加速度、初始角度、衰减因子等，天气元素的变形图像的属性可以在终端中预先存储。

可选地，可以建立天气元素类型与天气元素的变形图像的属性之间的映射关系，可以根据当前移动显示的天气元素所属的天气元素类型，查询天气元素类型与天气元素的变形图像的属性之间的映射关系，得到天气元素的变形图像的属性，从而显示对应的天气元素的变形图像。

例如，雨线元素的变形图像的属性中，形状类型可以为椭圆形、透明度可以较高、半径可以较小，则在移动显示雨线元素的过程中，当雨线元素碰撞到目标区域的边缘时，可以根据雨线元素的变形图像的属性，绘制一个半径很小的透明椭圆，在目标区域周围，显示该半径很小的透明椭圆。其中，该半径很小的透明椭圆可以看作雨线元素碰撞后变形为的雨滴。

又如，雪花元素的变形图像的属性中，形状类型可以为正圆形、颜色可以为白色、半径可以较小，则在移动显示雪花元素的过程中，当雪花元素碰撞到目标区域的边缘时，可以根据雨线元素的变形图像的属性，绘制一个半径很小的白色正圆，在目标区域周围，显示该半径很小的白色正圆。其中，该半径很小的白色正圆可以看作雪花元素碰撞后变形为的雪粒子。

本实施例中，可以显示天气元素的变形图像在界面中静止，例如可以显示变形了的天气元素停留在目标区域上，以雪花元素为例，可以显示雪粒子停留在目标区域上，在目标区域上进行沉积。也可以显示天气元素的变形图像在界面中运动，例如可以显示变形了的天气元素在目标区域上进行弹跳，以雨线元素为例，可以显示雨滴在目标区域上进行弹跳。

具体来说，显示天气元素的变形图像的过程可以包括以下设计一至设计三中任一项或多项的组合：

设计一、显示第一动画，第一动画用于显示变形了的天气元素在目标区域上进行弹跳。

第一动画可以称为弹跳动画、弹跳反馈效果。第一动画的显示效果包括：天气元素在碰撞到目标区域后，产生变形并在目标区域上进行弹跳。举例来说，如果天气元素为雨线元素，则第一动画的显示效果包括：雨线元素在碰撞到目标区域后，变形为雨滴并在目标区域上进行弹跳，如果天气元素为冰雹元素，则第一动画的显示效果包括：冰雹元素在碰撞到目标区域后，变形为冰雹粒子并在目标区域上进行弹跳。

第一动画可以包括多帧图像，为了区分描述，在此将第一动画中的任一帧图像称为第一图像，每帧第一图像包括变形了的天气元素，第一动画中第一图像具有的特点可以包括以下(1.1)至(1.3)：

(1.1)每帧第一图像中变形了的天气元素在目标区域上。

变形了的天气元素可以位于目标区域的上表面，或者，变形了的天气元素可以位于目标区域的上方，而与目标区域的上表面具有一定距离。通过具有特点(1.1)，后续在连续显示多帧第一图像的过程中，可以呈现出变形了的天气元素始终在目标区域的上方进行弹跳的效果，例如从目标区域的上表面弹跳至目标区域的上方，再从目标区域的上方弹跳至目标区域的上表面，从而模拟出真实世界中物体在弹跳时，由于受到重力的影响，一般会在平面的上方弹跳的现象。

(1.2)任两帧相邻的第一图像中天气元素的位置变化符合弹跳运动轨迹。

弹跳运动轨迹可以包括：起跳-位置升高-到达最高点-位置降低-到达最低点，相应地，天气元素的位置变化可以包括：天气元素开始位于目标区域的表面上，之后天气元素的显示位置逐渐升高，当天气元素的位置到达最高点后，天气元素的位置逐渐降低，直至天气元素返回到目标区域的表面上。

(1.3)第一动画中第一帧第一图像中变形了的天气元素位于碰撞位置。

该碰撞位置是指界面中移动的天气元素与目标区域之间相互碰撞的位置，可以看作天气元素的移动轨迹与目标区域的边缘之间的交点。通过具有特点(1.3)，后续在显示第一动画的过程中，由于第一帧第一图像中变形了的天气元素的显示位置可以看作弹跳运动的起跳点，可以达到变形了的天气元素以碰撞位置为起始点，开始弹跳的显示效果。

在一种可能的实现方式中，可以通过执行以下步骤一至步骤三，显示具有上述特点的第一动画：

步骤一、根据弹跳运动参数，获取每帧第一图像中天气元素的位置。

可以预先设置弹跳运动参数，弹跳运动参数用于指示弹跳运动轨迹，该弹跳运动参数可以包括速度、加速度、起始方向、衰减因子中的一项或多项，对于第一动画中任两帧相邻的第一图像，可以根据弹跳运动参数以及显示这两帧第一图像的时间间隔，获取天气元素在显示两帧第一图像期间的位移，根据天气元素在上一帧第一图像中的显示位置以及该位移，可以获取天气元素在下一帧第一图像中的显示位置，以此类推，天气元素在每帧第一图像中的显示位置，均可以根据弹跳运动参数以及天气元素在上一帧第一图像中的显示位置得到。通过这种方式获取天气元素的显示位置，在每帧第一图像获取到的显示位置处绘制天气元素，即可保证第一动画具有上述特点(2)，即任两帧相邻的第一图像中天气元素的位置变化符合弹跳运动轨迹。

另外，可以根据目标区域的上表面在屏幕坐标系中的纵坐标，获取变形了的天气元素在屏幕坐标系中的纵坐标，该变形了的天气元素的纵坐标小于或等于目标区域的上表面的纵坐标，那么，由于屏幕坐标系中纵坐标越小的界面元素位置越靠上，可以保证第一动画具有上述特点(1)，即变形了的天气元素始终在目标区域上。

另外，可以获取碰撞位置，作为第一帧第一图像中变形了的天气元素的显示位置，从而保证第一动画具有上述特点(3)。针对获取碰撞位置的过程，可以在天气元素移动显示的过程中，检测天气元素与目标区域之间的碰撞位置，例如实时比较天气元素当前的显示位置与目标区域的边缘位置，当天气元素的显示位置与目标区域的边缘位置相同时，将天气元素的显示位置或目标区域的边缘位置记录为碰撞位置，从而得到碰撞位置。

步骤二、根据每帧第一图像中变形了的天气元素的位置，依次绘制多帧第一图像。

示例性地，假设显示两帧第一图像的时间间隔为t，天气元素与目标区域之间的碰撞位置为l1,在绘制第一帧第一图像时，可以在第一帧第一图像的l1处绘制天气元素。在绘制第二帧第一图像时，可以根据天气元素的速度、加速度以及t，获取天气元素在第一帧第一图像到第二帧第一图像期间的位移s1，根据该位移s1以及l1，获取天气元素在第二帧第一图像中的显示位置l2，在第二帧第一图像的l2处绘制天气元素。在绘制第三帧第一图像时，可以根据天气元素的速度、加速度以及t，获取天气元素在第二帧第一图像到第三帧第一图像期间的位移s2，根据该位移s2以及l2，获取天气元素在第三帧第一图像中的显示位置l3，在第三帧第一图像的l3处绘制天气元素，依次类推。

可选地，每帧第一图像中绘制的变形了的天气元素的数量可以为一个或多个，绘制的变形了的天气元素的数量可以等于界面中碰撞到目标区域的天气元素的数量，也可以等于预设数量。其中，如果在每帧第一图像中绘制多个变形了的天气元素，该多个变形了的天气元素对应的弹跳运动参数可以不同，可以在第一帧第一图像中，在碰撞位置绘制多个变形了的天气元素，而从第二帧第一图像开始，根据每个变形了的天气元素对应的弹跳运动参数，在界面的不同位置绘制变形了的天气元素。

通过这种方式，在显示第一动画时，可以达到这样的显示效果：当界面中的天气元素碰撞到目标区域后，在碰撞位置处变形为多个变形了的天气元素，每个变形了的天气元素按照各自的弹跳运动轨迹进行弹跳，从而呈现出天气元素在目标区域上飞溅四射的效果。以天气元素为雨线元素为例，界面的显示效果可以为：雨线元素在碰撞到目标区域后，在目标区域上变形为多个雨滴，每个雨滴各自进行弹跳，呈现出碰撞位置处雨滴飞溅的效果。

举例来说，请参见图15，假设界面中的雨线元素碰撞到目标区域上的O点，在显示第一动画时，会在O点生成各个雨滴P，每个雨滴P按照不同的初始方向、速度、加速度、衰减因子等属性参数决定的弹跳运动轨迹进行弹跳，当一定数量的雨滴P同时在O点随机生成并各自运动时，即生成了雨滴飞溅效果。其中，图15中角AOB的角度值决定了雨滴弹跳运动的初始方向的范围，角AOB的角度值可以为预设值。

步骤三、连续显示多帧第一图像。

可以分别将每帧第一图像显示到屏幕中，并每隔预设时长，切换屏幕当前显示的第一图像，该预设时长可以很短，例如可以为16ms，通过快速地切换屏幕中显示的第一图像，可以达到连续显示多帧第一图像的效果。具体来说，可以首先在屏幕中显示第一帧第一图像，当经过预设时长后，从第一帧第一图像切换显示为第二帧第一图像，当经过预设时长后，从第二帧第一图像切换显示为第三帧第一图像，依次类推，直至显示最后一帧第一图像。

通过连续显示多帧第一图像，并且不同第一图像中变形了的元素的位置变化符合弹跳运动轨迹，在一个示例性场景中，如果天气元素为雨线元素，目标区域为温度文本，可以显示出雨滴在温度文本上进行弹跳的动画效果，在另一个示例性场景中，如果天气元素为冰雹元素，目标区域为温度文本，可以显示出冰雹粒子在温度文本上进行弹跳的动画效果。在另一个示例性场景中，如果天气元素为雨线元素，目标区域为触摸点所在的区域，可以显示出雨滴在手指触摸的区域上进行弹跳的动画效果。

综上所述，本方式一中，通过显示天气元素在目标区域上进行弹跳的动画，可以模拟出目标区域与天气元素进行交互的过程，表现出天气元素碰撞到目标区域后，目标区域会对天气元素进行反弹，天气元素在弹力的作用下，会产生受力形变，并进行弹跳，提高了天气元素与目标区域的关联性，增加了沉浸感，令界面的显示过程更加直观生动，从而提升了用户体验。

设计二、显示第二动画，第二动画用于显示变形了的天气元素在目标区域上进行沉积。

第二动画可以称为沉积动画、沉积反馈效果，第二动画的显示效果包括：天气元素在碰撞到目标区域后产生变形，停留在目标区域上以进行沉积。举例来说，如果天气元素为雪花元素，则第二动画的显示效果包括：雪粒子在目标区域上进行沉积。如果天气元素为霜元素，则第二动画的显示效果包括：冰晶粒子在目标区域上进行沉积。

第二动画可以包括多帧图像，为了区分描述，在此将第二动画中的每帧图像称为第二图像，每帧第二图像包括变形了的天气元素，第二动画中第二图像具有的特点可以包括以下(2.1)至(2.3)：

(2.1)每帧第二图像中天气元素在目标区域上。

(2.1)与(2.2)同理，在此不做赘述。

(2.2)任两帧相邻的第二图像中，后一帧第二图像中天气元素多于前一帧第二图像中天气元素。

后一帧第二图像中天气元素的数量可以大于前一帧第二图像中天气元素的数量，换句话说，后一帧第二图像可以比前一帧第二图像多出至少一个天气元素，通过具有特点(2.2)，后续在显示第二动画的过程中，目标区域上变形了的天气元素会随着时间推移，沉积得越来越多，从而模拟变形了的天气元素进行沉积的过程。

(2.3)任两帧相邻的第二图像中，后一帧第二图像中的新增天气元素高于前一帧第二图像的沉积高度。

新增天气元素是指后一帧第二图像相对于前一帧第二图像增加的天气元素，即，未在前一帧第二图像中出现，而在后一帧第二图像中出现了的天气元素。该沉积高度是指目标区域上已沉积的天气元素的总高度，可以看作沉积在目标区域上的天气元素的厚度。通过具有特点(2.3)，后续在显示第二动画的过程中，目标区域上变形了的天气元素会随着时间推移，沉积的越来越高，从而模拟变形了的天气元素进行沉积的过程。

在一种可能的实现方式中，可以通过执行以下步骤一至步骤三，显示具有上述特点的第二动画：

步骤一、根据已绘制的前一帧第二图像，获取前一帧第二图像中目标区域上已沉积的天气元素的总高度，得到沉积高度。

可以每绘制一帧第二图像完成后，将这帧第二图像作为前一帧第二图像，获取前一帧第二图像中目标区域上的沉积高度，以便根据沉积高度继续绘制下一帧第二图像。可选地，可以在目标区域上，显示逐层沉积的天气元素，例如先在目标区域上显示沉积了一层的天气元素，再在目标区域上显示沉积了两层的天气元素，则前一帧第二图像中目标区域的沉积高度，可以通过目标区域已沉积的天气元素的层数与天气元素的半径表示，例如，假设天气元素的半径为r,如果前一帧第二图像中目标区域上沉积了一层的天气元素，则确定前一帧第二图像的沉积高度为2r，如果前一帧第二图像中目标区域上沉积了两层的天气元素，则确定前一帧第二图像的沉积高度为4r。

步骤二、根据沉积高度，获取后一帧第二图像中新增天气元素的位置，新增天气元素在后一帧第二图像中的位置高于沉积高度。

可以选取界面中任一高于该沉积高度的位置，作为新增天气元素的位置，以便在绘制后一帧第二图像时，在后一帧第二图像中该新增天气元素的位置处绘制新增天气元素。

可选地，可以将目标区域的边缘位置，作为获取新增天气元素的位置时参考的基准，根据该边缘位置、沉积高度以及天气元素的半径，获取新增天气元素的位置。

具体地，可以获取边缘位置在屏幕坐标系中的纵坐标，计算该纵坐标与沉积高度、天气元素的半径之间的差值，将该差值作为新增天气元素在屏幕坐标系中的纵坐标，从而得到新增天气元素的位置。示例性地，假设目标区域的边缘位置的纵坐标为y1，天气元素的半径为r，如果前一帧第二图像的沉积高度为2r，可以获取y1-2r-r＝y1-3r，将y1-3r作为后一帧第二图像中新增天气元素的纵坐标。

步骤三、根据新增天气元素的位置以及前一帧第二图像，绘制后一帧第二图像。

后一帧第二图像可以看作前一帧第二图像与新增天气元素的叠加，后一帧第二图像包含前一帧第二图像中的每个天气元素以及新增天气元素，针对绘制后一帧第二图像的过程，可以对前一帧第二图像进行复制，得到前一帧第二图像的副本，在前一帧第二图像的副本中新增天气元素的位置处，绘制新增天气元素，得到后一帧第二图像。

上述以绘制任两帧相邻的第二图像的过程为例进行说明，依次类推，第二动画中的每一帧第二图像，均可以根据前一帧第二图像以及新增天气元素绘制得到，通过这种绘制方式，每帧第二图像，都会在包含之前的第二图像的天气元素的基础上，还包含新增天气元素，那么随着绘制过程的执行，每帧第二图像中绘制的天气元素的数量可以越来越多，高度越来越高，从而在连续播放多帧第二图像时，呈现出目标区域上的天气元素越堆越多、越堆越高的显示效果。

如图16所示，以目标区域为字符“2”所处的区域为例，目标区域的边缘位置可以为“2”的弧形顶部，即“2”落在AB之间的弧线中的坐标点，A与B之间的距离可以为“2”的高度的25％。在图16中(1)中，示出了“2”上尚未沉积雪粒子时的显示效果，在图16中(2)中，示出了“2”上沉积了一层雪粒子时的显示效果，在图16中(3)中，示出了“2”上沉积了两层雪粒子时的显示效果。以A在屏幕坐标系中的纵坐标表示为YA为例，在绘制图16中(2)时，沉积高度为0，则新增天气元素的纵坐标＝YA与沉积高度、雪粒子的半径之间的差值＝YA-0-r＝YA-r，可以在图16中(1)的基础上，在YA-r绘制第一层雪粒子，得到图16(2)，在绘制图16中(3)时，沉积高度为2r，则新增天气元素的纵坐标＝YA与沉积高度、雪粒子的半径之间的差值＝YA-2r-r＝YA-3r，可以在图16中(2)的基础上，在YA-3r绘制第二层雪粒子，得到图16(3)，依次类推。

本实施例通过设计和显示第二动画，可以呈现出变形了的天气元素在目标区域上不断沉积的效果。以目标区域为温度文本为例，在一个示例性场景中，如果天气元素为雪花元素，参见图17，通过显示雪粒子在温度文本的边缘进行沉积的动画，可以呈现出温度文本上进行积雪的效果，在另一个示例性场景中，如果天气元素为霜元素，参见图18，通过显示霜粒子在温度文本的边缘进行沉积的动画，可以呈现出温度文本上凝结成霜的效果，在另一个示例性场景中，如果天气元素为沙元素，参见图19，通过显示沙粒子在温度文本的边缘进行沉积的动画，可以呈现出温度文本上沉积了沙子的效果，在另一个示例性场景中，如果目标区域为触摸点所在的区域，天气元素为雪花元素，可以呈现出雪粒子在手指触摸的区域不断沉积的效果。

可选地，第二动画中的每帧第二图像中，目标区域上已沉积的不同天气元素的透明度可以不同，则透明度较低的天气元素的显示效果会较为不透明，看起来比较实，能够遮挡在该天气元素后侧的界面元素，透明度较高的天气元素的显示效果较为透明，看起来比较虚，能够透过该天气元素看到在该天气元素后侧的界面元素，则目标区域上不同天气元素呈现出的虚实程度不同，基于近实远虚的视觉原理，会让人感觉目标区域上沉积的天气元素，有的距离屏幕较近，有的距离屏幕较远，达到天气元素的布局稀疏错落的效果。

针对不同天气元素的透明度不同的实现方式，在一种可能的实现中，对于目标区域上的每个沉积的天气元素，在绘制该天气元素时，可以生成一个随机数，将该随机数赋值为天气元素的透明度，按照该透明度绘制该天气元素，由于每次生成的随机数不同，可以保证不同天气元素具有不同的透明度。

可选的，第二动画中的每帧第二图像中，目标区域上已沉积的不同天气元素的位置不同，例如，对于目标区域沉积的一层天气元素来说，有的天气元素位置稍微偏上，有的天气元素的位置稍微偏下，有的天气元素的位置稍微偏左，有的天气元素的位置稍微偏右，从而令沉积的不同天气元素在排布时位置相互错开，达到天气元素的布局错落有致的效果。

针对不同天气元素的位置不同的实现方式，在一种可能的实现中，对于目标区域上的每个沉积的天气元素，在绘制该天气元素时，可以当确定该天气元素的点坐标后，获取偏移量，向天气元素的点坐标添加偏移量，得到偏移后的点坐标，将偏移后的点坐标作为绘制该天气元素的实际位置，在偏移后的点坐标绘制该天气元素。通过向天气元素的点坐标添加偏移量，天气元素的显示位置会产生偏移量对应的偏移，从而改变了天气元素的位置。其中，该偏移量可以为临时生成的随机数，也可以为预设数值，偏移量的取值范围可以属于0到半径r之间。

示例性地，假设待绘制的天气元素的点坐标为(x,y)，随机量Δx，Δy，向天气元素的点坐标添加偏移量后，则天气元素的偏移后的点坐标为(x+Δx,y+Δy)，则天气元素的位置会在x轴方向上偏移了Δx，在y轴方向上偏移了Δy。

设计三、显示目标区域融化扭曲的图像。

本设计三可以称为融化效果、日照反馈效果，可以应用在天气类型为晴天或者高温的场景中，通过显示目标区域融化扭曲的图像，可以模拟真实世界中物体由于气温的升高、阳光的照耀而产生融化的现象。

针对显示融化扭曲的图像的具体过程，在一种可能的实现中，可以改变目标区域中至少一个子区域的顶点位置，通过改变子区域的顶点位置，子区域中的图像会产生形变，从而产生扭曲，达到显示出融化扭曲的图像的效果。其中，每个子区域的形状可以为方格形，每个子区域的面积可以大于或等于1个像素点的面积。

针对改变子区域的顶点位置的具体过程，可以获取子区域的顶点的点坐标，并获取随机量，向顶点的点坐标添加偏移量，将添加偏移量的点坐标作为改变后的顶点位置，其中，该偏移量可以为临时生成的随机数，也可以为预设数值。

举例来说，请参见图20，图20中的小方格为一个子区域，假设小方格的任一顶点的点坐标为(x,y)，随机量为Δx，Δy，则向顶点的点坐标添加偏移量后，顶点的点坐标变为(x+Δx,y+Δy)，也即是，顶点在x轴方向上偏移了Δx，在y轴方向上偏移了Δy。通过改变小方格的四个顶点的位置，即可让小方格中的图像产生扭曲。

针对目标区域中的至少一个子区域，可以根据目标区域的面积以及子区域的面积，将目标区域划分为至少一个子区域，例如，可以将预设面积作为子区域的面积，根据预设面积对目标区域进行均分，得到至少一个子区域。其中，由于子区域的面积越小，目标区域划分的会越密集，呈现的效果会越平滑细腻，而计算量越大。在实现过程中，可以根据对显示效果的要求以及计算量的要求，设置划分的子区域的面积，令显示效果较好，同时计算量不至于过大。

示例性地，请参见图21，以目标区域为温度文本所在的区域为例，可以将温度文本所在的矩形区域分为m*n的小方格，将每个小方格作为一个子区域。其中，图21中的点x为任意小方格的任意顶点，通过改变点x的点坐标(x,y)，可以令点x处的图像扭曲，依次类推，通过改变每个小方格的顶点坐标，可以令“38°”中各个位置处的图像扭曲，例如请参见图22，整个“38°”呈现出了融化扭曲的效果。

上述阐述了显示目标区域融化扭曲的图像的过程，在一种可能的实现中，也可以通过显示动画，呈现出目标区域进行融化扭曲的效果。以融化扭曲的效果对应的动画称为第三动画为例，可以显示第三动画，第三动画用于显示目标区域随时间推移，进行融化扭曲。

例如，第三动画的显示效果可以包括：随时间推移，目标区域融化扭曲的效果不断变化。针对显示这种第三动画的具体实现方式，以第三动画中每一帧图像称为第三图像为例，在绘制任一帧第三图像时，可以获取上一帧第三图像中每个子区域的顶点坐标以及偏移量，对偏移量进行更新，向子区域的顶点坐标添加更新后的偏移量，将添加了更新后的偏移量的顶点坐标作为本帧第三图像中子区域的顶点位置，则由于本帧第三图像相对于上一帧第三图像来说，目标区域中子区域的顶点位置发生了更新，可以实现目标区域融化扭曲的效果发生更新的效果。

又如，第三动画的显示效果可以包括：随时间推移，目标区域融化扭曲的程度越来越强。针对显示这种第三动画的具体实现方式，以第三动画中每一帧图像称为第三图像为例，在绘制任一帧第三图像时，可以获取上一帧第三图像中每个子区域的顶点坐标以及偏移量，对偏移量进行递增，向子区域的顶点坐标添加递增后的偏移量，将添加了递增后的偏移量的顶点坐标作为本帧第三图像中子区域的顶点位置，则由于本帧第三图像相对于上一帧第三图像来说，目标区域中子区域的顶点位置偏移地更多，可以实现目标区域融化扭曲的效果发生增强的效果。

可选地，在显示目标区域融化扭曲的图像的基础上，还可以在界面中显示从内向外扩散光线线条，通过光线线条的扩散过程可以模拟阳光的辐射过程。

针对显示光线线条的实现方式，可以绘制预设宽度的环形，将该环形作为光线线条，将该环形显示到屏幕中。针对显示光线线条进行扩散的实现方式，在绘制界面时，可以获取上一次绘制的界面中光线线条的半径，对该半径进行递增，根据递增后的半径，在界面中绘制光线线条，则本次绘制的界面中光线线条的半径为递增后的半径。依次类推，每次绘制的界面均可以比上一次绘制的界面中光线线条的半径大，则通过连续显示多次绘制的界面，可以达到界面中光线线条的半径逐渐增大的显示效果，模拟出光线线条不断扩散的现象。

可选地，在显示界面的过程中，可以实时检测当前显示的界面中光线线条的半径，判断光线线条的半径是否超过预设阈值，当光线线条的半径超过预设阈值时，则销毁原先显示的光线线条，重新生成新的光线线条，并重复显示从内向外扩散光线线条。

进一步地，可以在界面中显示融化扭曲的光线线条，从而模拟光线线条由于折射和高温的因素，呈现融化扭曲的效果。其中，显示融化扭曲的光线线条的实现方式与显示融化扭曲的目标区域的方式同理。例如，请参见图23，在“38°”的基础上，还显示出了融化扭曲的、向外扩散的光线线条。

综上所述，本设计三中，通过显示目标区域融化扭曲的图像，可以模拟出目标区域由于温度升高而产生融化扭曲的效果。在一个示例性场景中，如果目标区域为温度文本，可以呈现出温度文本进行融化扭曲的效果，在另一个示例性场景中，如果目标区域为触摸点所在的区域时，可以呈现手指触摸的区域进行融化扭曲的效果。

本实施例提供的方法，会在界面中显示移动的天气元素，如果天气元素在移动的过程中，碰撞到了界面的目标区域，会在目标区域的周围，显示天气元素的变形图像，从而表现出天气元素与目标区域相互碰撞后，天气元素的形态产生的变化。通过这种界面显示方法，能够表现出天气元素与目标区域之间的交互，令天气元素与目标区域看起来是两个在界面中进行互动的对象，当天气元素作用于目标区域后，目标区域就会对天气元素产生反馈，让天气元素产生形变，从而提高了天气元素的真实感和表现力，进而提高了整个界面的真实感和表现力，增加了沉浸感，令界面的显示过程更加直观生动，从而提升了用户体验。

基于上述各实施例，本实施例提供了一种界面显示装置，参见图24，该装置包括：获取模块2401和显示模块2402。

获取模块2401，用于执行上述步骤202；

该获取模块2401，还用于执行上述步骤205；

显示模块2402，用于执行上述步骤206。

在一种可能的实现中，该获取模块2401，用于执行上述步骤202中的方式一和/或方式二。

在一种可能的实现中，该装置还包括：

边缘提取模块，用于执行上述步骤203中的步骤一和步骤二；

确定模块，用于当该显示位置与该边缘位置相同时，确定该显示位置与该目标区域的距离符合该预设条件。

在一种可能的实现中，该边缘提取模块，用于：获取该边缘图像中弧形顶部的点坐标，作为该边缘位置；或，获取该边缘图像中直线形顶部的点坐标，作为该边缘位置；或，获取该边缘图像中斜坡形顶部的点坐标，作为该边缘位置。

在一种可能的实现中，该显示模块2402，用于执行步骤206中设计一、设计二、设计三中的一项或多项。

在一种可能的实现中，该显示模块2402，用于：连续显示多帧第一图像。

在一种可能的实现中，该获取模块2401，还用于根据弹跳运动参数，获取每帧第一图像中天气元素的位置；

该装置还包括：绘制模块，用于根据每帧第一图像中天气元素的位置，依次绘制该多帧第一图像。

在一种可能的实现中，该显示模块2402，用于：连续显示多帧第二图像。

在一种可能的实现中，该任两帧相邻的第二图像中，后一帧第二图像中的新增天气元素高于前一帧第二图像的沉积高度。

在一种可能的实现中，该获取模块2401，还用于：根据已绘制的前一帧第二图像，获取该前一帧第二图像中该目标区域上已沉积的天气元素的总高度，得到沉积高度；根据该沉积高度，获取后一帧第二图像中新增天气元素的位置；

该装置还包括：绘制模块，根据该新增天气元素的位置以及该前一帧第二图像，绘制该后一帧第二图像。

在一种可能的实现中，每帧第二图像中，已沉积的不同天气元素的透明度不同；和/或，

每帧第二图像中，已沉积的不同天气元素的位置不同。

在一种可能的实现中，该装置还包括：

位置改变模块，用于改变该目标区域的至少一个子区域的顶点位置。

上述各个模板可以基于处理器加存储器的硬件来实现,也即可以通过处理器运行存储在存储器中的软件代码来执行相应的软件,上述各个模块具体可以是软件中执行相应功能的软件模块。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机程序指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机程序指令可以从一个网站站点、计算机、服务器或数据中心通过有线或无线方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质(例如软盘、硬盘、磁带)、光介质(例如，数字视频光盘(digital video disc，DVD)、或者半导体介质(例如固态硬盘)等。

本申请中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本申请中的字符“/”，一般表示前后关联对象是一种“或”的关系。以上所述仅为本申请的可选实施例，并不用以限制本申请，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。

Claims (28)

1.一种界面显示方法，其特征在于，所述方法包括：

获取界面中目标区域，所述目标区域为天气元素在移动显示过程中会碰撞的障碍区域；

获取所述界面中移动的天气元素当前的显示位置；

当所述显示位置与所述目标区域的距离符合预设条件时，在所述目标区域的预设范围内，显示所述天气元素的变形图像，所述变形图像用于表现所述天气元素碰撞到所述目标区域后，所述天气元素的形态产生的变化。

2.根据权利要求1所述的方法，其特征在于，所述获取界面中目标区域，包括：

当前台显示界面包含温度文本时，将所述温度文本中字符所处的区域作为所述目标区域；和/或，

当检测到触摸操作时，将所述触摸操作的触摸点所处的区域，作为所述目标区域。

3.根据权利要求1所述的方法，其特征在于，所述获取界面中目标区域之后，所述方法还包括：

对所述目标区域对应的图层进行边缘提取，得到所述目标区域的边缘图像；

根据所述边缘图像，获取所述目标区域的边缘位置；

所述获取所述界面中移动的天气元素当前的显示位置之后，所述方法还包括：

当所述显示位置与所述边缘位置相同时，确定所述显示位置与所述目标区域的距离符合所述预设条件。

4.根据权利要求3所述的方法，其特征在于，所述根据所述边缘图像，获取所述目标区域的边缘位置，包括：

当所述目标区域具有弧形顶部时，获取所述边缘图像中弧形顶部的点坐标，作为所述边缘位置；或，

当所述目标区域具有直线形顶部时，获取所述边缘图像中直线形顶部的点坐标，作为所述边缘位置；或，

当所述目标区域具有斜坡形顶部时，获取所述边缘图像中斜坡形顶部的点坐标，作为所述边缘位置。

5.根据权利要求1所述的方法，其特征在于，所述显示所述天气元素的变形图像，包括：

显示第一动画，所述第一动画用于显示变形了的天气元素在所述目标区域上进行弹跳；和/或，

显示第二动画，所述第二动画用于显示变形了的天气元素在所述目标区域上进行沉积。

6.根据权利要求5所述的方法，其特征在于，所述显示第一动画，包括：

连续显示多帧第一图像，每帧第一图像中变形了的天气元素在所述目标区域上，且任两帧相邻的第一图像中，变形了的天气元素的位置变化符合弹跳运动轨迹。

7.根据权利要求6所述的方法，其特征在于，所述连续显示多帧第一图像之前，所述方法还包括：

根据弹跳运动参数，获取每帧第一图像中变形了的天气元素的位置，所述弹跳运动参数用于指示所述弹跳运动轨迹；

根据每帧第一图像中变形了的天气元素的位置，依次绘制所述多帧第一图像。

8.根据权利要求5所述的方法，其特征在于，所述显示第二动画，包括：

连续显示多帧第二图像，每帧第二图像中变形了的天气元素在所述目标区域上，且任两帧相邻的第二图像中，后一帧第二图像中变形了的天气元素，多于前一帧第二图像中变形了的天气元素。

9.根据权利要求8所述的方法，其特征在于，所述任两帧相邻的第二图像中，后一帧第二图像中的新增天气元素高于前一帧第二图像的沉积高度，所述新增天气元素是指后一帧第二图像相对于前一帧第二图像增加的变形了的天气元素，所述沉积高度是指所述目标区域上已沉积的天气元素的总高度。

10.根据权利要求9所述的方法，其特征在于，所述连续显示多帧第二图像之前，所述方法还包括：

根据已绘制的前一帧第二图像，获取所述前一帧第二图像中所述目标区域上已沉积的天气元素的总高度，得到沉积高度；

根据所述沉积高度，获取后一帧第二图像中新增天气元素的位置，所述新增天气元素在所述后一帧第二图像中的位置高于所述沉积高度；

根据所述新增天气元素的位置以及所述前一帧第二图像，绘制所述后一帧第二图像，所述后一帧第二图像包含所述前一帧第二图像中的每个天气元素以及所述新增天气元素。

11.根据权利要求8所述的方法，其特征在于，

每帧第二图像中，已沉积的不同天气元素的透明度不同；和/或，

每帧第二图像中，已沉积的不同天气元素的位置不同。

12.根据权利要求1所述的方法，其特征在于，所述方法还包括：

显示所述目标区域融化扭曲的图像；和/或，

显示第三动画，所述第三动画用于显示所述目标区域随时间推移，进行融化扭曲。

13.根据权利要求12所述的方法，其特征在于，所述显示所述目标区域融化扭曲的图像，包括：

改变所述目标区域的至少一个子区域的顶点位置。

14.一种界面显示装置，其特征在于，所述装置包括：

获取模块，用于获取界面中目标区域，所述目标区域为天气元素在移动显示过程中会碰撞的障碍区域；

所述获取模块，还用于获取所述界面中移动的天气元素当前的显示位置；

显示模块，用于当所述显示位置与所述目标区域的距离符合预设条件时，在所述目标区域的预设范围内，显示所述天气元素的变形图像，所述变形图像用于表现所述天气元素碰撞到所述目标区域后，所述天气元素的形态产生的变化。

15.根据权利要求14所述的装置，其特征在于，所述获取模块，用于当前台显示界面包含温度文本时，将所述温度文本中字符所处的区域作为所述目标区域；和/或，当检测到触摸操作时，将所述触摸操作的触摸点所处的区域，作为所述目标区域。

16.根据权利要求14所述的装置，其特征在于，所述装置还包括：

边缘提取模块，用于对所述目标区域对应的图层进行边缘提取，得到所述目标区域的边缘图像；

确定模块，用于当所述显示位置与所述边缘位置相同时，确定所述显示位置与所述目标区域的距离符合所述预设条件。

17.根据权利要求16所述的装置，其特征在于，所述边缘提取模块，用于：当所述目标区域具有弧形顶部时，获取所述边缘图像中弧形顶部的点坐标，作为所述边缘位置；或，当所述目标区域具有直线形顶部时，获取所述边缘图像中直线形顶部的点坐标，作为所述边缘位置；或，当所述目标区域具有斜坡形顶部时，获取所述边缘图像中斜坡形顶部的点坐标，作为所述边缘位置。

18.根据权利要求14所述的装置，其特征在于，所述显示模块，用于：显示第一动画，所述第一动画用于显示变形了的天气元素在所述目标区域上进行弹跳；和/或，显示第二动画，所述第二动画用于显示变形了的天气元素在所述目标区域上进行沉积。

19.根据权利要求18所述的装置，其特征在于，所述显示模块，用于：连续显示多帧第一图像，每帧第一图像中天气元素在所述目标区域上，且任两帧相邻的第一图像中天气元素的位置变化符合弹跳运动轨迹。

20.根据权利要求19所述的装置，其特征在于，所述获取模块，还用于根据弹跳运动参数，获取每帧第一图像中天气元素的位置，所述弹跳运动参数用于指示所述弹跳运动轨迹；

所述装置还包括：

绘制模块，用于根据每帧第一图像中天气元素的位置，依次绘制所述多帧第一图像。

21.根据权利要求18所述的装置，其特征在于，所述显示模块，用于：连续显示多帧第二图像，每帧第二图像中变形了的天气元素在所述目标区域上，且任两帧相邻的第二图像中，后一帧第二图像中变形了的天气元素，多于前一帧第二图像中变形了的天气元素。

22.根据权利要求21所述的装置，其特征在于，所述任两帧相邻的第二图像中，后一帧第二图像中的新增天气元素高于前一帧第二图像的沉积高度，所述新增天气元素是指后一帧第二图像相对于前一帧第二图像增加的变形了的天气元素，所述沉积高度是指所述目标区域上已沉积的天气元素的总高度。

23.根据权利要求21所述的装置，其特征在于，所述获取模块，还用于：根据已绘制的前一帧第二图像，获取所述前一帧第二图像中所述目标区域上已沉积的天气元素的总高度，得到沉积高度；根据所述沉积高度，获取后一帧第二图像中新增天气元素的位置，所述新增天气元素在所述后一帧第二图像中的位置高于所述沉积高度；

所述装置还包括：绘制模块，根据所述新增天气元素的位置以及所述前一帧第二图像，绘制所述后一帧第二图像，所述后一帧第二图像包含所述前一帧第二图像中的每个天气元素以及所述新增天气元素。

24.根据权利要求21所述的装置，其特征在于，

每帧第二图像中，已沉积的不同天气元素的透明度不同；和/或，

每帧第二图像中，已沉积的不同天气元素的位置不同。

25.根据权利要求14所述的装置，其特征在于，所述显示模块，还用于：

显示所述目标区域融化扭曲的图像；和/或，显示第三动画，所述第三动画用于显示所述目标区域随时间推移，进行融化扭曲。

26.根据权利要求25所述的装置，其特征在于，所述装置还包括：

位置改变模块，用于改变所述目标区域的至少一个子区域的顶点位置。

27.一种终端，其特征在于，所述终端包括处理器和存储器，所述存储器中存储有至少一条指令，所述指令由所述处理器加载并执行以实现如权利要求1-13中任一项所述的界面显示方法所执行的操作。

28.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令，所述指令由所述处理器加载并执行以实现如权利要求1-13中任一项所述的界面显示方法所执行的操作。