CN104599307A - 一种在移动终端上采用动画显示图片的方法 - Google Patents

Abstract

本发明涉及移动终端技术领域，本发明公开了一种在移动终端上采用动画显示图片的方法，其具体包括以下的步骤：设置图片动画组，设置两个图片容器以及一个图片文字描述容器，其中一个图片容器用于装载当前显示的图片，另外一个图片用于装载下一张显示的图片，图片文字描述容器DescriptionView用于装载当前显示图片的文字描述，从图片动画组中取出第一个动画，用于ImageView1中图片的显示，在ImageView1中的图片进行动画显示的时候，该图片的文字描述DescriptionView也采用动画进行同步显示；当ImageView1中的图片动画还剩余设定的时间阈值时，从图片动画组中取出第二个动画并用于ImageView2中图片的显示，并开始切换ImageView2和ImageView1的层级关系，并重置图片文字描述容器DescriptionView中的文字为第二张图片的图片描述，同时开始重新执行图片文字动画。

Description

一种在移动终端上采用动画显示图片的方法

技术领域

本发明涉及图片显示技术领域，尤其涉及一种在移动终端上采用动画显示图片的方法。

背景技术

在图片展示技术中，很早就有对图片的展示的处理。图片的动态展示可以提升人对图片的接受能力，也更有视觉感染力。与此同时，电子相册、图片特效、图片视频也将图片展示更加唯美和更加具有视觉冲击力。但是目前常见的图片展示为左右切换、上下切换等，需要人工手动去切换，并不能进行暂停、继续等功能，这样显得图片比较单调，而且没有新意，也没有背景图片播放音乐，图片与图片之间切换交互展示不能够做得无缝的连续播放展示，让人感觉每次图片切换间都有停顿感，不顺畅，大大的降低了用户体验与视觉美感。

尤其是针对移动终端，用户会经常用手机进行拍照和照片的展示，但却没有一种比较好的，满足用户观感的照片显示方式，一方面要求照片之间的切换没有停顿感，另外一方面不需要用户始终手动去切换，同时受移动终端操作系统以及硬件环境的影响，又不适合运行大的电脑插件。在电脑上对图片进行处理加工的方式也不适合手机用户，主要的问题是：电脑软件操作复杂，用户不方便使用，电脑软件对硬件的运行环境要求高。

发明内容

针对现有技术中在移动终端上显示图片的方法存在的上述不流畅以及必须要用户进行手动操作的技术问题，本发明公开了一种在移动终端上采用动画显示图片的方法。

本发明的发明目的通过下述技术方案来实现：

本发明公开了一种在移动终端上采用动画显示图片的方法，其具体包括以下的步骤：设置至少一个动画形成图片动画组，所述动画用于将图片进行动画显示；设置两个图片容器ImageView1和ImageView2以及一个图片文字描述容器DescriptionView，其中一个图片容器用于装载当前显示的图片，另外一个图片用于装载下一张显示的图片，图片文字描述容器DescriptionView用于装载当前显示图片的文字描述，DescriptionView为最上层，当当前显示的图片为ImageView1中的图片时，ImageView2为最底层，ImageView1为中间层，当当前显示的图片为ImageView2中的图片时，ImageView1为最底层，ImageView2为中间层；当图片加载完成后，第一个需要采用动画显示的图片是ImageView1中的图片时，从图片动画组中取出第一个动画，用于ImageView1中图片的显示，在ImageView1中的图片进行动画显示的时候，该图片的文字描述DescriptionView也采用动画进行同步显示；当ImageView1中的图片动画还剩余设定的时间阈值时，从图片动画组中取出第二个动画并用于ImageView2中图片的显示，当第一张图片的动画完成之后立即渐隐第一张图片和图片的描述文字，并开始切换ImageView2和ImageView1的层级关系，ImageView2层级在ImageView1层级之上，并重置图片文字描述容器DescriptionView中的文字为第二张图片的图片描述，同时开始重新执行图片文字动画。

更进一步地，上述方法还包括：当采用动画显示第二张图片时，将第三张图片加载到ImageView1中，当ImageView2中的图片动画还剩余设定的时间阈值时，从图片动画组中取出第三个动画并用于ImageView1中图片的显示。

更进一步地，上述方法还包括通过背景音乐播放模块驱动音乐播放软件，当开始进行图片动画显示时开始播放背景音乐。

更进一步地，上述方法还包括设置图片缓存区，将图片先放置在图片缓存区，每张图片的url作为缓存图片的key值，当需要图片时，从图片缓存区中提取图片。

