CN112346614B - 图像显示方法及装置、电子设备、存储介质 - Google Patents

Abstract

本公开是关于一种图像显示方法及装置、电子设备、存储介质。该方法包括：分割待显示的第一候选图像，获得预设数量个候选子图像；将各候选子图像依次赋给预设图像模板中第一图像模板中的各图像子模板；所述图像子模板的数量与候选子图像的数量相同；调整预设图像模板中的各图像子模板，以使所述第一候选图像显示预设的动画效果。本实施例中可以自由替换第一候选图像并选择候选图像的动画效果，可以减少制作成本，扩大应用范围，提升用户使用体验。

Description

图像显示方法及装置、电子设备、存储介质

技术领域

本公开涉及控制技术领域，尤其涉及一种图像显示方法及装置、电子设备、存储介质。

背景技术

目前，图片播放效果通常对图片的整体进行控制，如移动、缩放、旋转、透明变化等，从而达到特效。例如，现有方案可以采用photoshop等美术制作软件，把素材做成GIF或者视频；然而，图片一旦确定，则不能自由替换，否则需要重新制作，导致应用范围受限且制作成本较高。

发明内容

本公开提供一种图像显示方法及装置、电子设备、存储介质，以解决相关技术的不足。

根据本公开实施例的第一方面，提供一种图像显示方法，所述方法包括：

分割待显示的第一候选图像，获得预设数量个候选子图像；

将各候选子图像依次赋给预设图像模板中第一图像模板中的各图像子模板；所述图像子模板的数量与候选子图像的数量相同；

调整预设图像模板中的各图像子模板，以使所述第一候选图像显示预设的动画效果。

可选地，调整预设图像模板中的各图像子模板，包括：

将所述第一图像模板中的各图像子模板中的候选子图像依次赋给第二图像模板相对应的图像子模板；所述预设图像模板包括第二图像模板，所述第二图像模板中的各图像子模板与所述第一图像模板中的各图像子模板一一对应；

基于预设的动画效果获取所述第二图像模板中的各图像子模板的调整顺序和显示参数；所述预设的动画效果从电子设备的配置信息中获取；

按照所述调整顺序依次调整第二图像模板中的各图像子模板的显示参数。

可选地，将所述第一图像模板中的各图像子模板中的候选子图像依次赋给第二图像模板相对应的图像子模板，包括：

将所述第二图像模板中的各图像子模板调整为显示状态；

将所述第一图像模板中的各图像子模板中的候选子图像依次赋给所述第二图像模板中对应的图像子模板。

可选地，将所述第一图像模板中的各图像子模板中的候选子图像依次赋给所述第二图像模板中对应的图像子模板之后，所述方法还包括：

获取待显示的第二候选图像；

分割所述第二候选图像，并将获得预设数量个候选子图像依次赋给所述第一图像模板中的各图像子模板。

可选地，所述显示参数包括以下至少一种：

缩放系数、显示坐标和透明度；

或者，

所述调整顺序包括以下至少一种：

行、列、之字形、左右同时向中间顺序、从当前位置移出边界、从一个顶角向对角、同时调整并移动边界。

根据本公开实施例的第二方面，提供一种图像显示装置，所述装置包括：

图像获取模块，用于分割待显示的第一候选图像，获得预设数量个候选子图像；

图像赋给模块，用于将各候选子图像依次赋给预设图像模板中第一图像模板中的各图像子模板；所述图像子模板的数量与候选子图像的数量相同；

模板调整模块，用于调整预设图像模板中的各图像子模板，以使所述第一候选图像显示预设的动画效果。

可选地，所述模板调整模块包括：

子图像赋给单元，用于将所述第一图像模板中的各图像子模板中的候选子图像依次赋给第二图像模板相对应的图像子模板；所述预设图像模板包括第二图像模板，所述第二图像模板中的各图像子模板与所述第一图像模板中的各图像子模板一一对应；

