CN110033501A

CN110033501A - 一种动画的实现方法及电子终端

Info

Publication number: CN110033501A
Application number: CN201810023383.2A
Authority: CN
Inventors: 汪刚; 陈少杰; 张文明
Original assignee: Wuhan Douyu Network Technology Co Ltd
Current assignee: Wuhan Douyu Network Technology Co Ltd
Priority date: 2018-01-10
Filing date: 2018-01-10
Publication date: 2019-07-19
Anticipated expiration: 2038-01-10
Also published as: CN110033501B

Abstract

本发明公开了一种动画的实现方法及电子终端，为了避免使用动态图片，本发明基于获取目标动画的获取请求，调用第一实例完成第一点缀动画；然后调用第二实例完成第二点缀动画，所述第二点缀动画和所述第一点缀动画的颜色深度不同；再将所述第一点缀动画和所述第二点缀动画结合形成目标动画，用以代替gift图片。在加载目标动画时，可以直接调用实例完成目标动画以供加载，进而能够节约大量的资源，并且可以自定义加载任意的图片形成目标动画而并不仅限于加载的动态图片，故而，能够实现更灵活的动画效果。

Description

一种动画的实现方法及电子终端

技术领域

本申请涉及互联网移动端应用开发领域，尤其涉及一种动画的实现方法及电子终端。

背景技术

随着互联网的快速发展，人们享受到了科技发展带来的各种便利。现在人们可以通过各种类型的电子设备，享受随着科技发展带来的舒适生活。在电子设备中可以安装多种应用软件供用户使用，例如直播类软件、聊天类软件、视频类软件等等。

以直播类软件为例，主播可以登录直播类软件进入自己的直播间，通过唱歌、跳舞、游戏等等方式吸引大量的观众进入直播间观看其表演。观众如果对主播满意可以购买虚拟礼物赠送给主播。

而为了增加直播间的多样性，这些虚拟礼物通常以动画的形式呈现，另外，直播间的提示、升级提醒等等也可以以动画的形式进行提示。这样的设计可以极大的增加用户的感受，让用户感觉有动感。

而在实际开发中，直播间的动画大多都是直接加载动画的gif图(动态图)，但是这样就需要在直播间插入需要很多gif图，大量的gif图会导致内存负载过大。

发明内容

本发明了提供了一种动画的实现方法及电子终端，以解决或者部分解决目前由于插入动态图导致的内存负载过大的技术问题。

为解决上述技术问题，本发明提供了一种动画的实现方法，所述方法包括：

基于获取目标动画的获取请求，调用第一实例完成第一点缀动画；

调用第二实例完成第二点缀动画，所述第二点缀动画和所述第一点缀动画的颜色深度不同；

将所述第一点缀动画和所述第二点缀动画结合形成目标动画。

优选的，在所述基于获取目标动画的获取请求，调用第一实例完成第一点缀动画之前，所述方法还包括：

获得直播间的当前动画等级；

将所述当前动画等级和预设动画等级进行比较；

若所述当前动画等级大于所述预设动画等级，生成所述获取请求。

优选的，所述调用第一实例完成第一点缀动画，具体包括：

通过设置动画实例scaleAnimation完成第一图片的缩放；

通过设置动画实例opacityAnimation完成所述第一图片的透明度变化；

通过调用组动画groupAnimation将所述第一图片的缩放和所述第一图片的透明度变化相结合，完成所述第一点缀动画。

优选的，在所述通过设置动画实例scaleAnimation完成所述第一图片的缩放之前，所述方法还包括：

调用动画基本类CABasicAnimation；

调用所述动画基本类CABasicAnimation的animationWithKeyPath方法构建所述动画实例scaleAnimation；

设置所述动画实例scaleAnimation的属性为transform.scale；

设置所述动画实例scaleAnimation的fromValue属性；

设置所述动画实例scaleAnimation的toValue属性。

优选的，所述通过设置实例opacityAnimation完成所述第一图片的透明度变化，具体包括：

使用所述基本动画类CABasicAnimation调用animationWithKeyPath创建所述动画实例opacityAnimation；

设置所述动画实例opacityAnimation的fromValue为1；其中，1表示完全不透明；

设置所述动画实例opacityAnimation的toValue为0；其中，0表示完全透明。

优选的，所述通过调用组动画groupAnimation将所述第一图片的缩放和所述第一图片的透明度变化相结合，完成所述第一点缀动画，具体包括：

设置所述组动画的时长为第一时间段；

设置所述组动画的animations数组，将所述动画实例scaleAnimation和所述动画实例opacityAnimation融入所述animations数组中；

设置所述组动画的执行动画间隔timingFunction；

调用所述第一图片中的图层layer的addAnimation函数，所述addAnimation函数中的参数为所述animations数组。

优选的，所述调用第二实例完成第二点缀动画，具体包括：

使用UIview的类动画调用animateWithDuration函数，设置动画执行时间的参数为第二时间段，在所述第二时间段中将所述第二图片的透明度从0变为1；其中，0表示完全透明，1表示完全不透明；

使用所述UIview的类动画调用所述animateWithDuration函数；设置动画执行时间的参数为第三时间段，在所述第三时间段中将所述第二图片的透明度从1变为0；其中，1表示完全不透明，0表示完全透明。

本发明公开了一种电子终端，包括：

第一调用模块，用于基于获取目标动画的获取请求，调用第一实例完成第一点缀动画；

第二调用模块，用于调用第二实例完成第二点缀动画，所述第二点缀动画和所述第一点缀动画的颜色深度不同；

结合模块，用于将所述第一点缀动画和所述第二点缀动画结合形成目标动画。

优选的，所述电子终端还包括：

获得模块，用于在基于获取目标动画的获取请求，调用第一实例完成第一点缀动画之前，获得直播间的当前动画等级；

比较模块，用于将所述当前动画等级和预设动画等级进行比较；

生成模块，用于若所述当前动画等级大于所述预设动画等级，生成所述获取请求。

优选的，所述第一调用模块，具体包括：

第一设置模块，用于通过设置动画实例scaleAnimation完成第一图片的缩放；

第二设置模块，用于通过设置动画实例opacityAnimation完成所述第一图片的透明度变化；

第三调用模块，用于通过调用组动画groupAnimation将所述第一图片的缩放和所述第一图片的透明度变化相结合，完成所述第一点缀动画。

优选的，所述第一设置模块，具体包括：

第四调用模块，用于调用动画基本类CABasicAnimation；

第五调用模块，用于调用所述动画基本类CABasicAnimation的animationWithKeyPath方法构建所述动画实例scaleAnimation；

第三设置模块，用于设置所述动画实例scaleAnimation的属性为transform.scale；

第四设置模块，用于设置所述动画实例scaleAnimation的fromValue属性；

第五设置模块，用于设置所述动画实例scaleAnimation的toValue属性。

优选的，第二设置模块，具体包括：

第六调用模块，用于使用所述基本动画类CABasicAnimation调用animationWithKeyPath创建所述动画实例opacityAnimation；

第六设置模块，用于设置所述动画实例opacityAnimation的fromValue为1；其中，1表示完全不透明；

第七设置模块，用于设置所述动画实例opacityAnimation的toValue为0；其中，0表示完全透明。

优选的，所述第三调用模块，具体包括：

第八设置模块，用于设置所述组动画的时长为第一时间段；

第九设置模块，用于设置所述组动画的animations数组，将所述动画实例scaleAnimation和所述动画实例opacityAnimation融入所述animations数组中；

第十设置模块，用于设置所述组动画的执行动画间隔timingFunction；

第七调用模块，用于调用所述第一图片中的图层layer的addAnimation函数，所述addAnimation函数中的参数为所述animations数组。

优选的，所述第二调用模块，具体包括：

第八调用模块，用于使用UIview的类动画调用animateWithDuration函数，设置动画执行时间的参数为第二时间段，在所述第二时间段中将所述第二图片的透明度从0变为1；其中，0表示完全透明，1表示完全不透明；

第九调用模块，用于使用所述UIview的类动画调用所述animateWithDuration函数；设置动画执行时间的参数为第三时间段，在所述第三时间段中将所述第二图片的透明度从1变为0；其中，1表示完全不透明，0表示完全透明。

本发明公开了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述方法的步骤。

本发明公开了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法的步骤。

通过本发明的一个或者多个技术方案，本发明具有以下有益效果或者优点：

附图说明

图1为本发明实施例中一种动画的实现方法的实施过程图；

图2为本发明实施例中一种电子终端的示意图。

具体实施方式

为了使本申请所属技术领域中的技术人员更清楚地理解本申请，下面结合附图，通过具体实施例对本申请技术方案作详细描述。

在本发明实施例中，公开了一种动画的实现方法，避免使用任何gift图片,通过调用实例完成两个点缀动画，然后将两个点缀动画结合形成目标动画，用以代替gift图片。在加载目标动画时，可以直接调用实例完成目标动画以供加载，进而能够节约大量的资源。

通过设置scaleAnimation实例,这个实例完成图片的缩放,设置opacityAnimation这个实例,这个实例完成图片的透明度的变化,最后通过一个组动画将缩放动画和透明度变化的动画两者结合起来,同时完成了两个星星的动画一个浅色和一个深色,达到一个星星闪烁的效果

参看图1，本发明公开了一种动画的实现方法，如下步骤所述：

步骤11，基于获取目标动画的获取请求，调用第一实例完成第一点缀动画。

目标动画的获取请求主要是由于直播间中的动画升级需要而获得的。故而在基于获取目标动画的获取请求，调用第一实例完成第一点缀动画之前，可获得直播间的当前动画等级，然后将所述当前动画等级和预设动画等级进行比较，若所述当前动画等级大于所述预设动画等级，生成所述获取请求。

而在具体的实施过程中，在生成第一点缀动画和第二点缀动画之前，本发明实施例还会进行一系列初始化设置，具体如下：

1)、定义图片的变量：

定义一个UIImageView类型的变量starImageView，这个变量的作用是加载第一图片。该图片的内容是不限制的，例如，该图片可以是一个深色的星星的图片，也可以根据需要设为其他类型的图片。这是制作动画的基础，后续会拿到starImageView来执行动画。

定义一个lightImageView类型的变量，这个变量的作用是加载第二图片。第二图片和第一图片的颜色深度不同，例如第一图片是深色星星的图片，第二图标是一个浅色星星的图片。当然，第二图片也可以根据需要设为其他类型的图片，后续会拿到lightImageView来执行一些动画。

2)、定义初始化方法：

重写系统的坐标值初始化方法initWithFrame，这个方法是系统设置位置的系统方法,定义当前的等级属性。

在这个方法内部需要先调用父类的initWithFrame方法，在这个方法内部定义一个初始化的预设动画等级的变量curLevel。预设动画等级用来和当前的动画等级进行对比。如果当前的动画等级大于预设动画等级，则表示需要制作目标动画。如果当前的动画等级小于预设动画等级，则不作处理。预设动画等级的变量curLevel是可调的，例如在对比之后，如果当前的动画等级大于预设动画等级，可将预设动画等级设置为当前的动画等级，用来和下次输入的动画等级进行对比。

3)创建numberView:

创建一个numberView，这个numberView默认可以加载不同的等级，根据不同的等级展示不同的等级图片。设置这个numberView的默认的数字是0,也就是等级为0或者当前无等级，将numberView添加到当前的控制器上。

另外，将上述创建的image(starImageView、starImageView)添加到当前的控制器上，故而在控制器上，可以进行等级对比，也可以调用第一图片、第二图片等等。

上述设置定义了一些变量和初始化方法，这些变量和初始化方法在后续步骤中都有用到，作为后续的动画实现的基础。

进一步的，定义一个更新等级动画的接口函数updateLevelAnimated，这个是等级动画的接口函数,这个函数需要一个参数,这个参数是NSInteger类型。这个函数的内部实现过程如下:

当接收到当前动画等级level的时候，将当前动画等级level和预设动画等级curlevel进行比较。如果当前动画等级level≤预设动画等级curlevel，就直接返回。若当前动画等级level＞预设动画等级curlevel，则触发生成第一点缀动画和第二点缀动画，由于两个点缀动画的颜色深度不同，例如一个深色星星点缀动画和第一浅色星星点缀动画就构成了一个闪烁效果。

故而，控制器在获得当前动画等级之后，则可以调用updateLevelAnimated接口函数进行动画等级的对比。例如，当直播间内的一个页面的等级发生了变化的时候，则通过调用函数updateLevelAnimated,就可以实现等级更新的动画,在实现等级更新的同时还有星星闪烁从出现到消失的效果。而本发明只需要调用一个接口(更新等级动画的接口函数updateLevelAnimated)就可以实现闪烁和等级变化的动画,函数调用很简单,实现很容易。也就是说，在调用该接口函数之后，就可以实现等级对比、利用实例完成第一点缀动画、第二点缀动画以及结合形成目标动画等等操作。

而在得到目标动画之后，需要将目标动画对应的等级和目标动画本身更新给numberView,这样numberView就可以展示更新等级的动画。

而在具体的实施过程中，在调用第一实例完成第一点缀动画的实施过程中，通过设置动画实例scaleAnimation完成第一图片的缩放；通过设置动画实例opacityAnimation完成所述第一图片的透明度变化；通过调用组动画groupAnimation将所述第一图片的缩放和所述第一图片的透明度变化相结合，完成所述第一点缀动画。

下面分别介绍上述实例如何完成第一图片的缩放、透明度变化等等。

在通过设置动画实例scaleAnimation完成第一图片的缩放的具体实施过程中，调用动画基本类CABasicAnimation,调用所述动画基本类CABasicAnimation的animationWithKeyPath方法构建一个动画实例scaleAnimation，设置所述动画实例scaleAnimation的属性为transform.scale，如此便创建一个动画实例。进一步的，设置所述动画实例scaleAnimation的fromValue属性，设置所述动画实例scaleAnimation的toValue属性，这两个属性表示第一图片的缩放度。

在通过设置动画实例opacityAnimation完成所述第一图片的透明度变化的具体实施过程中，使用基本动画类CABasicAnimation调用animationWithKeyPath创建所述动画实例opacityAnimation，这是一个透明度动画的效果函数,这个函数需要一个参数@"opacity",这样就可以获得一个动画实例opacityAnimation。另外，拿到这个动画实例opacityAnimation之后，设置所述动画实例opacityAnimation的fromValue为1；其中，1表示完全不透明设置所述动画实例opacityAnimation的toValue为0；其中，0表示完全透明。

在通过调用组动画groupAnimation将所述第一图片的缩放和所述第一图片的透明度变化相结合，完成所述第一点缀动画的过程中，创建一个组动画,这个组动画为groupAnimation。设置这个组动画groupAnimation的时长为第一时间段，例如0.6s。设置所述组动画的animations数组，将所述动画实例scaleAnimation和所述动画实例opacityAnimation融入所述animations数组中，也就是说，这个animations数组中的元素是scaleAnimation,opacityAnimation两个动画实例。进一步的，所述组动画的执行动画间隔timingFunction代表执行动画的间隔。设置开始执行动画的星星starImageView的图层layer调用addAnimation函数,这个函数需要一个参数,这个参数就是animations数组，也即：所述addAnimation函数中的参数为所述animations数组。故而，在设置之后，能够直接调用所述第一图片中的图层layer的addAnimation函数，将所述animations数组设置成所述addAnimation函数的参数。

通过上述设置，就能够获得第一点缀动画。本步骤使用的动画,没有使用任何gift图片,通过设置scaleAnimation实例,这个实例完成图片的缩放,设置opacityAnimation这个实例,这个实例完成图片的透明度的变化,最后通过一个组动画将缩放动画和透明度变化的动画两者结合起来，即完成了深色星星的点缀动画。

步骤12，调用第二实例完成第二点缀动画，所述第二点缀动画和所述第一点缀动画的颜色深度不同。

在具体的实施过程中，所述调用第二实例完成第二点缀动画，具体包括：

使用UIview的类动画调用animateWithDuration函数，设置动画执行时间的参数为第二时间段，例如0.2s。在所述第二时间段中将所述第二图片的透明度从0变为1；其中，0表示完全透明，1表示完全不透明。具体来说，这个animateWithDuration函数需要具有参数,这个参数是动画的执行时间，例如为0.2秒,在0.2秒内将starImageView的透明度从0变为1，也就表示从透明逐渐变成不透明。

使用所述UIview的类动画调用所述animateWithDuration函数；设置动画执行时间的参数为第三时间段，例如0.8s。在所述第三时间段中将所述第二图片的透明度从1变为0；其中，1表示完全不透明，0表示完全透明。也就是说，这个animateWithDuration函数有一个参数和两个回调。一个参数是动画的实行时间例如0.8秒。有两个回调，第一个回调里面将透明度设置为0,第二个回调设置为1。则表示从透明逐渐变成不透明。

步骤13，将所述第一点缀动画和所述第二点缀动画结合形成目标动画。

基于统一发明构思，本发明实施例公开了一种电子终端。

参看图2，本发明的电子终端包括：

第一调用模块21，用于基于获取目标动画的获取请求，调用第一实例完成第一点缀动画；

第二调用模块22，用于调用第二实例完成第二点缀动画，所述第二点缀动画和所述第一点缀动画的颜色深度不同；

结合模块23，用于将所述第一点缀动画和所述第二点缀动画结合形成目标动画。

作为一种可选的实施例，所述电子终端还包括：

作为一种可选的实施例，所述第一调用模块21，具体包括：

作为一种可选的实施例，所述第一设置模块，具体包括：

第四调用模块，用于调用动画基本类CABasicAnimation；

作为一种可选的实施例，第二设置模块，具体包括：

作为一种可选的实施例，所述第三调用模块，具体包括：

第八设置模块，用于设置所述组动画的时长为第一时间段；

作为一种可选的实施例，所述第二调用模块22，具体包括：

基于与前述实施例中同样的发明构思，本发明还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前文任一所述方法的步骤。

基于与前述实施例中同样的发明构思，本发明还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现前文任一所述方法的步骤。

通过本发明的一个或者多个实施例，本发明具有以下有益效果或者优点：

尽管已描述了本申请的优选实施例，但本领域内的普通技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims

1.一种动画的实现方法，其特征在于，所述方法包括：

2.如权利要求1所述的方法，其特征在于，在所述基于获取目标动画的获取请求，调用第一实例完成第一点缀动画之前，所述方法还包括：

获得直播间的当前动画等级；

将所述当前动画等级和预设动画等级进行比较；

3.如权利要求1所述的方法，其特征在于，所述调用第一实例完成第一点缀动画，具体包括：

通过设置动画实例scaleAnimation完成第一图片的缩放；

4.如权利要求3所述的方法，其特征在于，所述通过设置动画实例scaleAnimation完成第一图片的缩放，具体包括：

调用动画基本类CABasicAnimation；

设置所述动画实例scaleAnimation的属性为transform.scale；

设置所述动画实例scaleAnimation的fromValue属性；

设置所述动画实例scaleAnimation的toValue属性。

5.如权利要求3所述的方法，其特征在于，所述通过设置实例opacityAnimation完成所述第一图片的透明度变化，具体包括：

6.如权利要求3所述的方法，其特征在于，所述通过调用组动画groupAnimation将所述第一图片的缩放和所述第一图片的透明度变化相结合，完成所述第一点缀动画，具体包括：

设置所述组动画的时长为第一时间段；

设置所述组动画的执行动画间隔timingFunction；

7.如权利要求1所述的方法，其特征在于，所述调用第二实例完成第二点缀动画，具体包括：

8.一种电子终端，其特征在于，包括：

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

10.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-7任一项所述方法的步骤。