WO2017124943A1 - 色彩补间动画的实现方法和装置 - Google Patents

Abstract

一种色彩补间动画的实现方法，所述色彩补间动画的展示区域具有重叠的两个图层，其中一个图层的透明度为不透明，另一个图层的透明度为完全透明，所述方法包括：在不透明图层显示起点填充方案，在完全透明图层显示终点填充方案（110）；将不透明图层的透明度逐渐变化为完全透明，同时将完全透明图层的透明度逐渐变化为完全不透明（120）。不论填充方案是否复杂，所述方法都能够由软件自动实现平滑自然的动画效果，无需设计人员的额外工作，提高了动画实现的效率。

Description

色彩补间动画的实现方法和装置 技术领域

本申请涉及图像处理技术领域，尤其涉及一种色彩补间动画的实现方法和装置。

背景技术

动画包括逐帧动画和补间动画，逐帧动画是在时间轴的每帧上逐帧绘制不同的内容，连续播放这些帧可以形成动画；补间动画是在已知动画的起始和结束画面的基础上，由软件自动生成动画的中间部分，省去了中间部分复杂的制作过程。

色彩补间动画是补间动画的一种，指的是某个区域的填充色彩随时间变化而形成动画效果。色彩补间动画可以单独使用，也可以与其他补间动画(如填充区域的形状、位移、缩放、旋转等补间动画)相结合，形成更为复杂的动画效果。

现有技术提供了将某个展示区域的填充色彩，从第一种纯色逐渐变换为第二种纯色的动画实现，具体而言，通常是以一定的规则来逐渐将填充色彩的色值，从第一种纯色的色值变换为第二种纯色的色值。但是对于非纯色的复杂填充方案，如具有渐变、纹理、图案等填充效果的填充方案，由于展示区域的各个像素点的色值大多不相同，并且在色值改变时需要相互配合，才能展现出协调的颜色效果，按照现有技术中变化色值的方式，往往会出现突兀、生硬的动画过程，效果很差，而需要设计人员提供动画中间部分的填充方案，工作量相当大，动画实现的效率太低。

发明内容

有鉴于此，本申请提供一种色彩补间动画的实现方法，所述色彩补间动画的展示区域具有重叠的两个图层，其中一个图层的透明度为不透明，另一个图层的透明度为完全透明，所述方法包括：

在不透明图层显示起点填充方案，在完全透明图层显示终点填充方案；

将不透明图层的透明度逐渐变化为完全透明，同时将完全透明图层的透明度逐渐变化为完全不透明。

本申请还提供了一种色彩补间动画的实现装置，所述色彩补间动画的展示区域具有重叠的两个图层，其中一个图层的透明度为不透明，另一个图层的透明度为完全透明，所述装置包括：

起点终点显示单元，用于在不透明图层显示起点填充方案，在完全透明图层显示终点填充方案；

第一透明度变化单元，用于将不透明图层的透明度逐渐变化为完全透明，同时将完全透明图层的透明度逐渐变化为完全不透明。

由以上技术方案可见，本申请的实施例通过色彩补间动画的展示区域上两个重叠图层的透明度变化，将显示起点填充方案的图层由不透明逐渐变化为完全透明，同时将显示终点填充方案的图层由完全透明逐渐变化为不透明，达到由起点填充方案变换为终点填充方案的动画效果，不论填充方案是否复杂，都能够由软件自动实现平滑自然的动画效果，无需设计人员的额外工作，提高了动画实现的效率。

附图说明

图1是本申请实施例一中一种色彩补间动画的实现方法的流程图；

图2是本申请实施例二中一种色彩补间动画的实现方法的流程图；

图3是本申请应用示例中用户的信用分、信用等级以及填充方案的对应关系示意图；

图4是本申请应用示例中一种动画显示用户信用等级的流程图；

图5是本申请实施例所在设备的一种硬件结构图；

图6是本申请实施例中一种色彩补间动画的实现装置的逻辑结构图。

具体实施方式