顺序参数获取单元，用于基于预设的动画效果获取所述第二图像模板中的各图像子模板的调整顺序和显示参数；所述预设的动画效果从电子设备的配置信息中获取；

显示参数调整单元，用于按照所述调整顺序依次调整第二图像模板中的各图像子模板的显示参数。

可选地，所述子图像赋给单元包括：

显示状态调整子单元，用于将所述第二图像模板中的各图像子模板调整为显示状态；

子图像赋给子单元，用于将所述第一图像模板中的各图像子模板中的候选子图像依次赋给所述第二图像模板中对应的图像子模板。

可选地，所述装置还包括：

图像获取模块，还用于获取待显示的第二候选图像；

图像赋给模块，还用于分割所述第二候选图像，并将获得预设数量个候选子图像依次赋给所述第一图像模板中的各图像子模板。

可选地，所述显示参数包括以下至少一种：

缩放系数、显示坐标和透明度；

或者，

所述调整顺序包括以下至少一种：

行、列、之字形、左右同时向中间顺序、从当前位置移出边界、从一个顶角向对角、同时调整并移动边界。

根据本公开实施例的第三方面，提供一种一种电子设备，包括：

处理器；

用于存储所述处理器可执行的计算机程序的存储器；

其中，所述处理器被配置为执行所述存储器中的计算机程序，以实现上述方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，当所述存储介质中的可执行的计算机程序由处理器执行时，能够实现上述方法。

本公开的实施例提供的技术方案可以包括以下有益效果：

由上述实施例可知，本公开实施例中可以分割待显示的第一候选图像，获得预设数量个候选子图像；然后，将各候选子图像依次赋给预设图像模板中第一图像模板中的各图像子模板；所述图像子模板的数量与候选子图像的数量相同；之后，调整预设图像模板中的各图像子模板，以使所述第一候选图像显示预设的动画效果。这样，本实施例中可以自由替换第一候选图像并选择候选图像的动画效果，可以减少制作成本，扩大应用范围，提升用户使用体验。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1是根据一示例性实施例示出的一种图像显示方法的流程图。

图2是根据一示例性实施例示出的获取第一候选图像的示意图。

图3是根据一示例性实施例示出的分割第一候选图像的效果示意图。

图4是根据一示例性实施例示出的预设图像模板的示意图。

图5是根据一示例性实施例示出的分割第一候选图像的示意图。

图6是根据一示例性实施例示出的一种图像显示方法的流程图。

图7是根据一示例性实施例示出的一种图像显示装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性所描述的实施例并不代表与本公开相一致的所有实施例。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置例子。

为解决上述技术问题，本实施例提供了一种图像显示方法，可以应用于电子设备，该电子设备可以包括但不限于：智能手机、平板电脑，以及广告显示屏等设备。电子设备可以用户选择的图像，以下称之为候选图像。图1是根据一示例性实施例示出的一种图像显示方法的流程图，参见图1，一种图像显示方法，包括步骤11～步骤13，其中：

在步骤11中，分割待显示的第一候选图像，获得预设数量个候选子图像。

本实施例中，电子设备内可以预先存储待显示的至少一张图像，该至少一张图像可以存储到指定位置，例如本地存储器。在有播放需求时，电子设备可以从指定位置读取候选图像，以下称之为第一候选图像，以区别于后续的第二候选图像。

本实施例中，电子设备可以将上述第一候选图像进行分割，如均匀分割，从而可以获取到预设数量个候选子图像。其中预设数量可以根据具体场景进行设置，如4*8个，这样可以将图2所示的第一候选图像分割为4*8个图3所示的候选子图像。

在步骤12中，将各候选子图像依次赋给预设图像模板中第一图像模板中的各图像子模板；所述图像子模板的数量与候选子图像的数量相同。

