使用动画转换创建生动的用户体验 - 编程入门网

使用动画转换创建生动的用户体验

典型的应用程序生存期由一些状态组成：数据输入表单、结果界面、含有各种图像的相簿、含有项目的购物车等等。通常，应用程序执行繁 重的任务使用户在这些不同的界面中切换：新的界面替代原来的表单，突然在屏幕中弹出结果，图形和 GUI 对象时而从屏幕中跳出。一般而言 ，各个当前 UI 屏幕都会在操作完成后关闭，然后新的屏幕将取代它的位置。

HTML 应用程序就是一个很好的例子：在某个页面中填写一些数据，单击提交（Submit）按钮，原页面将消除，取而代之的是另一个全新的 用户界面。然后，您将仔细审视这个新界面，考虑自己应该做的事情并找到新的提交按钮。

如果应用程序在这些不同的应用程序状态之间创建一个更具逻辑性的流程，并为用户带来各个新用户界面（UI）会不会更好呢？如果用户不 用重新打量各个新用户界面，而是采用应用程序的流程化方式会怎么样呢？< /p>

这正是动画转换的内容：使应用程序用户界面的转换具有动画效果，从而在这些状态之间创建一个无缝的流程。通过帮助用户理解用户界面 之间的组合，转换可以帮助保证用户连接到程序。

当然，这个问题对开发人员而言意味着更多的工作。让应用程序消除一个界面并显示下一个界面是处理这种问题的最直观的方法。在界面之 间运行某种动画通常要求理解动画过程，然后编写一大堆自定义代码使界面上的元素具有动画效果。

这正是编写 动画转换 库的原因：从根本上简化应用程序状态之间动画的流程，执行合理的默认动画，以及让您专注于编写应用程序代码而 不是动画代码。

演示时间

我们来看一个简单的演示应用程序 FieldsOfText。该应用程序将模拟一个常见的功能（别处可能也有），用户可以请求 GUI 展开自己并提 供更多文本字段。比如说，我将使用一个类似于此的对话框将 至关重要的卡通画 上传到 我的 java.net 博客。应用程序开始只有一个文本字 段，但是通过单击 More 或者 Less 按钮可以增加或减少所显示的文本字段数量。

界面底部也有一个提交按钮，因此此类应用程序通常都有提交按钮。此处的按钮实际上并没有执行任何任务，不过它和其他用户界面元素的 作用一样，都是显示动画转换的过程。

以下是用于显示 GUI 的代码：

// Add the More/Less buttons container add(moreOrLess); // Next, add the proper number of text fields for (int i = 0; i < numFields; ++i) { 　　 add(textFields[i]); } // Finally, add the Submit button at the bottom add(submitPanel);

在这段代码中， moreOrLess 组件是一个面板，用于保存 More 和 Less 按钮。 textFields[] 数组用于保存将要填充到 GUI 中的各种不 同的文本字段。而 numFields 表示我们希望此时显示的数量。 submitPanel 组件是一个面板，用于保存提交按钮。

下面是提供的用户的基本用户界面：

图 1. 应用程序的初始界面

当用户单击 More 按钮，原文本字段下面将增加一个文本字段，如下图所示：

图 2. 用户单击 More 按钮之后的应用程序界面

使用动画转换创建生动的用户体验(2)

当用户单击 Less 按钮，最下面的文本字段将消失，用户界面将回到图 1。

在典型的应用程序中，上述步骤可能是先消除原始窗口然后再显示新的用户界面。与此不同，动画转换库将平稳地在这些状态之间切换。它 将淡入或淡出将要消除或出现的组件（比如说一个文本字段），而这些组件可能位于不同的位置（如提交按钮）。举例说明，图 3 显示了在前 两个界面之间转换时的用户界面：

图 3. 前两个界面之间的动画转换

在图 3 中，我们可以看到第二个文本字段的淡出效果，而提交按钮将向下移动。

如果要查看动

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!