當(dāng)視差滾動(dòng)與視錯(cuò)覺結(jié)合，會(huì)發(fā)生怎樣奇特的變化？視錯(cuò)覺是否會(huì)我們帶來了新的創(chuàng)想？本文動(dòng)靜結(jié)合，詳解了視錯(cuò)覺動(dòng)畫的原理，并結(jié)合視差滾動(dòng)做了一些前瞻性的設(shè)計(jì)。

一、緣起

之前在廣告產(chǎn)品鉆石展位新版的首頁中嘗試了視差滾動(dòng)（Parallax Scrolling），對(duì)于這兩年比較流行的視差滾動(dòng)有了一些基本的了解。我們知道，視差滾動(dòng)通過移動(dòng)頁面有層次地展現(xiàn)內(nèi)容，整個(gè)過程中各視覺元素移動(dòng)速度不同固得“視差”之名。一般分為背景、主內(nèi)容、前景3個(gè)層次，至少也要2個(gè)層次才能體現(xiàn)速度差。 機(jī)緣巧合，在一次下午茶上凌征同學(xué)分享了一系列視錯(cuò)覺現(xiàn)象。其中一組動(dòng)態(tài)效果吸引了我的注意：簡(jiǎn)單的兩張圖，一張做了特殊設(shè)計(jì)的底圖，一張由規(guī)則條紋組成的柵欄，通過相互水平位移可以出現(xiàn)動(dòng)態(tài)的效果。 具體效果可觀看下面的視頻：

http://v.youku.com/v_show/id_XNDYzNjEzMjQw.html

http://v.youku.com/v_show/id_XNDYzNjA3ODky.html

http://v.youku.com/v_show/id_XNDYzNjA4MDUy.html

http://v.youku.com/v_show/id_XNDUxNDkzOTQ4.html

目前還有一個(gè)趣味應(yīng)用名叫Stripe在App store上，里面也收錄了不少趣味的視錯(cuò)覺圖，有興趣的同學(xué)不妨去體驗(yàn)下（見圖1）。

圖1：Stripe截圖

對(duì)于這一系列神奇的動(dòng)態(tài)視覺效果為了便于下文分析不妨先給它取個(gè)名字，稱之為柵欄特效吧。柵欄特效之所以能吸引我的好奇心不僅是隱藏在它背后神秘的原理，更重要的是它與視差滾動(dòng)可以非常自然的結(jié)合。視差滾動(dòng)離不開界面的自然移動(dòng)，在滾動(dòng)操作中加入柵欄特效，便賦予了其更為生動(dòng)豐富的體驗(yàn)，而非單純的視覺流行效果。具體設(shè)想如下：假設(shè)在前一個(gè)頁面中包含一張柵欄特效的底圖，而柵欄在后續(xù)的頁面中，隨著滾動(dòng)?xùn)艡诮?jīng)過底圖時(shí)便產(chǎn)生動(dòng)態(tài)效果，而實(shí)現(xiàn)這種效果并不需要復(fù)雜的技術(shù)，只需要準(zhǔn)備兩張靜態(tài)的圖像即可。那么，如何設(shè)計(jì)能夠產(chǎn)生視錯(cuò)覺特效的圖形呢？必須先分解其背后的原理。

二、原理詳解

經(jīng)過仔細(xì)的觀察并結(jié)合逐幀動(dòng)畫的原理，下面配合插圖講解具體的原理如下：首先我們知道動(dòng)畫是利用了視覺暫留（Persistence of vision）現(xiàn)象，即用有限的幀數(shù)可以表現(xiàn)無限連貫的動(dòng)態(tài)。由此推理可知，柵欄特效能出現(xiàn)動(dòng)畫效果必定是將一串序列的動(dòng)畫幀合成一張靜態(tài)的圖，并利用柵欄的移動(dòng)逐步出現(xiàn)不同的幀。即先出現(xiàn)第一幀，隨著移動(dòng)出現(xiàn)第二幀，然后第三第四第五…完成一個(gè)動(dòng)畫后再回到第一幀，如此循環(huán)。那么為什么這一系列的動(dòng)畫幀會(huì)依次展現(xiàn)而不會(huì)重疊在一起呢？這便是柵欄的功能了，柵欄部分相當(dāng)于一個(gè)公共區(qū)域，它填充了每一幀的大部分內(nèi)容，隨著柵欄移動(dòng)一個(gè)單位的空隙區(qū)域，前一幀的底圖必須消失為下一幀讓位。這就意味這一序列的幀必須根據(jù)相應(yīng)的柵欄的位置進(jìn)行鏤空，再將每一幀疊在一起形成一張靜態(tài)底圖。為了便于直觀理解，下面以行走的人為實(shí)例分解了詳細(xì)的步驟圖：

1、傳統(tǒng)的動(dòng)畫逐幀分解，獲得多張圖像作為底圖的原圖（實(shí)例中暫定為6幀一個(gè)循環(huán)）

2、先將這些一系列的動(dòng)畫幀疊在一起，有待進(jìn)步一處理

3、先處理第一幀，隱藏其他幀數(shù)，我們看到第一幀的圖像疊在柵欄之下

4、隨著柵欄移動(dòng)必須逐幀替換底圖才能看到動(dòng)態(tài)變化。每張底圖對(duì)應(yīng)一個(gè)單位的移動(dòng)（一個(gè)單位等于一個(gè)空隙的間距）。下圖中的深色像素條紋部分代表底圖，玫瑰紫條紋部分代表柵欄。如果柵欄疊在底圖之上，那么空隙部分才是人眼能夠看到的底圖細(xì)節(jié)。柵欄每移動(dòng)一個(gè)單位，下一幀圖像取而代之。依次類推制作一系列然后循環(huán)即可，下一個(gè)循環(huán)開始即第一幀經(jīng)過了一條柵欄的寬度而出現(xiàn)下一個(gè)空隙。：）

標(biāo)簽： 產(chǎn)品設(shè)計(jì) 視差滾動(dòng) 交互設(shè)計(jì)原則 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。