本实施例中，电子设备内可以存储预设图像模板。该预设图像模板包括重叠设置的第一图像模板和第二图像模板。第一图像模板中的各图像子模板和第二图像模板中的各图像子模板一一对应，并且第一图像模板中的图像子模板的数量与第一候选图像中的候选子图像的数量相同。

例如，本实施例中可以设置两个完全相同的图像模板，如图4中的图(a)和图(b)所示。各图像模板包括预设数量个图像子模板；之后，将两个图像模板重叠放置，该两个图像模板即是第一图像模板和第二图像模板。

需要说明的是，第一图像模板和第二图像模板仅在于位置不同。以第一图像模板为例，图4中第一图像模板中相邻两个图像子模板之间有缝隙，其仅仅是为了方便阅读理解本公开的方案。实际应用中，相邻两个图像子模板之间是没有缝隙的。相应地，后续基于第一图像模板和/或第二图像模板来调整图像的过程中，候选图像中相邻两个候选子图像之间的缝隙仅用于方便描述，实际上并不存在缝隙。

可理解的是，电子设备在步骤11对第一候选图像分割时，可以按照图像子模板的布局方式来进行分割，分割效果如图3所示。

本实施例中，电子设备可以将第一候选图像中的各候选子图像一一赋给第一图像模板中的各图像子模板。以将图3所示的候选子图像分别赋给图4中第一图像模板(a)为例，可以获得如图5所示效果。

在步骤13中，调整预设图像模板中的各图像子模板，以使所述第一候选图像显示预设的动画效果。

本实施例中，电子设备可以调整预设图像模板中的各图像子模板。参见图6，在步骤61中，电子设备可以将第一图像模板中的各图像子模板中的候选子图像依次赋给第二图像模板相对应的图像子模板。在一示例中，第二图像模板默认处于关闭状态即不显示状态，电子设备可以将第二图像模板调整为开启状态即显示状态，并将第一图像模板中的各图像子模板中的候选子图像依次赋给第二图像模板中对应的图像子模板。

在步骤62中，电子设备内可以预先存储多个动画效果，电子设备可以根据配置信息获取用户预设的动画效果。并且，电子设备可以基于预设的动画效果获取第二图像模板中的各图像子模板的调整顺序和显示参数。其中，显示参数可以包括以下至少一种：缩放系数、显示坐标、透明度。调整顺序可以包括以下至少一种：按行顺序调整、按列顺序调整、按之字形调整、左右同时向中间顺序调整、按照行或列顺序从当前位置移出边界、从一个顶角向对角顺序调整、同时调整并移动边界。可理解的是，显示参数的调整顺序可以根据具体场景进行选择，从而组合出不同的动画效果。

在一示例中，动画效果可以包括但不限于：

1、按照行顺序或者列顺序依次缩小各图像子模板，包括：调整图像子模板的缩放系数逐渐缩小至0，即给每个图像子模板作了一个缩小画面。相邻两个图像子模板的时间间隔可以设置，如0.01～10秒。并且，可以按行顺序或者列顺序依次调整每个图像子模板。

2、按照行顺序或者列顺序依次渐变翻转消失各图像子模板，包括：按照行顺序将每个图片子模板的x坐标旋转到90度；或者，按照列顺序将每个图片子模板的y坐标旋转到90度。

3、按照行顺序或者列顺序依次渐变消失各图像子模板，包括：按照行顺序或者列顺序将各图像子模板的透明度渐变为0，达到消失的效果。

4、分成两组移出边界消失，包括：将32个图片子模板分为左右两组；然后，左侧组向右渐变移动且右侧组向左移动，直到移出两组的分界线消失。

5、按照行顺序或者列顺序依次渐变移出边界消失。

6、按照行顺序或者列顺序依次缩放系数依次渐变缩小为0，缩小所有时间可设置如0.02秒；同时，在消失图片子模板的位置播放一个粒子特效，如爆炸效果。