更进一步地，上述将图片先放置在图片缓存区为图片预加载过程，预加载过程具体为：首先预加载至少3张图片，其余图片在图片动画显示的时候进行异步加载。

更进一步地，上述方法还包括对超出设定长度的文字描述进行进行截取并进行处理，保证每个图片的文字描述都在图片范围内跟着图片一起动画。

更进一步地，上述法还包括当点击正在进行动画显示的图片时，显示暂停/继续播放按钮，同时让当前正在进行动画显示的图片执行完成，当前图片动画显示完成后渐隐消失，把下一张图片显示出来，然后不做任何动画。

更进一步地，上述方法还包括当动画显示暂停时，后台把正在播放的背景音乐进行暂停播放。

更进一步地，上述方法还包括在进行图片动画显示的时候，同时进行图片队列处理。

更进一步地，上述图片队列处理的过程具体为设置一个动画显示队列，一个回收图片队列，每动画显示完一张图片的时候，把该图片从动画显示队列中移出，并移入回收图片队列中，从而记录当前正在动画显示的图片位置。

通过采用以上技术方案，本发明的有益效果是：每次都是上一个动画即将显示完成时，就开始下一个动画的准备，在显示当前动画的时候，将新的图片加载到另外的一个图片容器ImageView中，用户不需要对图片进行任何的操作就能完成整个图片内容的流畅显示，方便了用户的使用。同时使用缓存，使得提高加载效率，用户使用效果好，还能够实现暂停和继续，符合用户的操作习惯。

附图说明

图1为本发明的在移动终端上采用动画显示图片的方法的流程图。

图2为加载图片并缓存流程图。

图3为创建动画组流程图。

图4为播放展示流程图。

图5为暂停/继续流程图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合具体实施例，对本发明进行进一步详细的说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

下面以手机作为移动终端详细说明本发明的实施过程，当然，移动终端不限于手机，也可以是平板电脑或者其他的移动终端。任何一个基于移动平台(比如iOS/Android/WP)的系统，采用本发明的方法都能够实现让用户采用动画显示照片。

本发明公开了一种在移动终端上采用动画显示图片的方法，其具体包括以下的步骤：步骤一、设置至少一个动画形成图片动画组，所述动画用于将图片进行动画显示；步骤二、设置两个图片容器ImageView1和ImageView2以及一个图片文字描述容器DescriptionView，其中图片容器ImageView1用于装载当前显示的图片，图片容器ImageView2用于装载下一张显示的图片，图片文字描述容器DescriptionView用于装载当前显示图片的文字描述，DescriptionView为最上层，ImageView2为最底层，ImageView1为中间层；步骤三、从图片动画组中取出第一个动画，用于ImageView1的显示，在ImageView1图片进行动画显示的时候，该图片的文字描述DescriptionView也采用动画进行同步显示；步骤四、当ImageView1中的图片动画还剩余设定的时间阈值时（比如还剩下0.3秒时），从图片动画组中取出第二个动画并用于ImageView2中图片的展示，当第一张图片的动画完成之后立即渐隐第一张图片和图片的描述文字，并开始切换ImageView2和ImageView1的层级关系，ImageView2层级在ImageView1层级之上，并重置图片文字描述容器DescriptionView中的文字为第二张图片的图片描述，同时开始重新执行图片文字动画。通过上述的方法，采用动画对图片进行显示，图片切换时没有停顿感，提高了用户的使用感受，方便了用户的使用。

更进一步地，上述方法还包括：当采用动画显示第二张图片时，将第三张图片加载到ImageView1中，当ImageView2中的图片动画还剩余设定的时间阈值时（比如还剩下0.3秒时），从图片动画组中取出第三个动画并用于ImageView1中图片的展示。其中：第一个动画、第二个动画和第三个动画可以相同，也可以完全不同，也可以随机而定，本领域的技术人员完全可以根据需要灵活设定。每次都是上一个动画即将显示完成时，就开始下一个动画的准备，在显示当前动画的时候，将新的图片加载到另外的一个图片容器ImageView中，用户不需要对图片进行任何的操作就能完成整个图片内容的流畅显示，方便了用户的使用。

更进一步地，上述方法还包括通过背景音乐播放模块驱动音乐播放软件，当开始进行图片动画显示时开始播放背景音乐。通过背景音乐的播放使得用户更加享受图片观看的过程，提高了用户的使用体验。

