CN102737400A

CN102737400A - 图片翻转系统及其实现方法

Info

Publication number: CN102737400A
Application number: CN 201110095058
Authority: CN
Inventors: 樊一鹏
Original assignee: Shengle Information Technolpogy Shanghai Co Ltd
Current assignee: Shengle Information Technolpogy Shanghai Co Ltd
Priority date: 2011-04-15
Filing date: 2011-04-15
Publication date: 2012-10-17

Abstract

本发明公开一种图片翻转系统及其实现方法，该实现方法至少包含：载入第一图片；将该第一图片的宽度按第一缩减比例逐渐减小至第一像素值，同时，将该第一图片的亮度以第二缩减比例逐渐减小至第一亮度值；载入第二图片；将该第二图片的宽度从第二像素值按第一放大比例逐渐增大至原始宽度，同时，将该第二图片的亮度以第二亮度值按第二放大比例逐步增大至原始亮度；本发明为图片的翻转切换动画增加了一个亮度变化的过程，使前后两张图片的切换更流畅。

Description

图片翻转系统及其实现方法

技术领域

本发明关于一种图片翻转系统及其实现方法，特别是关于一种用于图片切换且具有光影变换效果的图片翻转系统及其实现方法。

背景技术

从计算机能动态地展示图形开始，图片的切换就已经出现了。图片的切换方式有很多种，比如淡入淡出，从窗口一侧切入等等，除此之外，还有很多与鼠标动作交互产生的特效切换动画。为图形切换增加各种各样的动画样式可以使软件看上去更为生动活泼，对于不同的操作需求增加不同的动画甚至能更好地体现操作的主题，优化用户操作的体验。

在图片的切换方式中有一种是翻转，传统的图片翻转动画仅仅对图片的宽度进行了缩放。然而单纯的图片缩放操作不能很好地表现图片切换这个主题，且单纯的缩放操作会使得前后两幅图片的过渡非常生硬，视觉效果差。

综上所述，可知先前技术的图像翻转方式由于进行对图片的宽度进行缩放存在前后图片过渡生硬、视觉效果差的问题，因此实有必要提出改进的技术手段，来解决此一问题。

发明内容

为克服上述现有技术的图像翻转方式由于进行对图片的宽度进行缩放存在前后图片过渡生硬、视觉效果差的问题，本发明的主要目的在于提供一种图像翻转系统及其实现方法，其通过在图片宽度缩放同时进行亮度缩放，为图片的翻转切换动画增加了一个亮度变化的过程，使前后两张图片的切换更流畅。

为达上述及其它目的，本发明一种图片翻转系统，其至少包含：

图片资料库，至少提供第一图片与第二图片；

第一宽度缩放模组，载入该第一图片，并将该第一图片的宽度按第一缩减比例逐渐减小至第一像素值；

第一亮度缩放模组，将该第一图片的亮度以第二缩减比例逐渐减小至第一亮度值；

第二宽度缩放模组，当该第一图片的宽度减小至第一像素值时，载入该第二图片，并将该第二图片的宽度从第二像素值按第一放大比例逐渐增大至原始宽度；以及

第二亮度缩放模组，将该第二图片的亮度从第二亮度值以第二放大比例逐步增大至原始亮度；

其中，该第一宽度缩放模组与该第一亮度缩放模组同步进行，该第二宽度缩放模组与该第二亮度缩放模组同步进行。

进一步地，该第一像素值为1pixel，该第一亮度值为0。

进一步地，该第二像素值为1pixel，该第二亮度值为0。

进一步地，该第一缩减比例与该第二缩减比例相同。

进一步地，该第一放大比例与该第二放大比例相同。

为达上述及其它目的，本发明还提供一种图片翻转的实现方法，至少包括：

载入第一图片；

将该第一图片的宽度按第一缩减比例逐渐减小至第一像素值，同时，将该第一图片的亮度以第二缩减比例逐渐减小至第一亮度值；

载入第二图片；以及

将该第二图片的宽度从第二像素值按第一放大比例逐渐增大至原始宽度，同时，将该第二图片的亮度以第二亮度值按第二放大比例逐步增大至原始亮度。