7、依次缩小整行或者整列的图像子模板的缩放系数渐变至0，相邻两行或两列之间一个时间间隔，如0.02秒，达到一行接一行或者一列接一列消失的效果。

8、按照一个顶角向对角逐步消失，包括：从左上角到右下角，或者从左下角到右上角逐步消失，从右上角到左下角，或者从右下角到左上角逐步消失。

9、每个图像子模板按照预设频率作左右摆动或者随机摆动，同时或者随后整体往下移出显示边界，达到抖落物体的效果。

10、按行以“之”字形顺序将各图图像子模板的缩放系数依次缩小至0，同时有一个小汽车图标沿着候选子图像缩放顺序的路径运动，达到汽车把图像收走的效果。

需要说明的是，如果电子设备不是全屏显示上述第一候选图像时，可以预先设置显示范围，避免动画效果影响到未显示区域。

在步骤63中，电子设备可以按照调整顺序依次调整第二图像模板中的各图像子模板的显示参数，达到预设的动画效果。

在一实施例中，参见图7，在步骤71中，电子设备还可以再获取一张待显示的候选图像，即第二候选图像。在步骤72中，按照步骤11和步骤12，分割所述第二候选图像，并将获得预设数量个候选子图像依次赋给所述第一图像模板中的各图像子模板，这样可以为显示下一张候选图像作好准备。

需要说明的是，图7所示实施例可以在完成步骤12后立刻进行或者同时进行，达到从第二候选图像上采用预设的动画效果去掉第一候选图像的效果。

至此，本公开实施例中可以分割待显示的第一候选图像，获得预设数量个候选子图像；然后，将各候选子图像依次赋给预设图像模板中第一图像模板中的各图像子模板；所述图像子模板的数量与候选子图像的数量相同；之后，调整预设图像模板中的各图像子模板，以使所述第一候选图像显示预设的动画效果。这样，本实施例中可以自由替换第一候选图像并选择候选图像的动画效果，可以减少制作成本，扩大应用范围，提升用户使用体验。

下面结合三维游戏引擎Unity使用场景来描述图像显示方法的具体流程，包括：

首先，电子设备运行三维游戏引擎Unity，读取第一候选图像，利用UI接口UnityEngie.UI.Sprite.Create接口遍历第一候选图像，并分割为4*8个子图像。

其中，电子设备中预先设置预设图像模板，即编辑4*8个图像模板Unity的Image，形成一个第一图像模板；同时设置另一个图像模板，即第二图像模板，并将第一图像模板和第二图像模板叠在一起。

然后，电子设备加载已经分割的候选子图像。加载软件外部指定目录下的所有候选子图像，然后遍历所有候选子图像，按序号存在一个字典中。继续以4*8为例，在代码中遍历分割图片，示例代码为：

Sprite.Create(mtexture,new Rect(new Vector2(texWidth/8*column,texHeight/4*row),new Vector2(texWidth/8,texHeight/4)),new Vector2(0,0))；

其中：Sprite.Create()是Unity引擎的UI接口，

Rect：为Unity引擎的矩形接口。

mtexture指加载的某张候选子图像。

texWidth指候选子图像的宽。

texHeight指候选子图像的高。

column是列，值为0-7。

row是行，值为0-3,

每张候选子图像的宽：texWidth/8。

每张候选子图像的高：texHeight/4。

每张候选子图像对应第一候选图像的区域位置：new Vector2(texWidth/8*column,texHeight/4*row)。

如每张第一候选图像分割后的第一张子图像对应原图的区域为：

new Rect(new Vector2(0,0),new Vector2(texWidth/8,texHeight/4))。

第二张候选子图像对应的原图区域为：

new Rect(new Vector2(texWidth/8,texHeight/4),new Vector2(texWidth/8,texHeight/4))。

之后，电子设备可以一定次序(行或列)将存储在字典中的候选子图像分别赋给对应的候选子模板。