本申请的实施例提出一种新的色彩补间动画的实现方法，在展示区域上设置相互重叠的两个图层，分别显示起点填充方案和终点填充方案，将显示起点填充方案的图层由不透明逐渐变化为完全透明，将显示终点填充方案的图层由完全透明逐渐变化为不透明，从而达到由起点填充方案变换到终点填充方案的动画效果，无需设计人员的工作即可达到自然平滑的过渡效果，使动画的实现效率得以提高，以解决现有技术中存在的问题。

本申请的实施例可以应用在任何具有计算、存储和显示能力的设备上，包括手机、平板电脑、PC(Personal Computer，个人电脑)、笔记本、服务器等设备。

本申请的实施例中，色彩补间动画在某个展示区域内进行。该展示区域可以是任意的形状、大小和位置。该展示区域可以是固定不变的，其形状、大小和位置固定；也可以是动态变化的，其形状、大小和/或位置都可以发生变化；换言之，本申请实施例中的实现色彩补间动画的技术方案可以单独使用，也可以与实现其他补间动画(如填充区域的形状、位移、缩放、和/或旋转等补间动画)的技术方案结合起来使用。

本申请的实施例中，初始化时，在色彩补间动画的展示区域上生成两个图层，这两个图层相互重叠，其中一个图层的透明度设置为完全透明，另一个图层的透明度设置为不透明。生成图层的具体方式和设置图层透明度的方式可参照现有技术实现，不再赘述。

相互重叠的两个图层以上下的方式排列，当上方图层为不透明时，会完全遮挡下方图层，用户在展示区域看到的是上方图层的显示内容；当上方图层为完全透明时，会完全呈现下方图层，用户在展示区域看到的是下方图层的显示内容；当上方图层的透明度是完全透明和不透明之间的某个中间值时，用户在展示区域看到的是上方图层和下方图层的显示内容按照该透明度中间值进行叠加后的视觉效果。

本申请的实施例一中，色彩补间动画在展示区域由起点填充方案以 动画效果变换到终点填充方案。其中，起点填充方案或终点填充方案可以是纯色填充方案，也可以是带有渐变、纹理、或图案等填充效果的填充方案，还可以是用户自己生成的各种其他具有颜色变化的填充方案。本实施例中色彩补间动画的实现方法的流程如图1所示。

步骤110，在不透明图层显示起点填充方案，在完全透明图层显示终点填充方案。

在初始化完成后，展示区域上两个重叠的图层，一个是不透明图层，另一个是完全透明图层。将起点填充方案显示在不透明图层，将终点填充方案显示在完全透明图层，这样，用户在展示区域将看到起点填充方案对应的视觉效果。

步骤120，将不透明图层的透明度逐渐变化为完全透明，同时将完全透明图层的透明度逐渐变化为完全不透明。

在补间动画的动画时长内，将不透明图层的透明度从不透明逐渐变化为完全透明；同样在该动画时长内，将完全透明图层的透明度从完全透明逐渐变化为不透明。这样，用户将看到展示区域从起点填充方案对应的视觉效果，在动画时长内随着透明度的变化，逐渐变化成终点填充方案对应的视觉效果，从而完成了从起点填充方案到终点填充方案的动画实现。

现有技术中提供了多种在动画时长内逐渐变化透明度的方式，本申请的各个实施例中可以参照实现。需要说明的是，两个图层变化透明度的方式可以是各自独立进行，也可以用相关联的方式来协同进行。设透明度为0表示完全透明，透明度为1表示不透明，一个例子中，可以令上方图层的透明度在动画时长内从0匀速变化到1，令下方图层的透明度在动画时长内从1以加速度变化到0；另一个例子中，可以令上方图层的透明度在动画时长内从0以加速度变化到1，而令下方图层的透明度保持与上方图层的透明度之和为1。

在两个图层的透明度变化完成后，色彩补间动画结束。此时，可以删除当前的完全透明图层，即本实施例中显示起点填充方案的图层，以及时释放所占用的系统资源。

本申请的实施例二中，色彩补间动画中共有N个填充方案(N为大于等于2的自然数)，在展示区域由第1个填充方案以动画效果变换到第2个填充方案，然后再以动画效果从第2个填充方案变换到第3个填充方案(在N大于等于3时)，直到变换到第N个填充方案后动画结束。其中，每个填充方案可以是纯色填充方案，也可以是带有渐变、纹理、或图案等填充效果的填充方案，还可以是用户自己生成的各种其他具有颜色变化的填充方案。

本实施例中色彩补间动画的实现方法的流程如图2所示。本实施例主要针对与实施例一中不同的部分进行说明，相同部分请参见实施例一中的描述，不再重复。

步骤210，在不透明图层显示第1个填充方案，在完全透明图层显示第2个填充方案。

步骤220，将不透明图层的透明度逐渐变化为完全透明，同时将完全透明图层的透明度逐渐变化为完全不透明。

步骤230，在透明度变化完成后，如果当前的不透明图层显示的第k(k为不大于N的自然数)个填充方案不是第N个填充方案，在当前的完全透明图层显示第(k+1)个填充方案；将当前完全透明图层的透明度逐渐变化为不透明，同时将当前不透明图层的透明度逐渐变化为完全透明；重复本步骤直到k等于N。

在透明度变化完成后，设当前的不透明图层(即在刚刚完成的透明度变化过程中，由完全透明变为不透明的图层)上所显示的是第k个填充方案，则第k个填充方案是截止到当前，本实施例中色彩补间动画到达的最后一个填充方案。如果k不等于N，第k个填充方案还需要继续以动画方式变化到第(k+1)个填充方案。如果k等于N，则动画结束。

当k不等于N时，将第(k+1)个填充方案显示在当前的完全透明图层(即在刚刚完成的透明度变化过程中，由不透明变为完全透明的图层)上。然后在从第k个填充方案到第(k+1)个填充方案的动画时长内，将当前完全透明图层的透明度逐渐变化为不透明，同时将当前不透明图层的透明度逐渐变化为完全透明。

在本次透明度变化过程中，用户将看到展示区域从第k个填充方案对应的视觉效果，在该动画时长内随着透明度的变化，逐渐变化成第(k+1)个填充方案对应的视觉效果。

本次透明度变化之后的当前不透明图层与当前完全透明图层，与本次透明度变化之前的当前不透明图层与当前完全透明图层互换。重复本步骤直到k等于N，这样，展示区域从第1个填充方案以动画效果变化到第2个填充方案，依次按照填充方案的排列顺序，逐个变化到第N个填充方案后动画结束。

当k等于N，动画结束时，可以删除当前的完全透明图层。

可见，本申请的实施例一和实施例二中，在展示区域上设置相互重叠的两个图层，通过将第一个图层由不透明逐渐变化为完全透明，同时将第二个图层由完全透明逐渐变化为不透明，达到第一个图层的填充方案逐渐变化为第二图层的填充方案的动画效果，并且过渡过程平滑自然，在达到良好效果的同时避免了额外的人工工作，使动画的实现效率得以提高。

在本申请的一个应用示例中，一种互联网征信系统按照用户的信用历史、行为偏好、履约能力、身份特质、人脉关系等维度，以一定的评估算法来为每个用户生成信用分，并且按照用户的信用分来确定用户的信用等级，每个信用等级对应于一定范围的信用分。该征信系统中用户信用分的范围是350到950，划分为第1到第5共5个信用等级，级别越高，信用度越好。

用户可以在该征信系统的客户端App(应用程序)中查看自己的信用等级。App中在一个圆形区域以不同颜色的具有渐变效果的填充方案来显示用户的不同信用等级，第k个填充方案对应于第k个信用等级。图3所示为该征信系统用户的信用分、信用等级以及填充方案的对应关系，其中，第1个填充方案为色值从#EA5254渐变到#F4653C的红色填充方案，对应于第1个信用等级；类似的，第2到第5个填充方案分别为橙色、绿色、青色和蓝色具有渐变效果的填充方案，分别对应于第2到第5个信用等级。

为了提升用户的体验，当用户打开显示其信用等级的页面时，将从第1个信用等级开始，以动画方式显示用户的信用等级提升过程，直到达到用户的信用等级为止。换言之，在表示信用等级的圆形区域中，从第1个填充方案开始，以动画方式遍历中间的填充方案，直到显示为用户信用等级N对应的第N个填充方案时，动画结束。

本应用示例中动画的实现流程如图4所示。

步骤401，在圆形区域初始化两个UIView视图，其中上方图层为视图Front视图，下方图层为视图Bottom，将Front的透明度设置为0，将Bottom的透明度设置为1。本应用示例中，透明度为0表示完全透明，透明度为1表示不透明。

步骤402，获取用户的信用等级N。

步骤403，判断N是否为1，如果是，执行步骤404，否则转步骤405。

步骤404，在Bottom显示第1个填充方案，删除Front，流程结束。当用户的信用等级为1时，无需进行动画显示，直接显示第1个填充方案即可。

步骤405，令b等于1，f等于2。b表示在Bottom显示的填充方案的序号，f表示在Front显示的填充方案的序号。

步骤406，在Bottom显示第b个填充方案，在Front显示第f个填充方案。

步骤407，判断当前Front的透明度是否为0，如果是，执行步骤408，否则转步骤411。本步骤用来判断当前的完全透明图层是Front还是Bottom。

步骤408，在预定时长内，将Front的透明度由0匀速变化为1，将Bottom的透明度由1匀速变化为0。该预定时长是在相邻信用等级间显示动画效果的预设时长。

步骤409，判断f是否等于N，如果是，动画结束，转步骤414；否则执行步骤410。本步骤也可以判断b是否等于(N-1)。

步骤410，将b加2，刷新Bottom的显示(即显示加2后的第b个填充方案)，转步骤407。

步骤411，在预定时长内，将Front的透明度由1匀速变化为0，将Bottom的透明度由0匀速变化为1。

步骤412，判断b是否等于N，如果是，动画结束，转步骤414；否则执行步骤413。本步骤也可以判断f是否等于(N-1)。

步骤413，将f加2，刷新Front的显示(即显示加2后的第f个填充方案)，转步骤407。

步骤414，删除当前透明度为0的视图。

与上述流程实现对应，本申请的实施例还提供了一种色彩补间动画的实现装置。该装置可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为逻辑意义上的装置，是通过所在设备的CPU(Central Process Unit，中央处理器)将对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，除了图5所示的CPU、内存以及非易失性存储器之外，该装置所在的设备通常还包括用于进行无线信号收发的芯片等其他硬件，和/或用于实现网络通信功能的板卡等其他硬件。

图6所示为本申请实施例提供的一种装置，所述色彩补间动画的展示区域具有重叠的两个图层，其中一个图层的透明度为不透明，另一个图层的透明度为完全透明，所述装置包括起点终点显示单元和第一透明度变化单元，其中：起点终点显示单元用于在不透明图层显示起点填充方案，在完全透明图层显示终点填充方案；第一透明度变化单元用于将不透明图层的透明度逐渐变化为完全透明，同时将完全透明图层的透明度逐渐变化为完全不透明。

一个例子中，所述色彩补间动画包括：从第1个填充方案变化到第2个填充方案，依次逐个变化到第N个填充方案，N为大于1的自然数；所述起点填充方案为第1个填充方案，所述终点填充方案为第2个填充方案；所述装置还包括第二透明度变化单元，用于在透明度变化完成后，如果当前的不透明图层显示的第k个填充方案不是第N个填充方案， 在当前的完全透明图层显示第(k+1)个填充方案；将当前完全透明图层的透明度逐渐变化为不透明，同时将当前不透明图层的透明度逐渐变化为完全透明；重复本步骤直到k等于N；k为不大于N的自然数。

上述例子中，所述N为用户的信用等级，第k个信用等级对应于第k个填充方案；所述装置还可以包括动画取消单元，用于对信用等级为1的用户，在不透明图层显示第1个填充方案，删除完全透明图层。

可选的，所述装置还包括动画结束单元，用于在动画结束后，删除当前的完全透明图层。

可选的，所述起点填充方案和终点填充方案包括：具有渐变、纹理、或图案效果的填充方案。

可选的，所述色彩补间动画的展示区域包括：固定不变的展示区域，或动态变化的展示区域。

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

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传 输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

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

Claims (12)

1. 一种色彩补间动画的实现方法，其特征在于，所述色彩补间动画的展示区域具有重叠的两个图层，其中一个图层的透明度为不透明，另一个图层的透明度为完全透明，所述方法包括：

   在不透明图层显示起点填充方案，在完全透明图层显示终点填充方案；

   将不透明图层的透明度逐渐变化为完全透明，同时将完全透明图层的透明度逐渐变化为完全不透明。
2. 根据权利要求1所述的方法，其特征在于，所述色彩补间动画包括：从第1个填充方案变化到第2个填充方案，依次逐个变化到第N个填充方案，N为大于1的自然数；

   所述起点填充方案为第1个填充方案，所述终点填充方案为第2个填充方案；

   所述方法还包括：在透明度变化完成后，如果当前的不透明图层显示的第k个填充方案不是第N个填充方案，在当前的完全透明图层显示第(k+1)个填充方案；将当前完全透明图层的透明度逐渐变化为不透明，同时将当前不透明图层的透明度逐渐变化为完全透明；重复本步骤直到k等于N；k为不大于N的自然数。
3. 根据权利要求2所述的方法，其特征在于，所述N为用户的信用等级，第k个信用等级对应于第k个填充方案；

   所述方法还包括：对信用等级为1的用户，在不透明图层显示第1个填充方案，删除完全透明图层。
4. 根据权利要求1至3任意一项所述的方法，其特征在于，所述方法还包括：在动画结束后，删除当前的完全透明图层。
5. 根据权利要求1所述的方法，其特征在于，所述起点填充方案和终点填充方案包括：具有渐变、纹理、或图案效果的填充方案。
6. 根据权利要求1所述的方法，其特征在于，所述色彩补间动画的展示区域包括：固定不变的展示区域，或动态变化的展示区域。
7. 一种色彩补间动画的实现装置，其特征在于，所述色彩补间动画的展示区域具有重叠的两个图层，其中一个图层的透明度为不透明，另一个图层的透明度为完全透明，所述装置包括：

   起点终点显示单元，用于在不透明图层显示起点填充方案，在完全透明图层显示终点填充方案；

   第一透明度变化单元，用于将不透明图层的透明度逐渐变化为完全透明，同时将完全透明图层的透明度逐渐变化为完全不透明。
8. 根据权利要求7所述的装置，其特征在于，所述色彩补间动画包括：从第1个填充方案变化到第2个填充方案，依次逐个变化到第N个填充方案，N为大于1的自然数；

   所述起点填充方案为第1个填充方案，所述终点填充方案为第2个填充方案；

   所述装置还包括：第二透明度变化单元，用于在透明度变化完成后，如果当前的不透明图层显示的第k个填充方案不是第N个填充方案，在当前的完全透明图层显示第(k+1)个填充方案；将当前完全透明图层的透明度逐渐变化为不透明，同时将当前不透明图层的透明度逐渐变化为完全透明；重复本步骤直到k等于N；k为不大于N的自然数。
9. 根据权利要求8所述的装置，其特征在于，所述N为用户的信用等级，第k个信用等级对应于第k个填充方案；

   所述装置还包括：动画取消单元，用于对信用等级为1的用户，在不透明图层显示第1个填充方案，删除完全透明图层。
10. 根据权利要求7至9任意一项所述的装置，其特征在于，所述装置还包括：动画结束单元，用于在动画结束后，删除当前的完全透明图层。
11. 根据权利要求7所述的装置，其特征在于，所述起点填充方案和终点填充方案包括：具有渐变、纹理、或图案效果的填充方案。
12. 根据权利要求7所述的装置，其特征在于，所述色彩补间动画的展示区域包括：固定不变的展示区域，或动态变化的展示区域。

Images