更进一步地，上述方法还包括设置图片缓存区，将加载后的图片放置在图片缓存区，每张图片的url作为缓存图片的key值，当需要图片时，从图片缓存区中提取图片。对图片进行预加载可以让图片更快速的展示而不必浪费更多时间在等待加载上，而且在把图片加载成功后并把图片进行缓存到缓存中，每张图片的url作为缓存图片的key值，保证在取出相应图片的时候可以更加快速，从缓存取图片比普通直接读取图片要快至少2倍；图片预加载是首先预加载至少3张，并能保证可以播放展示图片，其余图片可以在播放图片动画的时候进行异步加载，节约加载缓存图片的时间成本。（具体流程如流程如图2所示）。

更进一步地，上述方法还包括对超出设定长度的文字描述进行进行截取并进行打点处理。对文字描述进行长度设定，对于超长文字进行截取并进行打点处理，保证每个图片描述都在图片范围内跟着图片一起动画。

更进一步地，上述方法还包括当点击正在进行展示播放的图片的时候，显示暂停/继续播放按钮，同时让当前正在进行展示播放的图片的动画执行完成，当前图片展示完成后并渐隐消失，把下一张图片展示出来，然后不做任何动画；并通过后台把正在播放的背景音乐进行暂停播放。

图1为本发明的在移动终端上采用动画显示图片的方法的流程图。在程序启动后先准备图片动画组以及将图片进行缓存，缓存图片完成后开始采用动画对图片进行播放，在播放的中途如果移动终端检测到用户对当前图片的点击，则将当前图片的动画播放完成后暂停后续显示，如果没有检测到用户对当前图片的点击，则依序调用动画完成图片的动画显示，在这过程中不需要用户的手动控制参与，方便了用户的使用，同时显示过程流畅。

本文的目的是提供一种可以无缝实现图片的动态展示。加载图片到缓存并可以让图片动画无缝的衔接播放展示，也可以点击图片使播放图片暂停展示，并停留在当前展示图片，当需要继续的时候可以点击继续从当前图片开始继续播放交互展示。

为了达到上述目标，本文设计了如下技术方案：

首先需要预加载图片，并把图片进行缓存。对图片进行预加载可以让图片更快速的展示而不必浪费更多时间在等待加载上，而且在把图片加载成功后并把图片进行缓存到缓存中，每张图片的url作为缓存图片的key值，保证在取出相应图片的时候可以更加快速，从缓存取图片比普通直接读取图片要快至少2倍；图片预加载可以首先预加载至少3张，并能保证可以播放展示图片，其余图片可以在播放图片动画的时候进行异步加载，节约加载缓存图片的时间成本。（具体流程如流程图2）。

准备展示效果动画组。在进行加载图片的时候，同时也需要为图片所展示的动画进行预先准备，展示动画数量组可以自己事先预定，进行图片展示动画的时候顺序根据动画组里面的动画进行展示图片（具体流程如流程图3）。

准备图片描述动画。在所有的图片当中，会有部分图片会有对该图片的文字描述，在图片进行展示的时候，可以相对应的让该图片的描述跟着一起动画；但是为了提升更高的交换效果，对于过长的文字描述进行一个长度设定，对于超长文字进行截取并进行打点处理，保证每个图片描述都在图片范围内跟着图片一起动画。

设定两个图片容器ImageView1和ImageView2，用于装载当前展示的图片以及下一张即将展示的图片；设定一个图片文字描述容器DescriptionView，用户展示图片文字动画；背景音乐播放由后台控制，当开始播放图片展示动画的时候进行开始播放背景音乐。三个容器的层级关系为ImageView2->ImageView1->DescriptionView，其中，ImageView2为最底层，DescriptionView始终为最上层；图片容器的大小设定为最大为设备的可视区域。

当图片动画组、图片文字动画、容器都准备好之后，从缓存中取出前2张图片，并把第一张图片放入到ImageView1中进行显示，把第二张图片放入到ImageView2中进行显示，把第一张的图片描述放入到DescriptionView进行显示，但是展示动画没有开始的时候是看不到DescriptionView的，而且ImageView2是在ImageView1下面，所有ImageView2暂时也是看不到的。

开始进行图片动画展示。从动画组中取第一个动画，并用于ImageView1；第一张图片开始执行图片展示动画，同时图片文字描述动画开始执行展示。当第一张图片图片动画还剩余0.3秒后，从动画组中取出第二个动画并用于第二张图片即ImageView2上的图片，并开始进行执行；当第一张图片动画完成之后立即渐隐第一张图片和图片描述文字，并开始切换ImageView2和ImageView1的层级关系，ImageView2层级在ImageView1层级之上，并重置图片文字容器中的文字为第二张图片的图片描述，同时开始重新执行图片文字动画；如此交互循环，就可以让人感觉不到图片交互间的停顿感，而且每张图片切换的时候都可以感受到每张图片之间的视觉感觉，大大提高了视觉效果和美感（具体流程如流程图4）。

进行图片动画展示的时候，同时会进行图片队列处理。保证有一个播放展示队列，一个回收图片队列；每播放展示完一张图片的时候，把该图片从播放展示队列中移出，并移入回收图片队列中，保证可以记录当前播放展示图片的位置，并能够进行暂停处理。

暂停/继续播放展示图片功能处理。当点击正在进行展示播放的图片的时候，需要立即显示暂停/继续播放按钮，同时并让当前正在进行展示播放的图片的动画执行完成，当前图片展示完成后并渐隐消失，把下一张图片展示出来，然后不做任何动画；并通过后台把正在播放的背景音乐进行暂停播放。当点击继续播放按钮之后，参照步骤5继续重新执行图片展示动画，并在后台继续开始播放背景音乐（具体流程如流程图5）。

上述说明示出并描述了本发明的一个优选实施例，但如前所述，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。

Claims (10)

1.一种在移动终端上采用动画显示图片的方法，其具体包括以下的步骤：设置至少一个动画形成图片动画组，所述动画用于将图片进行动画显示；设置两个图片容器ImageView1和ImageView2以及一个图片文字描述容器DescriptionView，其中一个图片容器用于装载当前显示的图片，另外一个图片用于装载下一张显示的图片，图片文字描述容器DescriptionView用于装载当前显示图片的文字描述，DescriptionView为最上层，当当前显示的图片为ImageView1中的图片时，ImageView2为最底层，ImageView1为中间层，当当前显示的图片为ImageView2中的图片时，ImageView1为最底层，ImageView2为中间层；当图片加载完成后，第一个需要采用动画显示的图片是ImageView1中的图片时，从图片动画组中取出第一个动画，用于ImageView1中图片的显示，在ImageView1中的图片进行动画显示的时候，该图片的文字描述DescriptionView也采用动画进行同步显示；当ImageView1中的图片动画还剩余设定的时间阈值时，从图片动画组中取出第二个动画并用于ImageView2中图片的显示，当第一张图片的动画完成之后立即渐隐第一张图片和图片的描述文字，并开始切换ImageView2和ImageView1的层级关系，ImageView2层级在ImageView1层级之上，并重置图片文字描述容器DescriptionView中的文字为第二张图片的图片描述，同时开始重新执行图片文字动画。

2.如权利要求1所述的在移动终端上采用动画显示图片的方法，其特征在于所述方法还包括：当采用动画显示第二张图片时，将第三张图片加载到ImageView1中，当ImageView2中的图片动画还剩余设定的时间阈值时，从图片动画组中取出第三个动画并用于ImageView1中图片的显示。

3.如权利要求1所述的在移动终端上采用动画显示图片的方法，其特征在于所述方法还包括通过背景音乐播放模块驱动音乐播放软件，当开始进行图片动画显示时开始播放背景音乐。

4.如权利要求1所述的在移动终端上采用动画显示图片的方法，其特征在于所述方法还包括设置图片缓存区，将图片先放置在图片缓存区，每张图片的url作为缓存图片的key值，当需要图片时，从图片缓存区中提取图片。

5.如权利要求4所述的在移动终端上采用动画显示图片的方法，其特征在于所述将图片先放置在图片缓存区为图片预加载过程，预加载过程具体为：首先预加载至少3张图片，其余图片在图片动画显示的时候进行异步加载。

6.如权利要求1所述的在移动终端上采用动画显示图片的方法，其特征在于所述方法还包括对超出设定长度的文字描述进行进行截取并进行处理，保证每个图片的文字描述都在图片范围内跟着图片一起动画。

7.如权利要求1所述的在移动终端上采用动画显示图片的方法，其特征在于所述方法还包括当点击正在进行动画显示的图片时，显示暂停/继续播放按钮，同时让当前正在进行动画显示的图片执行完成，当前图片动画显示完成后渐隐消失，把下一张图片显示出来，然后不做任何动画。

8.如权利要求7所述的在移动终端上采用动画显示图片的方法，其特征在于所述方法还包括当显示暂停时，后台把正在播放的背景音乐进行暂停播放。

9.如权利要求1所述的在移动终端上采用动画显示图片的方法，其特征在于所述方法还包括在进行图片动画显示的时候，同时进行图片队列处理。

10.如权利要求9所述的在移动终端上采用动画显示图片的方法，其特征在于所述图片队列处理的过程具体为设置一个动画显示队列，一个回收图片队列，每动画显示完一张图片的时候，把该图片从动画显示队列中移出，并移入回收图片队列中，从而记录当前正在动画显示的图片位置。