再者，在播放时，按行列遍历场景中编辑好的第一图像模板，按照第一候选图像的序号、行列数值找到存储在字典中的候选子图像，直接赋给该子模板。

最后，调整图像子模板并显示动画效果。此时，电子设备可以调整第二图像模板，即动画效果通过控制创建的第二图像模板“消失”实现的。以控制第二图像模板中的32个物体为例，在默认情况下，第二图像模板不显示。当播放动画时，把第二图像模板设置为显示状态，并把第一图像模板中的第一候选图像赋给第二图像模板，即将第一图像模板中各图像子模板的候选子图像赋给第二图像模板中各图像子模板。同时，电子设备可以获取第二候选图像，并将第二候选图像赋给第一图像模板。

电子设备按照预设顺序对第二图像模板中的各个图像子模块的显示参数，即对赋给好图的UnityEngine UI的UI元素Image进行缩小、透明渐变等动画处理。

也说是说，电子设备第一图像模板进行来暂存待显示的候选图像，在显示过程中，将第一图像模板中的第一候选图像赋给第二图像模板，并调整第二图像模板，达到采用预设效果来显示第一候选图像的效果。

图7是根据一示例性实施例示出的一种图像显示方法的流程图，参见图7，一种图像显示装置，所述装置包括：

图像获取模块71，用于分割待显示的第一候选图像，获得预设数量个候选子图像；

图像获取模块72，用于将各候选子图像依次赋给预设图像模板中第一图像模板中的各图像子模板；所述图像子模板的数量与候选子图像的数量相同；

模板调整模块73，用于调整预设图像模板中的各图像子模板，以使所述第一候选图像显示预设的动画效果。

在一实施例中，所述模板调整模块包括：

子图像赋给单元，用于将所述第一图像模板中的各图像子模板中的候选子图像依次赋给第二图像模板相对应的图像子模板；所述预设图像模板包括第二图像模板，所述第二图像模板中的各图像子模板与所述第一图像模板中的各图像子模板一一对应；

顺序参数获取单元，用于基于预设的动画效果获取所述第二图像模板中的各图像子模板的调整顺序和显示参数；所述预设的动画效果从电子设备的配置信息中获取；

显示参数调整单元，用于按照所述调整顺序依次调整第二图像模板中的各图像子模板的显示参数。

在一实施例中，所述子图像赋给单元包括：

显示状态调整子单元，用于将所述第二图像模板中的各图像子模板调整为显示状态；

子图像赋给子单元，用于将所述第一图像模板中的各图像子模板中的候选子图像依次赋给所述第二图像模板中对应的图像子模板。

在一实施例中，所述装置还包括：

图像获取模块，还用于获取待显示的第二候选图像；

图像赋给模块，还用于分割所述第二候选图像，并将获得预设数量个候选子图像依次赋给所述第一图像模板中的各图像子模板。

在一实施例中，所述显示参数包括以下至少一种：

缩放系数、显示坐标和透明度；

或者，

所述调整顺序包括以下至少一种：

行、列、之字形、左右同时向中间顺序、从当前位置移出边界、从一个顶角向对角、同时调整并移动边界。

可理解的是，本公开实施例提供的装置与上述方法相对应，具体内容可以参考方法各实施例的内容，在此不再赘述。

在示例性实施例中，还提供了一种电子设备，包括：

处理器；

用于存储所述处理器可执行的计算机程序的存储器；

其中，所述处理器被配置为执行所述存储器中的计算机程序，以实现如图1所述方法的步骤。

在示例性实施例中，还提供了一种包括可执行的计算机可读存储介质，例如包括指令的存储器，上述可执行的计算机程序可由处理器执行，以实现如图1所述方法的步骤。其中，可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本领域技术人员在考虑说明书及实践这里公开的公开后，将容易想到本公开的其它实施方案。本公开旨在涵盖任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (8)

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

分割待显示的第一候选图像，获得预设数量个候选子图像；

将各候选子图像依次赋给预设图像模板中第一图像模板中的各图像子模板；所述图像子模板的数量与候选子图像的数量相同；

调整预设图像模板中的各图像子模板，以使所述第一候选图像显示预设的动画效果；

调整预设图像模板中的各图像子模板，包括：

将所述预设图像模板中第二图像模板中的各图像子模板调整为显示状态；所述第二图像模板中的各图像子模板与所述第一图像模板中的各图像子模板一一对应；

将所述第一图像模板中的各图像子模板中的候选子图像依次赋给所述第二图像模板中对应的图像子模板；并将所述第一图像模板调整为关闭状态；

基于预设的动画效果获取所述第二图像模板中的各图像子模板的调整顺序和显示参数；所述预设的动画效果从电子设备的配置信息中获取；

按照所述调整顺序依次调整第二图像模板中的各图像子模板的显示参数。

2.根据权利要求1所述的方法，其特征在于，将所述第一图像模板中的各图像子模板中的候选子图像依次赋给所述第二图像模板中对应的图像子模板之后，所述方法还包括：

获取待显示的第二候选图像；

分割所述第二候选图像，并将获得预设数量个候选子图像依次赋给所述第一图像模板中的各图像子模板。

3.根据权利要求1所述的方法，其特征在于，所述显示参数包括以下至少一种：

缩放系数、显示坐标和透明度；

或者，

所述调整顺序包括以下至少一种：

行、列、之字形、左右同时向中间顺序、从当前位置移出边界、从一个顶角向对角、同时调整并移动边界。

4.一种图像显示装置，其特征在于，所述装置包括：

图像获取模块，用于分割待显示的第一候选图像，获得预设数量个候选子图像；

图像赋给模块，用于将各候选子图像依次赋给预设图像模板中第一图像模板中的各图像子模板；所述图像子模板的数量与候选子图像的数量相同；

模板调整模块，用于调整预设图像模板中的各图像子模板，以使所述第一候选图像显示预设的动画效果；

所述模板调整模块包括：

子图像赋给单元，用于将所述第一图像模板中的各图像子模板中的候选子图像依次赋给第二图像模板相对应的图像子模板；所述预设图像模板包括第二图像模板，所述第二图像模板中的各图像子模板与所述第一图像模板中的各图像子模板一一对应；

顺序参数获取单元，用于基于预设的动画效果获取所述第二图像模板中的各图像子模板的调整顺序和显示参数；所述预设的动画效果从电子设备的配置信息中获取；

显示参数调整单元，用于按照所述调整顺序依次调整第二图像模板中的各图像子模板的显示参数；

所述子图像赋给单元包括：

显示状态调整子单元，用于将所述第二图像模板中的各图像子模板调整为显示状态；并将所述第一图像模板调整为关闭状态；

子图像赋给子单元，用于将所述第一图像模板中的各图像子模板中的候选子图像依次赋给所述第二图像模板中对应的图像子模板。

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

图像获取模块，还用于获取待显示的第二候选图像；

图像赋给模块，还用于分割所述第二候选图像，并将获得预设数量个候选子图像依次赋给所述第一图像模板中的各图像子模板。

6.根据权利要求5所述的装置，其特征在于，所述显示参数包括以下至少一种：

缩放系数、显示坐标和透明度；

或者，

所述调整顺序包括以下至少一种：

行、列、之字形、左右同时向中间顺序、从当前位置移出边界、从一个顶角向对角、同时调整并移动边界。

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

处理器；

用于存储所述处理器可执行的计算机程序的存储器；

其中，所述处理器被配置为执行所述存储器中的计算机程序，以实现如权利要求1～3任一项所述方法。

8.一种计算机可读存储介质，其特征在于，当所述存储介质中的可执行的计算机程序由处理器执行时，能够实现如权利要求1～3任一项所述方法。

Images