聊聊常见的界面切换动画

 

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

  一、淡入淡出

  淡入淡出的过渡效果是最为常见的处理手法,这种效果往往能很直观的表现从一个画面到另一个画面变化的过程,视觉表现上比较柔和,但同时通常会局限在需要过渡的两个界面之间有一定的共同特点。

  比如把iPhone从第一屏滑动到Spotlight页面时候的效果,我们可以看到有个黑色半透明背景从无到有的过程,同时首屏的图标从完全不透明慢慢变成透明状向右移出屏幕。


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


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


  二、场景切换

  场景切换通常用于两个不同的界面之间,视觉效果会看起来很酷,缺点是会需要因为切换场景而需要等待时间。

  我们来看看Apple的Cards应用,从选择一张卡片,到进入编辑卡片的界面,卡片缓缓地飞入到一个皮革质感的桌面。


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


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

  三、翻转界面

  翻转界面的方式在iOS平台相当常见,通常翻转前后的两个界面存在一定的联系。常见于设置界面和列表界面。

  如下图的“正在播放”界面和“专辑列表”界面的切换。


  四、黑屏

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


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

时间: 2025-01-29 18:19:33

聊聊常见的界面切换动画的相关文章

Android上webview界面切换动画效果

使用Android上的webview控件时需要跳转到下一个html时,要求当前界面缓缓的向左移动,下一个html界面缓缓的从右边出现.这与常规动画不同,一般方式将无法制作出动画.主要实现方法可以先保存上一个网页的快照,与将要跳转的页面结合起来,制作相关动画. 下面是主要代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 4

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

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

Swift:超炫的View Controller切换动画

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

Android实现Activity界面切换添加动画特效的方法_Android

本文以实例形式展示了Android实现Activity界面切换添加动画特效的方法,对于Android程序设计人员来说有很好的参考借鉴价值.具体方法如下: 了解Android程序设计的人应该知道,在Android 2.0之后有了overridePendingTransition(),其中里面两个参数,一个是前一个activity的退出,另一个activity的进入. 现看看下面这段示例代码: @Override public void onCreate(Bundle savedInstanceSt

Activity取消界面切换的默认动画方法(推荐)_Android

一般启动一个新的Activity都默认有切换的动画效果,比如界面从右至左的移动. 但是有些时候我们不需要这个动画,怎么办? 操作方法比较麻烦,这里我推荐其中一种.我这里是要做启动页splash到首页Home无缝展示,即启动页的图片背景和首页最上层的悬浮背景图是一模一样,用户会以为还在启动页,我这里会做些动画,然后进行开门效果.(首页会多出2个按钮,此时就不是启动页了) 主要实现思路: 1.需要设置无动画效果的主题,应用到对应的界面. 2.在启动页面界面结束时,需要增加一个方法 overrideP

Android实现Activity界面切换添加动画特效的方法

本文以实例形式展示了Android实现Activity界面切换添加动画特效的方法,对于Android程序设计人员来说有很好的参考借鉴价值.具体方法如下: 了解Android程序设计的人应该知道,在Android 2.0之后有了overridePendingTransition(),其中里面两个参数,一个是前一个activity的退出,另一个activity的进入. 现看看下面这段示例代码: @Override public void onCreate(Bundle savedInstanceSt

Activity取消界面切换的默认动画方法(推荐)

一般启动一个新的Activity都默认有切换的动画效果,比如界面从右至左的移动. 但是有些时候我们不需要这个动画,怎么办? 操作方法比较麻烦,这里我推荐其中一种.我这里是要做启动页splash到首页Home无缝展示,即启动页的图片背景和首页最上层的悬浮背景图是一模一样,用户会以为还在启动页,我这里会做些动画,然后进行开门效果.(首页会多出2个按钮,此时就不是启动页了) 主要实现思路: 1.需要设置无动画效果的主题,应用到对应的界面. 2.在启动页面界面结束时,需要增加一个方法 overrideP

Unity iOS混合开发界面切换思路解析_IOS

思路 之前一篇文章里面只谈到了Unity和iOS工程的融合,并没有谈到iOS和Unity界面的切换,这里谈谈思路,Unity导出的iOS工程里面的结构大致是这样的,有一个Window,Window上有一个UnityView,但是并没有控制器,也没有根控制器,虽然在导出的iOS工程中Classes文件夹下的UnityAppController中有rootController的属性,但是上面也标注为空~ 所以,思路就只有一种,,既然Unity导出的iOS工程有一个Window并没有控制器,那好,混合

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

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