CN111158840A - 图像轮播方法及装置 - Google Patents

Abstract

本发明公开了一种图像轮播方法及装置，其中，该方法包括：获取应用于处于变换状态的图像的外部指令，外部指令包括以下之一：显示图像、移动图像；响应于外部指令为显示图像，获取并显示当前图像的事件信息和图片信息；响应于外部指令为移动图像，移动当前图像，并显示下一个图像，其中，处于轮播状态的图像数量为N，处于变换状态的图像数量为M，3≤M＜N。通过本发明，可以实现图像轮播并减少性能的消耗。

Description

图像轮播方法及装置

技术领域

本发明涉及图像处理领域，具体涉及一种图像轮播方法及装置。

背景技术

Unity 3D是一款创建三维游戏、实时三维动画的多平台综合开发工具，也是一个功能丰富且高度灵活的编辑器，在游戏行业、增强现实及虚拟现实等领域广泛应用。

目前，采用Unity 3D引擎中的ScrollRect(滚动)组件或者ScrollView(滚动视图)组件实现轮播图效果，一般需要显示几个页面就实例化生成几个页面，然后根据滑动状态将当前页面动态移动到边界，之后销毁前面的页面，再生成后面的页面，这种频繁生成和销毁页面的轮播方式，导致了较大的性能消耗。

发明内容

有鉴于此，本发明提供一种图像轮播方法及装置，以解决上述提及的至少一个问题。

根据本发明的第一方面，提供一种图像轮播方法，所述方法包括：获取应用于处于变换状态的图像的外部指令，所述外部指令包括以下之一：显示图像、移动图像；响应于所述外部指令为显示图像，获取并显示当前图像的事件信息和图片信息；响应于所述外部指令为移动图像，移动当前图像，并显示下一个图像，其中，处于轮播状态的图像数量为N，所述处于变换状态的图像数量为M，3≤M＜N。

根据本发明的第二方面，提供一种图像轮播装置，所述装置包括：指令获取单元，用于获取应用于处于变换状态的图像的外部指令，所述外部指令包括以下之一：显示图像、移动图像；显示图像单元，用于响应于所述外部指令为显示图像，获取并显示当前图像的事件信息和图片信息；移动图像单元，用于响应于所述外部指令为移动图像，移动当前图像，并显示下一个图像，其中，处于轮播状态的图像数量为N，所述处于变换状态的图像数量为M，3≤M＜N。

根据本发明的第三方面，提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述图像轮播方法的步骤。

根据本发明的第四方面，本发明提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述图像轮播方法的步骤。

由上述技术方案可知，根据获取的应用于变换状态图像的外部指令来执行相应的操作，当指令为显示图像时，获取并显示当前图像的事件信息和图片信息，当指令为移动图像时，移动当前图像并显示下一个图像，相比于现有技术中的图像轮播需要频繁的生成和销毁页面，本技术方案无需频繁的生成和销毁页面，因而，可以减少性能的消耗。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据本发明实施例的图像轮播方法的流程图；

图2是根据本发明实施例的图像轮播方法的详细流程图；

图3是根据本发明实施例的轮播图效果示意图；

图4是根据本发明实施例的图像轮播装置的结构框图；

图5是根据本发明实施例的图像轮播装置的详细结构框图；

图6是根据本发明实施例的电子设备的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

由于Unity 3D引擎中没有提供一个现成的多页轮播图展示功能，传统实现方式是以ScrollRect(滚动)组件或者ScrollView(滚动视图)组件为轮播元素，但是无法实现与网页轮播图类似的轮播效果，并且，该轮播方式会频繁生成和销毁页面，导致了较大的性能消耗。基于此，本发明实施例提供一种基于Unity 3D的图像轮播方案，以解决上述问题。以下结合附图来详细描述本发明实施例。

图1是根据本发明实施例的图像轮播方法的流程图，如图1所示，该方法包括：

步骤101，获取应用于处于变换状态的图像的外部指令，所述外部指令包括以下之一：显示图像、移动图像；

步骤102，响应于所述外部指令为显示图像，获取并显示当前图像的事件信息和图片信息；

步骤103，响应于所述外部指令为移动图像，移动当前图像，并显示下一个图像，其中，处于轮播状态的图像数量为N，所述处于变换状态的图像数量为M，3≤M＜N，M和N为正整数。

本发明实施例根据获取的应用于变换状态图像的外部指令来执行相应的操作，当指令为显示图像时，获取并显示当前图像的事件信息和图片信息，当指令为移动图像时，移动当前图像并显示下一个图像，相比于现有技术中的图像轮播需要频繁的生成和销毁页面，本发明实施例无需频繁的生成和销毁页面，因而，可以减少性能的消耗。

在实际操作中，可以预先根据需要轮播的多个图像设置各自的事件信息和图片信息；并将该多个图像中的M个图像选择为变换状态图像。

优选地，可以对这多个图像设置显示顺序，在当前处于变换状态的图像已移动到轮播边界时，重新依次选择M个图像为变换状态图像。

在一个实施例中，可以对处于变换状态的图像分别设置显示标识(例如，页码)，其中，显示标识在所属图像为当前图像时显示。

为了更好地理解本发明实施例，以下基于Unity 3D给出一个实例。

在该实例中，多个图像基于Unity 3D的ScrollRect(滚动)组件和Transform(变换)组件来实现轮播。轮播展示时只需要生成三个(即，M＝3)页面就可以展示多个页面内容(对应于上述的N个轮播图像)，采用三个页面是由于轮播图滚动时至少要有当前页、前页和后页三个页面，这样无论向哪边滑动都能保证有内容显示，也就是说，不管向右还是向左滑动都不会有越界空页面情况出现，同时也可以避免页面频繁的生成与销毁对性能的影响。

以下结合图2所示的图像轮播流程来详细描述本实例，如图2所示，流程包括：

步骤201，创建一个ScrollRect组件对象和三个Transform页面，用于实现轮播图滑动以及轮播页面功能。

步骤202，读取各轮播图的JSON(Javascript Object Notation，JS对象标记)文件，根据轮播图数量生成一个事件列表和一个图片列表，根据JSON数据向事件列表及图片列表中写入对应的内容。

其中，事件列表是当前图像被点击后，对应应触发事件的列表，图片列表是轮播图像应显示的图片的集合。例如，当点击轮播图进行显示图像时，此时当前图像对应金钥匙事件，则调用图片列表中金钥匙这张图进行显示，并且调用金钥匙对应的事件，进入金钥匙产品显示页面。

步骤203，将列表中的前三个图像数据赋值给Transform页面，作为初始变换状态图像。

步骤204，根据轮播图数量创建相应的Toggle(Unity中的控制开关)组件对象用于页码的显示，并将所有的Toggle组件对象置于一个ToggleGroup(Toggle开关组)之下，根据轮播情况将相应的Toggle设置为激活状态，例如，在初始轮播时，将第一个轮播图像的页码处于激活状态。

其中，Toggle组件作为Unity中的控制开关，点击可以在“True/False(真/假)”来回切换。ToggleGroup组件作为Toggle开关组，在将组中的一个开关设置为true时，Unity引擎会自动将该组的其它Toggle设置为false。例如，轮播图只有当前页对应的页码圆钮是亮的，其他都会变成灰暗。

步骤205，滑动轮播图，当点击当前页面进行显示时，显示当前页面对应的事件和图像。

步骤206，滑动轮播图时，首先判断图像是否超过滑动边界，当判断结果为否时，执行步骤207，当判断结果为是时，自动跳转回当前界面并居中显示。

步骤207，在滑动结束后判断是否到达轮播图左右边界，如果判断结果为是，则进行步骤208，否则返回步骤205。

步骤208，替换Transform页面的事件及图片，并修改Toggle激活状态。具体而言，如果向右滑动到达左边界，就将最右边的内容移到最左边，用ScrollRect组件的横向归一坐标(horizontal Normalized Position)和取余算法动态计算三个页面中每一页应对应的事件名、图片和显示位置，替换页面显示内容和相应事件，重新调整显示顺序，并将对应的Toggle页码激活。如果向左滑动到达右边界，则用同样方法处理。

例如，当前在变换状态的三个页面，金钥匙、金条和金鼓，金条为当前显示图像，当向右拖动到边界时，金钥匙就变成了当前图像，金鼓会改变顺序到第一的位置成为上一页。

在每次滑动结束时，需要判断当前图像内容是否到达滑动边界和轮播图边界，并根据是向左/向右滑动及时计算、更新前页和后页对应的显示图片和事件，从对应列表中取出赋值。取余算法是其中比较重要的一环，计算对应图片和事件在列表中的索引(index)，才能根据索引取出正确内容。

在实际操作中，还可以根据透明遮罩技术对处于轮播状态的图像进行图像圆角处理。通过透明遮罩技术，可以无需美工对每一个图像资源进行修改，可以减少性能消耗。

具体而言，利用一张边缘圆角且透明的图片，同时为避免边角拉伸，对图片进行九宫格处理。利用Unity 3D引擎中UGUI(Unity Graphical User Interface，Unity图像用户界面)的透明遮罩，在轮播图中需要遮罩的图片的父级添加Mask(遮罩)并贴上透明通道圆角图片进行遮挡剔除，从而实现了轮播图片圆角的效果。与传统的动态重新生成顶点UV(纹理坐标)三角序列、Shader(着色器)方式相比，本发明实施例不需要动态生成曲线顶点，也不需要复杂的逐片计算曲线上的点，具备更低的性能消耗，同时圆角边缘足够细化且没有锯齿感，具有更好的圆角效果。

