自然而流畅——聊聊界面的切换动画

在使用一些移动端的&">nbsp;App 或 PC 端的软件的时候,我们常常会有一些界面之间切换的操作,尤其是在移动端的设备上,因为屏幕尺寸和交互方式的特性,就更多的会出现这些切换的操作,而很突然地从一个界面切换到另一个界面会给用户带来
困扰,所以在触发这些操作的同时,往往需要过渡形式的动画来引导用户是如何从一个界面切换到另一个界面的,我们
来看看一些常见的界面切换的过渡方式吧。

1. 淡入淡出

淡入淡出的过渡效果是最为常见的处理手法,这种效果往往能很直观的表现从一个画面到另一个画面变化的过程,视觉表现上比较柔和,但同时通常会局限在需要过渡的两个界面之间有一定的共同特点。
比如把iPhone从第一屏滑动到Spotlight页面时候的效果,我们可以看到有个黑色半透明背景从无到有的过程,同时首屏的图标从完全不透明慢慢变成透明状向右移出屏幕。

再比如在Windows7平台上的Aeropeek功能,当把鼠标移动到桌面右下角的显示桌面按钮的时候,窗口内容就会以淡入淡出的效果从不透明过渡到全部透明的效果。

iOS的Music界面也同样用到了这样的效果,从“正在播放”界面切换到上一级界面的时候,顶部的状态栏和标题栏就会用淡入淡出的效果,从播放界面的深色转换为列表界面的浅色。

2. 场景切换

场景切换通常用于两个不同的界面之间,视觉效果会看起来很酷,缺点是会需要因为切换场景而需要等待时间。
我们来看看Apple的Cards应用,从选择一张卡片,到进入编辑卡片的界面,卡片缓缓地飞入到一个皮革质感的桌面。

再比如iOS里面的“用电子邮件发送照片”,也同样是使用了这类效果(照片进行移动,同时邮件界面从底部滑入屏幕)。

此类过渡效果不太适用于需要经常切换的页面之间,过多的等待时间会让用户感到焦躁。

3. 翻转界面

翻转界面的方式在iOS平台相当常见,通常翻转前后的两个界面存在一定的联系。常见于设置界面和列表界面。
如下图的“正在播放”界面和“专辑列表”界面的切换。

4. 黑屏

有iPhone的同学可以一起来做个测试,把iPhone的壁纸和锁屏界面设置为两张不一样的照片时(注意,一定要不一样哦),当你划开解锁按钮以后,屏幕会先以淡入淡出的方式黑屏一下,然后再慢慢亮回来回到主界面。

有时候我们也会在游戏里看到这样的效果,比如打开Cut the Rope应用,当点击设置按钮后,也会以黑屏的方式切换界面。

5. 变形

iOS中打开一个文件夹会以一个带箭头的样式展开,而展开的那部分最后却缺少了那个小三角的那部分面积,让我们放慢速度看看iOS是如何很自然的把小三角隐藏掉的吧:

在打开文件夹的同时,我们可以很清晰的看到那个小箭头渐渐缩小直到完全没有。虽然这里的变形速度很快以至于人眼可能很难去察觉到它的变化过程,但是以合理又自然的变形过程来达到最后想要的形状结果也正是体现细节的一部分。

6. 形式追随内容的缩放

此类动画的表现通常还会伴随淡入淡出的效果配合,比较常见的是Window7的任务栏预览窗格,当鼠标从一个图标移动到另外一个图标的时候,因为预览窗口的大小不一致,所以窗口会针对内容的大小自动缩放至适当的大小,而内容则会伴随以淡入淡出的方式变化。

在Mac 平台下,此类页面切换的过渡方式则更常见,比如在 Mac 下打开系统配置,在系统配置里面切换任何一个设置项都会有这种效果。

7. 放大

放大的效果常见于从一个较小的元素进入到一个较大的界面时候的过渡,有时候也会伴随淡入淡出的效果作为配合。如GarageBand中,选择一个乐器进入该乐器的编辑界面时所使用的效果。

8. 多种效果同时使用

在有些复杂的界面切换过程中,有时候仅仅使用一种方式来实现界面的切换是远远不够的,为了能够更生动而自然的在界面中进行切换,需要同时运用几种过渡效果。

比如上图的Lion系统,将iTunes全屏的过程中,可以看到桌面背景在进行左右切换的同时,iTunes伴随淡入淡出的效果并且放大至全屏,Dock则往下移动以腾出屏幕空间给iTunes全屏。

这样做的目的 1 是很好的将 iTunes 界面过渡到全屏的状态,2 是背景的切换代表着全屏的 iTunes 作为一个单独的 Space 存放在 Mac 的屏幕里。也由此可见,以怎样的动画过渡效果去实现界面的转换实际上也在告知用户,我这样切换意味着什么。

