CN109035374A

CN109035374A - 颜色渐变动画效果的实现方法及装置

Info

Publication number: CN109035374A
Application number: CN201810771091.7A
Authority: CN
Inventors: 杨成
Original assignee: Qingdao Hisense Electronics Co Ltd
Current assignee: Vidaa Netherlands International Holdings BV
Priority date: 2018-07-13
Filing date: 2018-07-13
Publication date: 2018-12-18
Anticipated expiration: 2038-07-13
Also published as: CN109035374B

Abstract

本申请提供一种颜色渐变动画效果的实现方法及装置，所述方法包括：加载预先设置的被遮罩图层与遮罩图层，其中，所述被遮罩图层上具有颜色渐变图，所述遮罩图层通过MASK遮罩技术置于所述被遮罩图层的上层；在所述遮罩图层中绘制图形对象，以使得所述被遮罩图层中，与所述图形对象相重叠区域中的对象可见，除所述相重叠区域以外的其他区域中的对象不可见；按照预先设定的颜色渐变规则移动所述被遮罩图层上的颜色渐变图。应用该方法，可以简便、高效地实现颜色渐变动画效果。

Description

颜色渐变动画效果的实现方法及装置

技术领域

本申请涉及图像处理技术领域，尤其涉及一种颜色渐变动画效果的实现方法及装置。

背景技术

目前，为了提升用户的视觉体验，在诸多场景中载入颜色渐变动画效果，例如，在移动终端或者智能设备(如智能电视)上安装有语音助手的场景下，当用户与语音助手这一虚拟助理进行语音交互时，用于指示语音助手正在前台运行的语音图标外圈的蓝色圆环会呈现出颜色渐变的动画效果。

现有技术中，可以采用两种方案实现此类颜色渐变的动画效果，方案一，采用GIF格式的动态图实现颜色渐变的动画效果；方案二，在一个一维线性区域上，使用背景色加前景色的方式实现颜色渐变，然后对该一维线性区域进行坐标变换，得到圆环区域。

然而，在上述方案一中，由于不同的动画效果要使用不同的动态图，从而实现方式不够灵活；在上述方案二中，由于需要坐标变换，从而实现方式过于复杂。

发明内容

有鉴于此，本申请提供一种颜色渐变动画效果的实现方法，以简便、高效地实现颜色渐变动画效果。

具体地，本申请是通过如下技术方案实现的：

根据本申请实施例的第一方面，提供一种颜色渐变动画效果的实现方法，所述方法包括：

加载预先设置的被遮罩图层与遮罩图层，其中，所述被遮罩图层上具有颜色渐变图，所述遮罩图层通过MASK遮罩技术置于所述被遮罩图层的上层；

在所述遮罩图层中绘制图形对象，以使得所述被遮罩图层中，与所述图形对象相重叠区域中的对象可见，除所述相重叠区域以外的其他区域中的对象不可见；

按照预先设定的颜色渐变规则移动所述被遮罩图层上的颜色渐变图。

可选的，所述方法还包括：

加载预先设置的图标层，其中，所述图标层置于所述遮罩图层的上层，其上具有图标效果图。

可选的，所述图标效果图的面积小于所述图形对象的面积，且所述图标效果图显示于所述图形对象上。

可选的，所述按照预先设定的颜色渐变规则移动所述被遮罩图层上的颜色渐变图，包括：

监听与所述图标效果图对应的应用的语音交互状态；

确定与所监听到的语音交互状态对应的颜色渐变规则；

根据所确定的颜色渐变规则移动所述被遮罩图层上的颜色渐变图。

可选的，所述颜色渐变规则指：所述被遮罩图层上颜色渐变图的移动速率大小、移动位移大小、移动方向中的一个或多个的组合。

根据本申请实施例的第二方面，提供一种颜色渐变动画效果的实现装置，所述装置包括：

第一加载模块，用于加载预先设置的被遮罩图层与遮罩图层，其中，所述被遮罩层上具有颜色渐变图，所述遮罩图层通过MASK遮罩技术置于所述被遮罩图层的上层；

设置模块，用于在所述遮罩图层中绘制图形对象，以使得所述被遮罩图层中，与所述图形对象相重叠区域中的对象可见，除所述相重叠区域以外的其他区域中的对象不可见；

移动模块，用于按照预先设定的颜色渐变规则移动所述被遮罩图层上的颜色渐变图。

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

第二加载模块，用于加载预先设置的图标层，其中，所述图标层置于所述遮罩图层的上层，其上具有图标效果图。

可选的，所述移动模块包括：

监听子模块，用于监听与所述图标效果图对应的应用的语音交互状态；

确定子模块，用于确定与所监听到的语音交互状态对应的颜色渐变规则；

处理子模块，用于根据所确定的颜色渐变规则移动所述被遮罩图层上的颜色渐变图。

本申请实施例所提供的技术方案，通过加载预先设置的被遮罩图层与遮罩图层，其中，被遮罩图层上具有颜色渐变图，遮罩图层通过MASK遮罩技术置于被遮罩图层的上层；在遮罩图层中绘制图形对象，以使得被遮罩图层中，与图形对象相重叠区域中的对象可见，除相重叠区域以外的其他区域中的对象不可见；按照预先设定的颜色渐变规则移动被遮罩图层上的颜色渐变图，即可以实现透过遮罩图层中的图形对象显示出颜色渐变的动画效果，由于在此过程中，仅需移动颜色渐变图，从而实现方式简单，易于操作。

附图说明

图1为本申请一示例性实施例提供的一种颜色渐变动画效果的实现方法的实施例流程图；

图2为颜色渐变图的一种示例；

图3为在遮罩图层中绘制矩形形状的图形对象之后，呈现效果的一种示例；

图4为一次移动颜色渐变图后，呈现效果的一种示例；

图5为语音助手的语音图标的一种示例；

图6为本申请一示例性实施例提供的另一种颜色渐变动画效果的实现方法的实施例流程图；

图7为图标效果图的一种示例；

图8为本申请颜色渐变动画效果的实现装置所在移动终端或智能设备的一种硬件结构图；

图9为本申请一示例性实施例提供的一种颜色渐变动画效果的实现装置的实施例框图。

具体实施方式

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

在本申请使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

为了解决上述问题，本申请实施例提供一种颜色渐变动画效果的实现方法，如下，示出下述实施例对该方法进行说明。

实施例一：

请参见图1，为本申请一示例性实施例提供的一种颜色渐变动画效果的实现方法的实施例流程图，该方法可以包括以下步骤：

步骤101：加载预先设置的被遮罩图层与遮罩图层，其中，被遮罩图层上具有颜色渐变图，遮罩图层通过MASK遮罩技术置于被遮罩图层的上层。

步骤102：在遮罩图层中绘制图形对象，以使得被遮罩图层中，与图形对象相重叠区域中的对象可见，除相重叠区域以外的其他区域中的对象不可见。

如下，对步骤101与步骤102进行详细说明：

首先对“图层”“被遮罩图层”，以及“遮罩图层”的概念进行说明：

(i)图层：通俗来讲，图层就像一张包括图形或文字等对象的胶片。

(ii)被遮罩图层、遮罩图层：在本说明书实施例中，遮罩图层位于被遮罩图层的上层，两者通过MASK遮罩技术组成“遮罩层”，本领域技术人员可以理解的是，通过MASK遮罩技术可以实现，在该两个图层中，只有相重叠的部分才可被显示，即可见，这也就是说，在遮罩图层中，具有对象的区域是“透明”的，透过该“透明区域”，可显示出被遮罩图层中的对象，而其他区域则是“不透明”的，透过该“不透明区域”，也就无法显示出被遮罩图层中的对象。

基于上述描述，在本申请实施例中，被遮罩图层上可以具有一张颜色渐变图，该颜色渐变图即为被遮罩图层中包含的对象。其中，颜色渐变图用于指示颜色梯度变化，其只需要确定两个参数：起始颜色RGB值和终止颜色RGB值。颜色渐变图的表现形式可以为垂直梯度颜色变化(例如起始颜色RGB值80-终止颜色RGB值160，从上到下渐变)、水平梯度颜色变化(例如起始颜色RGB值80-终止颜色RGB值160，从左到右渐变)、以及多个垂直梯度变化相连(例如起始颜色RGB值80-终止颜色RGB值160，从上到下渐变；重复多个这样的渐变)、多个水平梯度变化相连(例如起始颜色RGB值80-终止颜色RGB值160，从左到右渐变；重复多个这样的渐变)等等，例如，如图2所示，为颜色渐变图的一种示例。

在本申请实施例中，可以在遮罩图层中绘制一个图形对象，该图形对象的形状可以为任意形状，例如矩形、圆形、三角形，或者其他不规则形状，本说明书实施例对此不作限制。以绘制一个形状为矩形的图形对象为例，按照上述描述，透过该图形对象，可使得被遮罩图层中，与该图形对象相重叠区域中的对象可见，而除该相重叠区域以外的其他区域中的对象则不可见，例如，如图3所示，为在遮罩图层中绘制矩形形状的图形对象之后，呈现效果的一种示例。