同样，较佳的，该第一像素值为1pixel，该第一亮度值为0；该第二像素值为1pixel，该第二亮度为0；该第一缩减比例与该第二缩减比例相同；该第一放大比例与该第二放大比例相同。

与现有技术相比，本发明一种图片翻转系统及其实现方法通过在翻转过程中对图片宽度进行缩放的同时对图片的亮度(透明度)进行相应的缩放，以为图片的翻转切换动画增加一个亮度变化的过程，使前后两张图片的切换更为流畅，本发明可以提供用户更好的视觉效果。

附图说明

图1为本发明一种图片翻转系统的系统架构图；

图2为本发明一种图片翻转实现方法的步骤流程图；

图3为本发明较佳实施例的翻转界面效果显示示意图；

图4为本发明较佳实施例的翻转界面效果显示示意图。

具体实施方式

以下通过特定的具体实例并结合附图说明本发明的实施方式，本领域技术人员可由本说明书所揭示的内容轻易地了解本发明的其它优点与功效。本发明亦可通过其它不同的具体实例加以施行或应用，本说明书中的各项细节亦可基于不同观点与应用，在不背离本发明的精神下进行各种修饰与变更。

图1为本发明一种图片翻转系统的系统架构图，以下将先以图1来说明本发明的系统运作。本发明之图片翻转系统可用于任何具有可视界面电子装置的图片切换，根据图1，该图片翻转系统至少包含图片资料库110、第一宽度缩放模组120、第一亮度缩放模组130、第二宽度缩放模组140、以及第二亮度缩放模组150。

图片资料库110，提供至少两张供切换的图片，即第一图片及第二图片，在本发明较佳实施例中，第一图片与第二图片即为进行切换前后的两张图片，图片格式可以是jpg，也可以是jpeg或gif或png或bmp等，在此不作限制，在本发明较佳实施例中，假设第一图片为a.jpg，其大小为300*200pixel，原始亮度为50流明，第二图片为b.jpg，其大小400*200pixel，原始亮度为70流明，在此原始宽度及原始亮度的百分比均视为100％。

第一宽度缩放模组120，在接收到切换操作指令后，从图片资料库载入第一图片，并对第一图片进行横向缩放，即：将第一图片的宽度按第一缩减比例逐渐减小至很小像素的第一像素值，较佳的，该第一像素值约为1pixel左右，缩减方式最好为匀速连续地进行，也就是说，第一宽度缩放模组120把当前第一图片的宽度匀速且连续地按第一缩减比例从原始宽度的100％缩放到0％，这里的第一图片是被横向压缩而并非裁减，根据本发明较佳实施例，第一图片的宽度为200pixel，第一像素值为1pixel，第一缩减比例可任意设定，例如为10％，或设计成满足人体视觉暂留特性为佳，在此不予限制。

第一亮度缩放模组130与第一宽度缩放模组120同步进行，即在接收到切换操作指令后，第一亮度缩放模组130对第一图片的亮度也以第二缩减比例逐渐缩减到较小的第一亮度值，较佳的，第一亮度值约为0左右，也就是说，当第一图片横向缩放从100％降到0％时，第一图片的亮度值也从原始亮度的100％同步降到0％(从50流明降到0)，当然，较佳的，为使用户具有良好的视觉效果，第一缩减比例与第二缩减比例最好相同，即当第一图片宽度横向缩放至百分比30％时，第一图片的亮度百分比也缩放至30％。

第二宽度缩放模组140，当第一图片的宽度减小至第一像素值(例如1pixel)后，立即从载入第二图片，并将第二图片的宽度从像素值很小的第二像素值按第一放大比例增加至原始宽度，较佳的，第二像素值约为1pixel左右，增加方式最好为匀速连续地进行，也就是说，第二宽度缩放模组140把第二图片的宽度匀速且连续地从0％缩放到原始宽度的百分比100％(即从1pixel增大到200pixel)，这里第二图片是被横向拉宽的，同样，第一放大比例可任意设定，例如为12％，当然也可以满足人体视觉暂留特性设定为佳，不以此为限。

第二亮度缩放模组150与第二宽度缩放模组140同步进行，目的是将该第二图片的亮度从一较小的第二亮度值按第二放大比例逐步增大至原始亮度，较佳的，第二亮度值约为0左右，也就是说，当第二图片横向缩放从0％上升到100％时，第二图片的亮度也从0％同步上升到100％(即从0到70流明)，同样，较佳的，为使用户具有良好的视觉效果，第一放大比例与第二放大比例最好相同，即当第二图片宽度横向拉宽至原始宽度的30％时，第二图片的亮度百分比也上升至30％。

图2为本发明一种图片翻转实现方法的步骤流程图。如图2所示，本发明一种图片翻转实现方法包括下列步骤：载入第一图片(步骤201)；将该第一图片的宽度按第一缩减比例逐步缩减至第一像素值，同时，将第一图片的亮度以第二缩减比例逐步缩减至第一亮度值(步骤202)；载入第二图片(步骤203)；将第二图片的宽度从第二像素值按第一放大比例逐步增大至原始宽度，同时，将第二图片的亮度从第二亮度值按第二放大比例逐步增大至原始亮度(步骤204)。

为更佳地达到本发明效果，在步骤202中，第一像素值应为很小像素值，例如为1pixel左右，且第一图片的宽度最好是匀速且连续地以第一缩减比例缩减至第一像素值；第一亮度值也应很小，例如为0左右，第一缩减比例与第二缩减比例最好相同，可以满足人体视觉暂留特性为目的进行设定；在步骤203中，第二像素值同样为很小像素值，例如为1pixel左右，第二图片的宽度最好匀速且连续地以第一放大比例增大至原始宽度，第二亮度值也应很小，例如为0，同理，第一放大比例与第二放大比例最好相同，可以满足人体视觉暂留特性为目的进行设定。

以下将配合图3及图4以实施例方式对本发明进一步进行说明。当一应用本发明的软件运行时，载入第一图片301并点击图片切换按钮后，第一宽度缩放模组120将第一图片301的宽度以第一缩减比例(例如10％)匀速连续地缩减至1pixel，同时第一亮度缩放模组130将第一图片301的亮度以第二缩减比例(也为10％)缩减至0(图片302)；然后载入第二图片401；第二宽度缩放模组将第二图片401的宽度从1pixel以第一放大比例(例如12％)匀速连续地放大至原始宽度，同时第二亮度缩放模组150将第二图片301的亮度从0开始以第二放大比例(例如12％)放大至原始亮度(图片402)。

综上所述，可知本发明与先前技术之间的差异在于本发明之图片翻转系统及其实现方法在翻转过程中对图片宽度进行缩放的同时对图片的亮度进行相应的缩放，为图片的翻转切换动画增加了一个亮度变化的过程(即为动画增加了一个明暗变化的光影效果)，使前后两张图片的切换更为流畅，本发明可以提供用户更好的视觉效果。

上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何本领域技术人员均可在不违背本发明的精神及范畴下，对上述实施例进行修饰与改变。因此，本发明的权利保护范围，应如权利要求书所列。

Claims

1.一种图片翻转系统，至少包括：

图片资料库，至少提供第一图片与第二图片；

2.如权利要求1所述的图片翻转系统，其特征在于：该第一缩减比例与该第二缩减比例相同。

3.如权利要求2所述的图片翻转系统，其特征在于：该第一放大比例与该第二放大比例相同。

4.如权利要求3所述的图片翻转系统，其特征在于：该第一像素值为1pixel，该第一亮度值为0。

5.如权利要求4所述的图片翻转系统，其特征在于：该第二像素值为1pixel，该第二亮度值为0。

6.一种图片翻转的实现方法，至少包括：

载入第一图片；

载入第二图片；以及

7.如权利要求6所述的图片翻转的实现方法，其特征在于：该第一缩减比例与该第二缩减比例相同。

8.如权利要求7所述的图片翻转的实现方法，其特征在于：该第一放大比例与该第二放大比例相同。

9.如权利要求8所述的图片翻转的实现方法，其特征在于：该第一像素值为1pixel，该第一亮度值为0。

10.如权利要求9所述的图片翻转的实现方法，其特征在于：该第二像素值为1pixel，该第二亮度为0。