CN101727282B - 一种交互界面动画的实现方法 - Google Patents

Abstract

本发明涉及一种交互界面动画的实现方法，其包括步骤101，设置用于存储全部界面页显示数据的滑动缓存、用于存储主界面当前页图标层显示数据的图标缓存、以及存储主界面底层显示数据的拖动缓存；步骤102，调用所述图标缓存内数据以显示主界面当前页动画；步骤103，调用所述滑动缓存内数据，以显示主界面相邻页从而实现更新主界面当前页动画，转步骤102；步骤104，调用拖动缓存，通过按压设置在屏幕主界面上的图标，以拖动方式改变图标位置并定位到目标图标位置，转步骤102。本发明有效地解决了现有嵌入式设备在低主频CPU平台上实现复杂交互动画时效率低下、刷屏速度迟缓，高主频CPU平台上占用CPU资源过多、降低电池续航能力问题。

Description

一种交互界面动画的实现方法

技术领域

本发明涉及一种占用低CPU资源情况下进行复杂交互主界面动画的软件实现方法。

背景技术

目前各种嵌入式手持设备在动画效果，尤其是主界面的动画交互操作性上竞争愈加激烈，画面越来越炫，操作越来越复杂。

按照传统的刷屏方式进行动画效果的显示，是需要高主频的CPU作为硬件支持的，很多主流品牌的手机、MP4等手持设备的CPU主频达到667MHz-1GHz甚至以上，酷炫的动画效果如果占用很大CPU资源势必会减少电池续航时间，而在低主频CPU平台上实现复杂交互动画时效率低下、刷屏速度迟缓。

发明内容

本发明是为了解决传统刷屏方式占用大量CPU资源而造成的浪费，克服现有技术中的不足之处，提出一种交互界面动画的实现方法。

本发明的技术问题，采用以下方案实现：

一种交互界面动画的实现方法，通过以下步骤调用CPU中的缓存以控制外部设备屏幕动画显示；

(1)步骤101，设置用于存储全部界面页显示数据的滑动缓存、用于存储主界面当前页图标层显示数据的图标缓存、以及存储主界面底层显示数据的拖动缓存；

(2)步骤102，调用所述图标缓存内数据以显示主界面当前页动画；

(3)步骤103，调用所述滑动缓存内数据，以显示主界面相邻页从而实现更新主界面当前页动画，转步骤102；

(4)步骤104，调用拖动缓存，通过按压设置在屏幕主界面上的图标，以拖动方式改变图标位置并定位到目标图标位置，转步骤102。

另，在实际使用和操作时，还可利用有如下步骤进一步完善：

所述步骤(4)还包括以下步骤：

(5)步骤105，在步骤104上将图标拖动至屏幕界面边缘，将图标切换到主界面相邻页，更新拖动缓存；

(6)步骤106，通过按压设置在屏幕主界面上的插件，以拖动的方式改变插件位置并定位到目标图标位置，更新滑动缓存；

(7)步骤107，在106步骤上将插件拖动至屏幕边缘，将插件切换到主界面相邻页，更新拖动缓存。

所述步骤102进一步包含下列步骤：

(21)步骤201，将图标缓存直接拷贝至显存；

(22)步骤202，绘制当前主界面页上面的插件至显存。

所述步骤103进一步包含下列步骤：

(31)步骤301，更新屏幕主界面当前页在滑动缓存内数据；

(32)步骤302，将滑动缓存作为显存，根据手指滑动距离配置传送给DMA的滑动缓存数据地址；

(33)步骤303，当手指弹起，以滑动动画形式滑动到主界面相邻页显示数据；

(34)步骤304，恢复步骤102的刷屏方式。

所述步骤104进一步包含下列步骤：

(41)步骤401，长按主界面上图标，将绘制该图标之前的所有显存数据拷贝至拖动缓存备份；

(42)步骤402，以拖动的方式动态改变图标位置，重新绘制时先将拖动缓存直接拷贝至显存；

(43)步骤403，绘制已改变位置的图标；

(44)步骤404，松开手指以确定图标位置，恢复步骤102的刷屏方式；

(45)步骤405，重新更新图标缓存和滑动缓存。

所述步骤106进一步包含下列步骤：

(51)步骤501，长按主界面上插件，将绘制该插件之前的所有显存数据拷贝至拖动缓存备份；

(52)步骤502，以拖动的方式动态改变插件位置，重新绘制时先将拖动缓存直接拷贝至显存；

(53)步骤503，绘制已改变位置的插件；

(54)步骤504，松开手指以确定插件位置，恢复步骤102的刷屏方式；

(55)步骤505，由于插件位置有所更改，重新更新滑动缓存，不需更新图标缓存。

与现有技术相比，本发明具有以下有益效果：

本发明大大提高绘制主界面数据的效率，占用更少的CPU资源以实现更炫的显示效果和更复杂的操作方式，有效解决了嵌入式设备在低主频CPU平台上实现复杂交互动画时效率低下、刷屏速度迟缓、高主频CPU平台上占用资源过多、耗电量大等问题，在高主频CPU的硬件平台上可以占用更低主频以提高电池续航能力，在低主频CPU的硬件平台上可以增加动画效果显示的流畅性。本发明方法还具有普遍性，易于在各平台上移植。

附图说明

图1为本发明实现方法流程图；

图2为普通绘图方式流程图；

图3为滑动屏幕的绘图方式流程图；

图4为拖动图标的绘图方式流程图；

图5为拖动插件的绘图方式流程图；

图6为滑动屏幕的动画示意图；

图7为拖动图标的动画示意图；

图8为拖动插件的动画示意图；

图9为拖动插件换页的动画示意图。

具体实施方式

本发明现在结合图示做进一步说明：

一种交互界面动画的实现方法，包含下列步骤，如图1-9所示。

(1)准备包含全部界面页显示数据的备份缓存，所述数据包含主界面全部页的背景、图标、插件等所有数据，以下简称滑动缓存；准备包含主界面当前页图标层显示数据的备份缓存，所述数据包含主界面当前页的背景、图标数据，以下简称图标缓存；准备包含除拖动图标或插件之外的主界面底层所有显示数据的备份缓存，所述数据包含除拖动图标或插件之外的显存上的全部数据，以下简称拖动缓存(步骤101)。

(2)显示主界面当前页动画，使用图标缓存以提高效率(步骤102)。该步骤还进一步包含下列步骤：a.将图标缓存直接拷贝至显存，节约逐个绘制图标所耗时间(步骤201)；b.绘制当前主界面页上面的插件至显存(步骤202)。

(3)滑动屏幕，更新主界面当前页在滑动缓存内数据，屏幕上数据以跟随手指的方式显示，当手指弹起，以滑动动画形式滑动到主界面相邻页显示数据，恢复至步骤102刷屏方式，使用滑动缓存以提高效率(步骤103)。

该步骤还进一步包含下列步骤：a.更新主界面当前页在滑动缓存内数据(步骤301)；b.将滑动缓存作为显存，根据手指滑动距离配置传送给DMA的滑动缓存数据地址(步骤302)；c.当手指弹起，以滑动动画形式滑动到主界面相邻页显示数据(步骤303)；d.恢复步骤102的刷屏方式(步骤304)。

(4)长按主界面上图标，以拖动的方式动态改变图标位置，使用拖动缓存以提高效率，松开手指以确定图标位置，恢复至步骤102刷屏方式，更新图标缓存和滑动缓存(步骤104)。

该步骤还进一步包含下列步骤：a.长按主界面上图标，将绘制该图标之前的所有显存数据拷贝至拖动缓存备份(步骤401)；b.以拖动的方式动态改变图标位置，重新绘制时先将拖动缓存直接拷贝至显存(步骤402)；c.绘制已改变位置的图标(步骤403)；d.松开手指以确定图标位置，恢复步骤102的刷屏方式(步骤404)；e.由于图标位置有所更改，重新更新图标缓存和滑动缓存(步骤405)。

(5)在104步骤上将图标拖动至屏幕边缘，将图标切换到主界面相邻页，更新拖动缓存，恢复至步骤104刷屏方式，使用拖动缓存以提高效率(步骤105)；

(6)长按主界面上插件，以拖动的方式动态改变插件位置，使用拖动缓存以提高效率，松开手指以确定插件位置，恢复至步骤102刷屏方式，更新滑动缓存(步骤106)。

该步骤还进一步包含下列步骤：a.长按主界面上插件，将绘制该插件之前的所有显存数据拷贝至拖动缓存备份(步骤501)；b.以拖动的方式动态改变插件位置，重新绘制时先将拖动缓存直接拷贝至显存(步骤502)；c.绘制已改变位置的插件(步骤503)；d.松开手指以确定插件位置，恢复步骤102的刷屏方式(步骤504)；e.由于插件位置有所更改，重新更新滑动缓存，不需更新图标缓存(步骤505)。

(7)在106步骤上将插件拖动至屏幕边缘，将插件拖动至屏幕边缘，将插件切换到主界面相邻页，更新拖动缓存，恢复至步骤106刷屏方式，使用拖动缓存以提高效率(步骤107)；

(8)以上步骤可以参考附图所示循环进行。

滑动屏幕具体表现形式，如图6所示：

该操作对应步骤103，具体操作对应如下：

在图示6-1状态上，手指按在屏幕上任意位置滑动，进行步骤301，302，图示6-2为中间过程中的一帧：

(31)步骤301，更新屏幕主界面当前页在滑动缓存内数据；

(32)步骤302，将滑动缓存作为显存，根据手指滑动距离配置传送给DMA的滑动缓存数据地址；

手指弹起后进行步骤303，304，最后至图6-3显示的主界面页：

(33)步骤303，当手指弹起，以滑动动画形式滑动到主界面相邻页显示数据；

(34)步骤304，恢复步骤102的刷屏方式。

拖动图标具体表现形式，如图7所示：

该操作对应步骤104，具体操作对应如下：

在图7-1状态下，长按图标并拖动，变为图7-2状态，进行步骤401，402，403：

(41)步骤401，长按主界面上图标，将绘制该图标之前的所有显存数据拷贝至拖动缓存备份；

(42)步骤402，以拖动的方式动态改变图标位置，重新绘制时先将拖动缓存直接拷贝至显存；

(43)步骤403，绘制已改变位置的图标；

松开手指后，确定图标位置，变为图7-3所示状态，进行步骤404，405

(44)步骤404，松开手指以确定图标位置，恢复步骤102的刷屏方式；

(45)步骤405，重新更新图标缓存和滑动缓存。

拖动插件具体表现形式，如图8所示：

该操作对应步骤106，具体操作对应如下：

在图8-1状态下，长按图标并拖动，变为图8-2状态，进行步骤501，502，503：

(51)步骤501，长按主界面上插件，将绘制该插件之前的所有显存数据拷贝至拖动缓存备份；

(52)步骤502，以拖动的方式动态改变插件位置，重新绘制时先将拖动缓存直接拷贝至显存；

(53)步骤503，绘制已改变位置的插件；

松开手指后，确定图标位置，变为图8-3所示状态，进行步骤504，505

(54)步骤504，松开手指以确定插件位置，恢复步骤102的刷屏方式；

(55)步骤505，由于插件位置有所更改，重新更新滑动缓存，不需更新图标缓存。

拖动图标插件换页具体表现形式如图9所示：

该操作对应步骤107，具体操作对应如下：

步骤107，在106步骤上将插件拖动至屏幕边缘，至图9-1所示状态，将插件切换到主界面相邻页，如图9-2状态，更新拖动缓存。

Claims (6)

1.一种交互界面动画的实现方法，其特征在于，通过以下步骤调用CPU中的缓存以控制外部设备屏幕动画显示：

(1)步骤101，设置用于存储全部界面页显示数据的滑动缓存、用于存储主界面当前页图标层显示数据的图标缓存、以及存储主界面底层显示数据的拖动缓存；

(2)步骤102，调用所述图标缓存内数据以显示主界面当前页动画，将图标缓存直接拷贝至显存，绘制当前主界面页上面的插件至显存；

(3)步骤103，调用所述滑动缓存内数据，以显示主界面相邻页从而实现更新主界面当前页动画，转步骤102；或者步骤104，调用拖动缓存，通过按压设置在屏幕主界面上的图标，以拖动方式改变图标位置并定位到目标图标位置，转步骤102。

2.根据权利要求1所述的交互界面动画的实现方法，其特征是，所述方法还包括以下步骤：

(5)步骤105，在步骤104上将图标拖动至屏幕界面边缘，将图标切换到主界面相邻页，更新拖动缓存。

3.根据权利要求1所述的交互界面动画的实现方法，其特征是，所述方法还包括以下步骤：

(6)步骤106，通过按压设置在屏幕主界面上的插件，以拖动的方式改变插件位置并定位到目标图标位置，更新滑动缓存；

(7)步骤107，在106步骤上将插件拖动至屏幕边缘，将插件切换到主界面相邻页，更新拖动缓存。

4.根据权利要求1所述的交互界面动画的实现方法，其特征是，所述步骤103进一步包含下列步骤：

(31)步骤301，更新屏幕主界面当前页在滑动缓存内数据；

(32)步骤302，将滑动缓存作为显存，根据手指滑动距离配置传送给DMA的滑动缓存数据地址；

(33)步骤303，当手指弹起，以滑动动画形式滑动到主界面相邻页显示数据；

(34)步骤304，恢复步骤102的刷屏方式。

5.根据权利要求2所述的交互界面动画的实现方法，其特征是，所述步骤104进一步包含下列步骤：

(41)步骤401，长按主界面上图标，将绘制该图标之前的所有显存数据拷贝至拖动缓存备份；

(42)步骤402，以拖动的方式动态改变图标位置，重新绘制时先将拖动缓存直接拷贝至显存；

(43)步骤403，绘制已改变位置的图标；

(44)步骤404，松开手指以确定图标位置，恢复步骤102的刷屏方式；

(45)步骤405，重新更新图标缓存和滑动缓存。

6.根据权利要求3所述的交互界面动画的实现方法，其特征是，所述步骤106进一步包含下列步骤：

(51)步骤501，长按主界面上插件，将绘制该插件之前的所有显存数据拷贝至拖动缓存备份；

(52)步骤502，以拖动的方式动态改变插件位置，重新绘制时先将拖动缓存直接拷贝至显存；

(53)步骤503，绘制已改变位置的插件；

(54)步骤504，松开手指以确定插件位置，恢复步骤102的刷屏方式；

(55)步骤505，由于插件位置有所更改，重新更新滑动缓存，不需更新图标缓存。

Images