當視(shì)差滾動與視(shì)錯覺結合，會(huì)發生(shēng)怎樣奇特的變化？視(shì)錯覺是否會(huì)我們帶來(lái)了新的創想？本文動靜結合，詳解了視(shì)錯覺動畫(huà)的原理(lǐ)，并結合視(shì)差滾動做(zuò)了一些(xiē)前瞻性的設計(jì)。

一、緣起

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

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

目前還(hái)有(yǒu)一個(gè)趣味應用名叫Stripe在App store上(shàng)，裏面也收錄了不少(shǎo)趣味的視(shì)錯覺圖，有(yǒu)興趣的同學不妨去體(tǐ)驗下（見圖1）。

圖1：Stripe截圖

對于這一系列神奇的動态視(shì)覺效果為(wèi)了便于下文分析不妨先給它取個(gè)名字，稱之為(wèi)栅欄特效吧(ba)。栅欄特效之所以能吸引我的好奇心不僅是隐藏在它背後神秘的原理(lǐ)，更重要的是它與視(shì)差滾動可(kě)以非常自然的結合。視(shì)差滾動離不開(kāi)界面的自然移動，在滾動操作(zuò)中加入栅欄特效，便賦予了其更為(wèi)生(shēng)動豐富的體(tǐ)驗，而非單純的視(shì)覺流行(xíng)效果。具體(tǐ)設想如下：假設在前一個(gè)頁面中包含一張栅欄特效的底圖，而栅欄在後續的頁面中，随着滾動栅欄經過底圖時(shí)便産生(shēng)動态效果，而實現這種效果并不需要複雜的技(jì)術(shù)，隻需要準備兩張靜态的圖像即可(kě)。那(nà)麽，如何設計(jì)能夠産生(shēng)視(shì)錯覺特效的圖形呢？必須先分解其背後的原理(lǐ)。

二、原理(lǐ)詳解

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

1、傳統的動畫(huà)逐幀分解，獲得(de)多(duō)張圖像作(zuò)為(wèi)底圖的原圖（實例中暫定為(wèi)6幀一個(gè)循環）

2、先将這些(xiē)一系列的動畫(huà)幀疊在一起，有(yǒu)待進步一處理(lǐ)

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

4、随着栅欄移動必須逐幀替換底圖才能看到動态變化。每張底圖對應一個(gè)單位的移動（一個(gè)單位等于一個(gè)空(kōng)隙的間(jiān)距）。下圖中的深色像素條紋部分代表底圖，玫瑰紫條紋部分代表栅欄。如果栅欄疊在底圖之上(shàng)，那(nà)麽空(kōng)隙部分才是人(rén)眼能夠看到的底圖細節。栅欄每移動一個(gè)單位，下一幀圖像取而代之。依次類推制(zhì)作(zuò)一系列然後循環即可(kě)，下一個(gè)循環開(kāi)始即第一幀經過了一條栅欄的寬度而出現下一個(gè)空(kōng)隙。：）