除了以上列出的这些过渡效果以外,还有更多的过渡效果没有在这里列出来。大家可以进一步去挖掘和发现更多。动画除了可以使界面变得不那么死板以外,合理的动画也会让用户很直观的了解到界面与界面之间的关系以及如何切换的,更能增加用户在使用过程中的流畅性,从而提升体验。

最后,留个小小的作业。在iPad的主屏上,重力感应导致的横竖屏切换,它是以怎样细微的动画过渡来实现的呢?

(本文出自Tencent CDC Blog,转载时请注明出处)

时间: 2024-10-31 20:39:52

自然而流畅——聊聊界面的切换动画的相关文章

聊聊常见的界面切换动画

  在使用一些移动端的App或PC端的软件的时候,我们常常会有一些界面之间切换的操作,尤其是在移动端的设备上,因为屏幕尺寸和交互方式的特性,就更多的会出现这些切换的操作,而很突然地从一个界面切换到另一个界面会给用户带来困扰,所以在触发这些操作的同时,往往需要过渡形式的动画来引导用户是如何从一个界面切换到另一个界面的,我们来看看一些常见的界面切换的过渡方式吧. 一.淡入淡出 淡入淡出的过渡效果是最为常见的处理手法,这种效果往往能很直观的表现从一个画面到另一个画面变化的过程,视觉表现上比较柔和,但同

Swift:超炫的View Controller切换动画

匿名社交应用Secret的开发者开发了一款叫做Ping的应用,用户可以他们感兴趣的话题的推送. Ping有一个很炫的东西,就是主界面和之间切换的动画做的非常的好.每次看到一个非常炫的动画,都不由得会想:"这个东西我要不要自己实现以下".哈哈~~~ 这个教程里,你会学到如何用Swift实现这样的很酷的动画.你会学到如何使用shape layer,遮罩和使用UIViewControllerAnimnatedTransitioning协议和UIPercentDrivenInteractive

pagetransformer-ViewPager使用PageTransformer设置了切换动画后,内部的view不刷新

问题描述 ViewPager使用PageTransformer设置了切换动画后,内部的view不刷新 5.0的系统会出现以下问题,4.4的系统则没问题 我使用了如下代码实现了ViewPager的动画切换效果 viewPager.setPageTransformer(true, new DepthPageTransformer()); 使用FragmentStatePagerAdapter将fragment作为ViewPager的子页面. 但是fragment中的checkBox或RadioBut

【Android开发】页面切换动画

Android的页面切换动画学习笔记 实现两个页面滑动切换,一些相册的效果也是如此 一个Activity的界面配置文件 activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=&quo

【Android开发】Activity切换动画

好久没写博文了,自从ACM退役以后,一直在专注开发应用程序.如果不是今天有博友加我QQ,我都忘记我的博客了,看看以前自己的劳动成果,努力的那些日子历历在目,我决定每周定时更新博文!作为自己前进的动力. 今天学了Activity切换动画与页面切换动画,总结了一下学习笔记: Activity切换动画: 两个Activity的界面配置文件 activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <

Android中Activity跳转和切换动画

 android2.0以上 可以用overridePendingTransition(R.anim.translate_in, R.anim.translate_out);这个方法 切换动画 但麻烦的是 切换动画时候 必须finish前面一个 而且你无法控制返回和结束时候的动画 现在有一种方式 用theme来控制 <style name="MyTheme"> <item name="android:windowAnimationStyle">

js实现横向百叶窗效果网页切换动画效果的方法

 这篇文章主要介绍了js实现横向百叶窗效果网页切换动画效果的方法,实例分析了javascript实现百叶窗效果的技巧,需要的朋友可以参考下     本文实例讲述了js实现横向百叶窗效果网页切换动画效果的方法.分享给大家供大家参考.具体分析如下: 这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到网页全部显示完全.代码如下: 代码如下: <html> <head> <title>js网页百叶窗动态切换效果</tit

viewflipper-Android中ViewFlipper图片切换动画怎么写?

问题描述 Android中ViewFlipper图片切换动画怎么写? 布局如上所示,上面是一个button,下面是ViewFlipper,点击button后ViewFlipper中的图片自动切换,实现一个广告轮播效果.目前效果是右边出来把左边推出去,但是我想要不同的切换效果,比如写一个前面图片淡出显示出后面第二张图片,比如前面第一张缩小至一个点然后小时,后面第二张图片完全显示. 跪求大神指导,在线等,有点急. 解决方案 用timer,控制它的的showPrevious,showNext等

Android的Activity屏幕切换动画(二)-左右滑动深入与实战

http://blog.csdn.net/wangjia55/article/details/8104586 上一篇文章将了 Android的左右滑动切换(见 Android的Activity屏幕切换动画(一)-左右滑动切换),实现过程是非常简单,一些新手可能会向深入了了解Activity切换的原理,下面主要对左右滑动进行深入的探讨,并以项目中的一个切换效果来进一步了解. Activity的切换效果使用的是Android的动画效果,Android的动画在官方有相关资料:http://develo