步骤103：按照预先设定的颜色渐变规则移动被遮罩图层上的颜色渐变图。

在本申请实施例中，可以按照预先设定的颜色渐变规则移动被遮罩图层上的颜色渐变图，例如，所设定的颜色渐变规则为：在一个颜色渐变周期内，控制颜色渐变图在150ms内上移5个像素，在150ms内下移5个像素，再在150ms内上移10个像素，在150ms内下移10个像素，最后在150ms内上移15个像素，在150ms内下移15个像素；多次重复执行该颜色渐变周期。

由上述描述可见，通过移动被遮罩图层上的颜色渐变图，即可以实现透过遮罩图层上矩形形状的“透明区域”显示出颜色渐变的动画效果，例如，如图4所示，为一次移动颜色渐变图后，呈现效果的一种示例，通过对比图4与图3可以发现，通过按照颜色渐变规则移动颜色渐变图，并自动创建补间动画，可以实现透过遮罩图层中的图形对象显示出颜色渐变的动画效果。

至于自动创建补间动画的具体过程，本领域技术人员可见参见现有技术中的相关描述，本申请实施例对此不再详述。

至此，完成实施例一的相关描述。

在一具体的应用场景中，可在移动终端(例如智能手机)或者智能设备(例如智能电视)上安装语音助手，本领域技术人员可以理解的是，语音助手具有语音输入、输出功能，基于这一功能，语音助手可充当虚拟助理的角色。当用户与这一虚拟助理进行语音交互时，语音助手的语音图标外圈的蓝色圆环会呈现出颜色渐变的动画效果，如图5所示，为语音助手的语音图标的一种示例，例如，在用户向语音助手输入语音时，该蓝色圆环内，浅蓝色部分做低频率的伸缩变化，在语音助手输出语音时，浅蓝色部分做较高频率的伸缩变化，且伸缩频率可以与输出语音的分贝呈正相关关系。

基于上述应用场景，可以应用本申请实施例提供的颜色渐变动画效果的实现方法，实现语音图标的外圈圆环内呈现颜色渐变动画效果，如下，基于上述应用场景，对本申请实施例提供的颜色渐变动画效果的实现方法进行说明：

请参见图6，为本申请一示例性实施例提供的另一种颜色渐变动画效果的实现方法的实施例流程图，该方法可以包括以下步骤：

步骤601：加载预先设置的被遮罩图层与遮罩图层，其中，被遮罩图层上具有颜色渐变图，被遮罩图层通过MASK遮罩技术覆盖于被遮罩图层的上层。

步骤602：在遮罩图层中绘制图形对象，以使得被遮罩图层中，与图形对象相重叠区域中的对象可见，除相重叠区域以外的其他区域中的对象不可见。

关于步骤601与步骤602的详细描述可以参见上述实施例一中步骤101与步骤102的描述，在此不再详述。

需要说明的一点是，基于上述描述的应用场景，可以在遮罩图层中绘制一个圆形的图形对象，从而透过该图形对象，使得被遮罩图层上的颜色渐变图显示为一个圆形区域。

步骤603：加载预先设置的图标层，其中，图标层置于遮罩图层的上方，其上具有图标效果图。

基于上述描述的应用场景，如图7所示，为图标效果图的一种示例，该图标效果图的形状为圆形。

在本说明书实施例中，该图标效果图的面积小于上述图形对象的面积，以使得图标效果图可显示于图形对象上，从而可以实现上述描述的应用场景中的位于语音图标外圈的圆环效果。

步骤604：按照预先设定的颜色渐变规则移动被遮罩图层上的颜色渐变图。

在本实施例中，可以监听图标效果图对应的应用，例如语音助手的语音交互状态，该语音交互状态可以包括语音输入/输出、语音分贝、语音音色(例如男生或女生)等信息中的一种或多种。

在本实施例中，可以预先设置不同语音交互状态各自对应的颜色渐变规则，例如，如下表1所示，为语音交互状态与颜色渐变规则对应关系的一种示例：

表1

语音交互状态	颜色渐变规则
		语音输入，且语音分贝为1～10(dB)	规则1
语音输出，且语音分贝为1～10(dB)	规则2
		语音输出，且语音分贝为10～20(dB)	规则3
…	…

基于图1所示例的对应关系，在本实施例中，则可以确定与监听到的语音交互状态对应的颜色渐变规则，继而按照该颜色渐变规则移动颜色渐变图，使得语音图标外圈圆环内呈现出颜色渐变动画效果。

在一实施例中，上述表1中所示例的不同的颜色渐变规则所对应的颜色渐变图的移动速率不同，例如，在上述“规则1”中，颜色渐变图每实现一次移动，例如上移5个像素耗时30ms，而在上述“规则2”中，颜色渐变图每实现一次移动，例如上移5个像素，则耗时15ms。

本领域技术人员可以理解的是，上述所描述的不同的颜色渐变规则所对应的颜色渐变图的移动速率不同仅仅作为举例，在实际应用中，还可以以其他形式体现出不同的颜色渐变规则，例如，不同的颜色渐变规则所对应的颜色渐变图的移动位移不同、移动方向不同等，本实施例对此不作限制。

本申请实施例所提供的技术方案，通过加载预先设置的被遮罩图层、遮罩图层，以及图标层，其中，被遮罩图层上具有颜色渐变图，遮罩图层通过MASK遮罩技术置于被遮罩图层的上层，图标层置于被遮罩图层的上层；在遮罩图层中绘制图形对象，以使得被遮罩图层中，与图形对象相重叠区域中的对象可见，除相重叠区域以外的其他区域中的对象不可见，并设置图标层中的图标效果图内嵌显示于图形对象上；按照预先设定的颜色渐变规则移动被遮罩图层上的颜色渐变图，即可以实现透过遮罩图层中的图形对象，在图标效果图的外圈圆环中显示出颜色渐变的动画效果，由于在此过程中，仅需移动颜色渐变图，从而实现方式简单，易于操作。

至此，完成实施例二的相关描述。

与前述颜色渐变动画效果的实现方法的实施例相对应，本申请还提供了颜色渐变动画效果的实现装置的实施例。

本申请颜色渐变动画效果的实现装置的实施例可以应用在移动终端或智能设备上。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在移动终端或智能设备的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图8所示，为本申请颜色渐变动画效果的实现装置所在移动终端或智能设备的一种硬件结构图，除了图8所示的处理器81、内存82、网络接口83、以及非易失性存储器84之外，实施例中装置所在的移动终端或智能设备通常根据该移动终端或智能设备的实际功能，还可以包括其他硬件，对此不再赘述。

请参考图9，为本申请一示例性实施例提供的一种颜色渐变动画效果的实现装置的实施例框图，该装置可以包括：第一加载模块91、设置模块92，以及移动模块93。

其中，第一加载模块91，可以用于加载预先设置的被遮罩图层与遮罩图层，其中，所述被遮罩层上具有颜色渐变图，所述遮罩图层通过MASK遮罩技术置于所述被遮罩图层的上层；

设置模块92，可以用于在所述遮罩图层中绘制图形对象，以使得所述被遮罩图层中，与所述图形对象相重叠区域中的对象可见，除所述相重叠区域以外的其他区域中的对象不可见；

移动模块93，可以用于用于按照预先设定的颜色渐变规则移动所述被遮罩图层上的颜色渐变图。

在一实施例中，所述装置还可以包括(图9中未示出)：

在一实施例中，所述图标效果图的面积小于所述图形对象的面积，且所述图标效果图显示于所述图形对象上。

在一实施例中，所述移动模块可以包括(图9中未示出)：

在一实施例中，所述颜色渐变规则指：所述被遮罩图层上颜色渐变图的移动速率大小、移动位移大小、移动方向中的一个或多个的组合。

上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims

1.一种颜色渐变动画效果的实现方法，其特征在于，所述方法包括：

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

3.根据权利要求2所述的方法，其特征在于，所述图标效果图的面积小于所述图形对象的面积，且所述图标效果图显示于所述图形对象上。

4.根据权利要求2所述的方法，其特征在于，所述按照预先设定的颜色渐变规则移动所述被遮罩图层上的颜色渐变图，包括：

监听与所述图标效果图对应的应用的语音交互状态；

确定与所监听到的语音交互状态对应的颜色渐变规则；

5.根据权利要求4所述的方法，其特征在于，所述颜色渐变规则指：所述被遮罩图层上颜色渐变图的移动速率大小、移动位移大小、移动方向中的一个或多个的组合。

6.一种颜色渐变动画效果的实现装置，其特征在于，所述装置包括：

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

8.根据权利要求7所述的装置，其特征在于，所述图标效果图的面积小于所述图形对象的面积，且所述图标效果图显示于所述图形对象上。

9.根据权利要求7所述的装置，其特征在于，所述移动模块包括：

10.根据权利要求9所述的装置，其特征在于，所述颜色渐变规则指：所述被遮罩图层上颜色渐变图的移动速率大小、移动位移大小、移动方向中的一个或多个的组合。