透明遮罩作为Unity提供的一种UI(User Interface，用户界面)效果组件，就像一个面具，可以挡住一部分“脸”的显示。添加后，只要赋予一张中间透明四周圆角的效果图片，则轮播图就可以将图片的直角挡住，显示为圆角，且其他功能不受影响。

图3是根据本发明实施例的轮播图效果示意图，如图3所示，变换状态图像(Transfrom item)为三个，轮播图像多于三个，其中，当前图像(Transfrom item2)的页码圆钮被激活，是亮的，其他页码圆钮为灰暗。

当一直向右滑动时，Transfrom item 1滑动到最右边后到达轮播右边界，此时重新选择三个图像作为新的变换状态图像。同样地，当一直向左滑动时，Transfrom item 3滑动到最左边后到达轮播左边界，此时重新选择三个图像作为新的变换状态图像

在该实例中，基于Unity 3D引擎的滑动组件ScrollRect进行开发，整合了轮播图页面子项Transform组件列表，另外以Toggle组件作为当前轮播页面是否显示标识，同时还采用了透明遮罩方式进行轮播图的圆角处理，解决了现有技术中的Unity 3D引擎由于没有提供多页轮播图展示功能，仅通过以ScrollRect(滚动)组件或者ScrollView(滚动视图)组件为轮播元素进行轮播图像，然而无法实现与网页轮播图类似的轮播效果的问题，通过本发明实施例，可以实现与网页轮播图类似的轮播效果。并且，本发明实施例的轮播图像方案，无需频繁生成和销毁页面，减小了性能消耗。

基于相似的发明构思，本发明实施例还提供一种图像轮播装置，优选地，该装置用于实现上述方法实施例的流程。

图4是根据本发明实施例的图像轮播装置的结构框图，如图4所示，该装置包括：

指令获取单元41，用于获取应用于处于变换状态的图像的外部指令，所述外部指令包括以下之一：显示图像、移动图像；

显示图像单元42，用于响应于所述外部指令为显示图像，获取并显示当前图像的事件信息和图片信息；

移动图像单元43，用于响应于所述外部指令为移动图像，移动当前图像，并显示下一个图像，其中，处于轮播状态的图像数量为N，所述处于变换状态的图像数量为M，3≤M＜N。

根据获取的应用于变换状态图像的外部指令，显示图像单元42或移动图像单元43执行相应的操作，当指令为显示图像时，显示图像单元42获取并显示当前图像的事件信息和图片信息，当指令为移动图像时，移动图像单元43移动当前图像并显示下一个图像，相比于现有技术中的图像轮播需要频繁的生成和销毁页面，本发明实施例无需频繁的生成和销毁页面，因而，可以减少性能的消耗。

在实际操作中，如图5所示，上述装置还包括：图像信息设置单元44和变换状态选择单元45，其中：

图像信息设置单元44，用于预先根据所述处于轮播状态的多个图像设置各自的事件信息和图片信息；

变换状态选择单元45，用于将所述处于轮播状态的多个图像中的M个图像选择为变换状态图像。

优选地，可以对所述处于轮播状态的多个图像设置显示顺序。在当前处于变换状态的图像已移动到轮播边界时，变换状态选择单元45还用于：重新依次选择M个图像为变换状态图像。

继续参见图5，上述装置还可以包括：

标识设置单元46，用于对所述处于变换状态的图像分别设置显示标识，其中，显示标识在所属图像为当前图像时显示。该标识设置单元46优选地可以通过上述的Toggle组件来实现。

圆角处理单元47，用于根据透明遮罩技术对所述处于轮播状态的图像进行图像圆角处理。该圆角处理单元47优选地可以通过上述UGUI的透明遮罩组件来现实。

上述各单元的具体执行过程，可以参见上述方法实施例中的描述，此处不再赘述。

在实际操作中，上述各单元可以组合设置、也可以单一设置，本发明不限于此。

图6是根据本发明实施例的电子设备的示意图。图6所示的电子设备为通用数据处理装置，其包括通用的计算机硬件结构，其至少包括处理器601和存储器602。处理器601和存储器602通过总线603连接。存储器602适于存储处理器601可执行的一条或多条指令或程序。该一条或多条指令或程序被处理器601执行以实现上述图像轮播方法中的步骤。

上述处理器601可以是独立的微处理器，也可以是一个或者多个微处理器集合。由此，处理器601通过执行存储器602所存储的命令，从而执行如上所述的本发明实施例的方法流程实现对于数据的处理和对于其他装置的控制。总线603将上述多个组件连接在一起，同时将上述组件连接到显示控制器604和显示装置以及输入/输出(I/O)装置605。输入/输出(I/O)装置605可以是鼠标、键盘、调制解调器、网络接口、触控输入装置、体感输入装置、打印机以及本领域公知的其他装置。典型地，输入/输出(I/O)装置605通过输入/输出(I/O)控制器606与系统相连。

其中，存储器602可以存储软件组件，例如操作系统、通信模块、交互模块以及应用程序。以上所述的每个模块和应用程序都对应于完成一个或多个功能和在发明实施例中描述的方法的一组可执行程序指令。

本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时以实现上述图像轮播方法的步骤。

综上所述，本发明实施例的图像轮播方案基于Unity 3D引擎的滑动组件ScrollRect进行开发，整合了轮播图页面子项Transform组件列表，并且以Toggle组件作为当前轮播页面是否显示标识，同时采用透明遮罩方式进行轮播图的圆角处理。在本发明实施例中，只需要生成三个Transfrom页面就可以展示多个页面内容，滑动轮播图时，用ScrollRect组件的横向归一坐标和取余算法动态计算三个页面中每一页应对应的事件名、图片和显示位置，然后替换页面显示内容，重新调整显示顺序，解决了现有技术中的Unity3D引擎由于没有提供多页轮播图展示功能，仅通过以ScrollRect(滚动)组件或者ScrollView(滚动视图)组件为轮播元素进行轮播图像，然而无法实现与网页轮播图类似的轮播效果的问题，通过本发明实施例，可以实现与网页轮播图类似的轮播效果。并且，本发明实施例的轮播图像方案，无需频繁生成和销毁页面，减小了性能消耗。

以上参照附图描述了本发明的优选实施方式。这些实施方式的许多特征和优点根据该详细的说明书是清楚的，因此权利要求旨在覆盖这些实施方式的落入其真实精神和范围内的所有这些特征和优点。此外，由于本领域的技术人员容易想到很多修改和改变，因此不是要将本发明的实施方式限于所例示和描述的精确结构和操作，而是可以涵盖落入其范围内的所有合适修改和等同物。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (12)

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

获取应用于处于变换状态的图像的外部指令，所述外部指令包括以下之一：显示图像、移动图像；

响应于所述外部指令为显示图像，获取并显示当前图像的事件信息和图片信息；

响应于所述外部指令为移动图像，移动当前图像，并显示下一个图像，其中，处于轮播状态的图像数量为N，所述处于变换状态的图像数量为M，3≤M＜N。

2.根据权利要求1所述的图像轮播方法，其特征在于，所述方法还包括：

预先根据所述处于轮播状态的多个图像设置各自的事件信息和图片信息；

将所述处于轮播状态的多个图像中的M个图像选择为变换状态图像。

3.根据权利要求2所述的图像轮播方法，其特征在于，对所述处于轮播状态的多个图像设置显示顺序，所述方法还包括：

响应于当前处于变换状态的图像已移动到轮播边界，重新依次选择M个图像为变换状态图像。

4.根据权利要求1所述的图像轮播方法，其特征在于，所述方法还包括：

对所述处于变换状态的图像分别设置显示标识，其中，所述显示标识在所属图像为当前图像时显示。

5.根据权利要求1所述的图像轮播方法，其特征在于，所述方法还包括：

根据透明遮罩技术对所述处于轮播状态的图像进行图像圆角处理。

6.一种图像轮播装置，其特征在于，所述装置包括：

指令获取单元，用于获取应用于处于变换状态的图像的外部指令，所述外部指令包括以下之一：显示图像、移动图像；

显示图像单元，用于响应于所述外部指令为显示图像，获取并显示当前图像的事件信息和图片信息；

移动图像单元，用于响应于所述外部指令为移动图像，移动当前图像，并显示下一个图像，其中，处于轮播状态的图像数量为N，所述处于变换状态的图像数量为M，3≤M＜N。

7.根据权利要求6所述的图像轮播装置，其特征在于，所述装置还包括：

图像信息设置单元，用于预先根据所述处于轮播状态的多个图像设置各自的事件信息和图片信息；

变换状态选择单元，用于将所述处于轮播状态的多个图像中的M个图像选择为变换状态图像。

8.根据权利要求7所述的图像轮播装置，其特征在于，对所述处于轮播状态的多个图像设置显示顺序，所述变换状态选择单元还用于：

响应于当前处于变换状态的图像已移动到轮播边界，重新依次选择M个图像为变换状态图像。

9.根据权利要求6所述的图像轮播装置，其特征在于，所述装置还包括：

标识设置单元，用于对所述处于变换状态的图像分别设置显示标识，其中，所述显示标识在所属图像为当前图像时显示。

10.根据权利要求6所述的图像轮播装置，其特征在于，所述装置还包括：

圆角处理单元，用于根据透明遮罩技术对所述处于轮播状态的图像进行图像圆角处理。

11.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至5中任一项所述图像轮播方法的步骤。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至5中任一项所述图像轮播方法的步骤。

Images