iOS7主屏幕視差效果的網(wǎng)頁(yè)代碼

2013-07-03 09:35:23來(lái)源:威鋒網(wǎng)作者:

蘋(píng)果在介紹 iOS 7 的時(shí)候,并沒(méi)有使用“扁平”這樣詞,而是強(qiáng)調(diào)它的“深度(depth)”。我們可以從下面的動(dòng)態(tài)效果中清晰地看到 iOS 7 中的深層次效果。有人可能很想知道,蘋(píng)果是如何做到的?使用網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)能否

蘋(píng)果在介紹 iOS 7 的時(shí)候,并沒(méi)有使用“扁平”這樣詞,而是強(qiáng)調(diào)它的“深度(depth)”。我們可以從下面的動(dòng)態(tài)效果中清晰地看到 iOS 7 中的深層次效果。有人可能很想知道,蘋(píng)果是如何做到的?使用網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)能否達(dá)到這樣的效果呢?

首先要解釋一下,這種深層次的效果稱(chēng)之為“視差效果”。這是 2D 和 2.5D 游戲主要使用的效果,也就是在各個(gè)對(duì)象之間添加距離感,從而讓人產(chǎn)生視差。多年來(lái),這些效果在網(wǎng)頁(yè)設(shè)計(jì)中也經(jīng)常被用到。

那么,怎樣才能打造出讓人乍看還以為是 3D 的效果呢?如果你安裝有 iOS 7 測(cè)試版,你可能會(huì)注意到,在觀看 2D 渲染(比如一個(gè)視頻)時(shí),這種效果特別吸引人。

視差效果很好理解。望向窗外,物體以不同的相對(duì)速度運(yùn)動(dòng)著,拉開(kāi)不同的距離?康迷浇奈矬w看起來(lái)運(yùn)動(dòng)的速度越快,越遠(yuǎn)的就讓人感覺(jué)運(yùn)動(dòng)得越慢。

在 iOS 7 主屏幕中,具有兩個(gè)層次,一個(gè)是屏幕表面,另一個(gè)是背景圖片。如果你仔細(xì)觀察上面的動(dòng)態(tài)效果,你會(huì)看到圖標(biāo)相對(duì)于屏幕表面來(lái)說(shuō)是靜止的。要實(shí)現(xiàn)這種效果,只需相對(duì)于圖標(biāo)移動(dòng)背景圖片。留意到了嗎,在 iOS 7,當(dāng)我們將 iPhone 從右向左傾斜,背景圖片(壁紙)往右邊移動(dòng),反之從左向右傾斜 iPhone 將看到壁紙往左邊移動(dòng)。

圖一:我們正對(duì)著 iPhone 屏幕

\

圖二:將 iPhone 向左邊傾斜
\

圖三:傾斜形成的角度
\

圖四:得出一個(gè)結(jié)論,傾斜的角度越大,背景圖片移動(dòng)的幅度越大。

\

一家專(zhuān)業(yè)的網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)站詳細(xì)解釋了如何在網(wǎng)頁(yè)設(shè)計(jì)中實(shí)現(xiàn)這樣的視差效果,有興趣的網(wǎng)頁(yè)設(shè)計(jì)師可以點(diǎn)擊進(jìn)入了解相關(guān)代碼。對(duì)代碼一竅不通的讀者可以在平板或者手機(jī)瀏覽器打開(kāi)此鏈接,欣賞用網(wǎng)頁(yè)設(shè)計(jì)做出來(lái)的 iOS 7 主屏幕視差效果(背景圖片可移動(dòng))。
 

關(guān)鍵詞:iOS7

贊助商鏈接: