H5一鏡到底學習筆記（可視化編輯篇）

設置頁面間距

在h5中製做一鏡到底時，須要設定一個獨特的參數名爲頁面間距。頁面間距指的是兩個h5頁面之間在z軸上所產生的距離，以下圖所示：

在製做一鏡到底時，最重要的目的就是營造空間感，而一鏡到底中的空間感，徹底由頁面間距進行控制。所以，正確的控制頁面間距，是製做一鏡到底作重要的一步。

製做步驟：

註釋：

layer:表示多個畫面，也就是html頁面。

素材：用到的圖片。

幀畫面觸發設置

案例分析：

長頁圖：表達方式就是簡單的上下左右滑動，在整個過程當中將其餘元素融入滑動，能讓做品更加立體，擺脫只有文字的枯燥。視差動畫與一鏡到底的結合，讓故事的傳達更加直接明瞭，不管是視覺效果仍是趣味性，都很是出彩，故事內容豐滿，邏輯清晰，可讀性強。

如案例1：逃不掉的四字魔咒

場景是由canvas繪製整個場景的，動畫元素是由換圖的方式造成動態效果。再根據滑動距離的座標繪製出不一樣的圖畫。滑動時的緩衝效果，讓案例頗有線條感，給了用戶很好的交互體驗。動畫使用js作了硬件加速，隨着「主角」頭髮慢慢變白、脫下，步入老年，畫面也到達結尾頁。

案例2：節氣奇妙物語

這款由「in」推出的H5案例，手繪的畫面，與清新的畫風。長按屏幕，體驗到一鏡到底+鏡頭平移的視覺形式，划着小船從春風走到立秋，感覺四季美如畫的風景。將四季的變化都呈如今這裏。進入首屏，提示左滑開始啓程。長按交互和動畫（按鈕是根據觸摸事件，按下按鈕就會移動長圖達到滑動效果），透過一團雲霧到達一片山水，用戶長按按鈕就可讓船伕和小船在山水間穿行。畫面中的部分元素都是CSS3動畫位移造成動態效果，在視覺上表現頗有活力。同時屏幕上顯示出現節氣名及物語。結尾顯示「節氣物語，未完待續...」，點擊「持續故事」來到活動頁，原來是節氣插畫徵集活動，畫出你的喜歡的節氣插畫，爲四季增添一絲美。

場景穿梭-（畫中畫形式感）

案例1：致七夕

從視頻鏡頭一個放映機開始展示一鏡到底內容，將5部經典電影中的經典場景橋段展現。

案例2：一口氣看盡職場套路

採用畫中畫的展示職場中的老套路，串聯起職場上的種種套路。中間夾雜着搞笑和幽默的風格。這款案例也能夠說是長屏切換的h5，動態效果是不斷換圖製做，再以CSS3代碼縮放造成，每段場景中的文字也是由CSS3代碼控制移動，最後背景則是PNG圖片。

多元化交互長鏡頭

案例：爲#潮起潮不落#而來，別說你不期待

隨着一盤磁帶的轉動，來到首屏，畫面上是一個老電視機，點擊電視能夠播放活動視頻。隨着用戶上下滑動屏幕，鏡頭會拉遠或拉近，總體畫面會向前移動，並伴隨動畫效果。整個案例是以一張張的幀圖切換而造成，視覺效果上的鏡頭拉遠或拉近凸顯出一鏡到底的效果。畫面中的磁帶、老電視機、燈籠、霓虹燈等元素均是在一張圖上，到不一樣位置即切換到不一樣的圖片造成動畫效果。各處的細節表現仍是很不錯。