iOS7主屏幕视差效果的网页代码

2013-07-03 09:35:23来源:威锋网作者:

苹果在介绍 iOS 7 的时候,并没有使用“扁平”这样词,而是强调它的“深度(depth)”。我们可以从下面的动态效果中清晰地看到 iOS 7 中的深层次效果。有人可能很想知道,苹果是如何做到的?使用网页设计的技术能否

苹果在介绍 iOS 7 的时候,并没有使用“扁平”这样词,而是强调它的“深度(depth)”。我们可以从下面的动态效果中清晰地看到 iOS 7 中的深层次效果。有人可能很想知道,苹果是如何做到的?使用网页设计的技术能否达到这样的效果呢?

首先要解释一下,这种深层次的效果称之为“视差效果”。这是 2D 和 2.5D 游戏主要使用的效果,也就是在各个对象之间添加距离感,从而让人产生视差。多年来,这些效果在网页设计中也经常被用到。

那么,怎样才能打造出让人乍看还以为是 3D 的效果呢?如果你安装有 iOS 7 测试版,你可能会注意到,在观看 2D 渲染(比如一个视频)时,这种效果特别吸引人。

视差效果很好理解。望向窗外,物体以不同的相对速度运动着,拉开不同的距离。靠得越近的物体看起来运动的速度越快,越远的就让人感觉运动得越慢。

在 iOS 7 主屏幕中,具有两个层次,一个是屏幕表面,另一个是背景图片。如果你仔细观察上面的动态效果,你会看到图标相对于屏幕表面来说是静止的。要实现这种效果,只需相对于图标移动背景图片。留意到了吗,在 iOS 7,当我们将 iPhone 从右向左倾斜,背景图片(壁纸)往右边移动,反之从左向右倾斜 iPhone 将看到壁纸往左边移动。

图一:我们正对着 iPhone 屏幕

\

图二:将 iPhone 向左边倾斜
\

图三:倾斜形成的角度
\

图四:得出一个结论,倾斜的角度越大,背景图片移动的幅度越大。

\

一家专业的网页设计网站详细解释了如何在网页设计中实现这样的视差效果,有兴趣的网页设计师可以点击进入了解相关代码。对代码一窍不通的读者可以在平板或者手机浏览器打开此链接,欣赏用网页设计做出来的 iOS 7 主屏幕视差效果(背景图片可移动)。
 

关键词:iOS7

赞助商链接: