深度揭秘上百種H5動效

以數位在職的資深H5設計師的動效使用情況為參考，整理出以下揭秘資源。

恐怕很多接觸過H5制作的童鞋都會納悶

N種動效擺在自己面前

用起來時卻十分別扭

畫面被自己搞得雞飛狗跳似的

那么，H5動效的選取有跡可循嗎？

有！

我根據目前廣大H5設計師的動效使用情況

總結了一份H5動效使用手冊，希望你能從中受益并擬出自己的套路。

動效對H5的作用體現在兩個方面：

• 功能性。引導用戶點擊和翻頁，吸引用戶做長時間的視覺停留。
• 趣味性。加強用戶體驗的舒適度，提高愉悅感。

它的制作手法有很多，比如《H5動效的常見制作手法》曾經歸納如下：

根據上表，不同動畫需要運用多種制作手法，可能需要掌握一定的編程技術。但就目前國內的H5制作平臺而言，多數預設有一定的動效，我們可以直接選取使用。如果想做出類比GIF、Video等交互動效，或者類比PPT式的平面動效，可以試用iH5.cn預設的動效組件，效果還甚至優于Flash。

動效是元素的位移、大小、角度和透明度等隨時間的變化。

一、基礎動效

1.翻頁動效

使用方法：在舞臺設置好滑動頁面方式后，點擊頁面，選擇向前/后翻頁的效果。

淡入淡出、平移、平移漸變、覆蓋視差、放大縮小、翻轉、自上翻入、掉落、旋轉出現（離開）、翻書、方塊旋轉、弧線、交替翻頁、碰撞翻頁。

2.元素動效

在每個素材下添加動效，通過調整動效的屬性設置各種各樣的出場動效。

對基礎動效進行有機組合，可以搭配出N種可觀的動效展示形式。特此，我翻出了今年畢業季時一名大四女童鞋做的H5：

這種效果類似“刷墻”動效，實質上只是用白色的底圖遮蓋圖片，然后加上iH5預設的“向上/向下飛去”動效。一般為了畫面的和諧，一個H5頁面中最多使用3種動效，不同素材搭配不同動效。

• 整體背景素材：一般用最簡單的動效展示素材，不然會給用戶遲鈍的感覺。

如：進入離開、淡入淡出、展開、左右搖擺等；

• 背景里部分素材：增加背景的趣味性，可以是一朵旋轉的小花，或者是漂浮的云朵。

如：旋轉、閃爍、彈跳、心跳、鐘擺等；

• 重點強調素材：運用夸張的動效來達到吸引眼球的效果。

如：縮放、掉落、晃動、彈彈球、翻轉、滾動、出現消失等；

二、時間軸動效

▲效果圖摘取自UI中國_Vision

時間軸動效的原理和原生的動效組件類似，都是通過改變元素的 位置、大小、透明度 等促成動效效果。

因為時間軸存在單位時間，因此可把玩法大致分為兩種： 單位時間內控制單一屬性、控制多個屬性 。演示工具iH5.cn，不完全舉例如下——

1.單位時間內控制單一屬性：

素材位移一定距離的軌跡， 時間間隔越短，運動速度越快 。把時間節點控制得盡量短，元素進出的動效效果會越明顯。

不同素材間存在上下層關系，如果屬性（X/Y坐標、寬高）一致， 上層素材會默認遮蓋下層素材 。所以我們只要通過時間軸控制上層素材的坐標、大小、角度，直至覆蓋下層素材，即可完成素材間的遮罩效果。

現在設計師還習慣耍一個小心機，先把一個遮罩用的素材中間挖空，做成PNG，然后再覆蓋于被遮罩的圖片上層。當我們在時間軸的0秒處控制該遮罩素材的寬高變大時，此時畫面就不存在遮罩效果（因為遮罩圖片為中間鏤空的PNG，寬高被放大后，自然中間鏤空的部分就變大直至退出畫面范圍），然后在時間軸1秒處把遮蓋的素材收縮回來，形成遮罩。

可實現的遮罩效果還有很多，比如：

• 漸進閉合遮罩
• 漸變式遮罩
• 彈窗顯示

可以根據實際需要實現。有趣的是，它還支持素材的X/Y軸旋轉，借此機制搭配時間軸可以做出偽3D的循環以及折疊效果。

以X軸旋轉舉例，只需在時間軸下設置兩個時間節點，控制素材 繞X軸做0°至90°旋轉 ，就能做出素材 “翻倒”、“雙向折疊”的偽3D效果。

需要注意的是，左右折疊的兩張圖需相切，保證X坐標一致，這樣才不會讓觀者察覺到貓膩！（畢竟這背后只是兩張圖的翻轉）

2.單位時間內控制多個屬性：

這種類型對時間軸的掌握要求很高，因為在某一時間節點上，可能你需要 同時控制大小、坐標、透明度、旋轉角度等多個屬性 。而且這不局限在單一素材上，可能是幾個素材的結合。

比如 橡皮糖式滑動效果 ，需要同時在時間節點上設置素材的 高度&Y坐標變化 。

操作上不難，訣竅在于需要在 滑動時間軸 屬性欄下設置 【自動跳轉控制點】 功能。

當用戶進行滑動動作時，時間軸會自動播放到 下一時間節點 ，常用于制作 響應式的動效。

實際制作中對時間軸的應用可能會更加錯綜復雜，推薦觀摩在iH5.cn上發布的《你知道另一個世界，還有一個你嗎？》，這是設計師小牙制作的時間軸動畫H5， 里面涉及的動效全都用時間軸制作 。

里面每一個頁面動效都是匠心級的，涵括的時間軸動效拆分如下：

• 控制旋轉角度——Loading頁和主頁的翻轉
• 控制透明度&坐標——小人撿垃圾動效
• 控制剪切——過渡頁后的文字漸進

（1）控制旋轉角度

在時間軸上設置的兩個關鍵幀，分別對應旋轉角度為 0°和360° ，即能實現圍繞中心點的中心旋轉效果（從0°轉至360°），但這跟上述提到的圍繞X/Y軸旋轉有所不同，需要區分。

（2）控制透明度&坐標

這個部分涉及到人物的部分肢體動作，各動作分解如下：

• 走路動作

把人物素材拆分出來會發現，其實是一個受時間軸控制的腳部循環運動。

• 走路停下效果

需要在時間軸下設置事件，當時間軸播放達到擬定的數值時，時間軸暫停。

• 伸手撿垃圾&丟垃圾

控制手部素材的坐標和寬度，就能做出人物伸手動作。同理，丟垃圾的動作為控制垃圾的坐標和透明度。

（3）控制剪切

剪切是什么？

素材1開啟剪切功能，素材2超出素材1的部分就會被隱藏。因此我們只要控制開啟剪切功能的素材1坐標，素材2就會呈現漸進效果。

利用這個原理，還可以做出iPhone7發布會的快閃效果：

三、對象的線性遷移

元素位移變化除了時間軸，還能用緩動和運動這兩個組件來實現，如果不需要太精準的運動變化，使用這兩種動效會比時間軸流暢得多。

在iH5里，運動可以做勻速運動或勻加速運動（加速度不變），但緩動可以 控制兩點間的運動，改變物體的加速度，進行加減速變換。

對比一下勻速直線運動的曲線與緩動加速運動的曲線，可以看出緩動的加速度是在變化的。

具備物體加速度的線性運動，如果單純用時間軸做，恐怕你需要時一名物理學霸才行。不過也不是沒轍，iH5.cn的運動和緩動組件就是處理線性運動的，直接在運動素材下添加運動或緩動組件，通過調整屬性設置不同的效果。

1.運動動效——簡單的物理運動

下雨下雪、流星掉落、子彈射出、扔飛鏢，或者是小游戲里面的接金幣等等

2. 緩動動效

緩動組件的門道就多了，涉及各種復雜的緩動函數，不同曲線的區別主要是 運動上加速度的變化 （忘了中學數學的童鞋，快去百度補補課！）：

（1）easeIn緩進（先慢后快）——在場景切換上用得比較少，主要用在元素的運動上，比如重物的掉落（可使用二次進，控制加速度不變）、磁鐵的吸引（可使用三、四、五次進，加速度會逐漸變大）上。

（2）easeOut緩出（先快后緩）——在場景切換上用得比較多，比如界面的展開、收起、出現、移動等，觸發它的對象與它作用的對象往往是同一個。設計時，減速和加速動效往往是成對出現的，比如元素飛入時減速，飛出時加速。

（3）easeInOut緩進緩出（頭尾緩、中間快）——通常在輪轉切換的動畫中使用，觸發它的對象與作用的對象往往不是同一元素。比如iOS天氣App的城市切換，點擊天氣導航，就會觸發相關天氣的場景。

（4）反彈進/反彈出——用于表現物體或者環境的物理質地，制造彈力效果，比如iOS的鎖屏界面展開時稍微反彈，能讓虛擬的鎖屏變得真實、活潑。

在設計H5時，除了翻頁效果，還能夠加入上述所講的各種各樣的動效，不僅提高用戶體驗，也大大增加了趣味性。

然而，如果為了追求動效的酷炫，一味疊加太多動效也是不可取的。因為太多的動效會導致耗時太長，進入太慢，減緩了用戶體驗流程。

適度的、和諧的動效才能讓你的H5大放異彩！

以上，即為全方位的H5動效使用解析，希望對你有幫助啦！

如今年尾將近，在這里趙四感謝大家今年來對我的支持！預祝大家雞年新年快樂！萬事如意！！

（現在就拜年是不是有點早啊喂！）

好啦，咱們下期再見~拜

參考資料：

《H5動效的常見制作手法》： https://isux.tencent.com/h5active.html#comment-form

《緩動函數速查表》： http://easings.net/zh-cn

《動效設計基礎（一）：運動曲線與緩動》： http://ued.qq.com/2015/07/28/dynamicefficiencydesign1/

 

來自：http://www.ui.cn/detail/193639.html