手淘互動動效的探索

時間 2019-11-21

標籤互動探索简体版

原文原文鏈接

內容來源：2017年6月18日，手淘前端技術專家大漠在「2017 iWeb峯會·第六屆HTML5峯會」進行《手淘互動動效的探索》演講分享。IT大咖說做爲獨家視頻合做方，經主辦方和講者審閱受權發佈。html
閱讀字數：3089 | 6分鐘閱讀

摘要

如今的營銷活動，用一張簡單的圖片去吸引消費者已經遠遠不夠，必需要有能給消費者帶來視覺衝擊的東西，或者在動畫過程當中提供更好的引導部分。手淘的前端團隊經歷了從Gif、視頻到CSS Animation的從0-1的過程，並致力於研究的數據化驅動的動效。大漠將爲咱們帶來在手淘互動動效上的探索分享。前端

嘉賓演講視頻地址： t.cn/RCWCDu5

「互動，是鏈接用戶的橋樑」

咱們之前訪問Web頁面是沒有動畫和動效的，甚至點擊跳轉的功能都不多。那時是純粹的文字展現，圖片在網站上也不多能看見。編程

最初點擊一個連接跳到一個新的頁面，這是一種交互。隨着技術的變革，點擊一個按鈕會彈出一個窗口，這也是我之前認識的一種交互。如今咱們的交互行爲變得更加複雜。json

用戶無需進行任何操做，頁面只是告訴用戶去點擊某個按鈕能夠進入一個頁面或一個會場。這種交互行爲在內部咱們稱之爲引流。瀏覽器

還有一種是純氛圍的動畫交互效果。
櫥窗是加上一些動效或陀螺儀的功能，讓用戶以爲耳目一新。
抽獎是加入了一些用戶的交互行爲，點擊紅包就會告訴用戶中了多少錢或者運氣很差沒有中獎。
視頻如今也是一種傳替交互的表現形式，若是加上一些其它的技術手段上去，能表現出來的就不止是咱們看到的視頻那樣。
咱們目前嘗試在手淘互動里加一些簡單的遊戲，這些遊戲就是利用前端的代碼加一些創意，把用戶吸引到互動的活動裏來，讓用戶在這裏駐留的時間更久。或者經過這些小遊戲給用戶帶來必定的收益。
提醒是一個時間倒計時，告訴用戶還有多少時間去參加「雙十一」搶紅包的活動。

交互在咱們團隊就是以上這些表現形式。網絡

最先咱們只能看到PC端的Web頁面，隨着移動端的快速發展，移動端的互動方式也會愈來愈豐富。架構

「動畫，用於點綴」

最先實現動畫的技術方案是Gif、視頻，還有早期PC端看到的Flash頁面，這些方案都是前端不用參與的。運維

可是Gif圖放到移動端，會產生一些很差的後果。以及iOS不支持Flash，視頻也有一些存在的風險。編程語言

在CSS3出現之後，你們作簡單動畫的時候會常常用到。還有一些SVG和Canvas動畫。但其實這些都還不能知足咱們各類業務場景。工具

咱們今天的重點會放在JS-Driven Animation動畫。

0-1的過程

2015年，咱們團隊經歷了一個0-1的過程。在15年以前，各類大觸看到的氛圍和動效基本上是Gif圖或是視頻。15年年貨節，咱們嘗試了第一次的改變，經過前端CSS或JS的技術手段，把一個Gif圖轉換成動畫效果。完成這個效果的時候，不管是需求方仍是產品都很滿意，由於這種方案能夠隨時更改動畫中的元素。

CSS動畫的痛點

溝通成本高。
開發成本高：由於要經過CSS去繁衍一個視頻或Gif圖演示的動效，除了要懂這方面的技術以外，還要讓Gif圖經過代碼層面來實現。
還原度低：CSS實現動畫的手段是有限的，要作一些複雜的動畫仍是有難度。
可控制性低：若是需求方改變了其中某一個動畫需求，咱們至少要花2-3天來繁衍那部分的效果。
可交互性弱：CSS動畫沒法實如今播到某個時間段忽然彈出窗口告知用戶能夠參加的活動。
日漸沒法知足業務場景：在0-1的過程當中，需求方可能仍是比較滿意的，可是若是每次的動畫效果都是用這種方案來實現，需求方會以爲很無聊，作出來也沒法達到100%的還原度。

JS-Driven Animation

通過市場調研綜合結果以後，咱們最終仍是選擇本身「造輪子」。由於咱們但願能夠是本身控制的，不用擔憂被別人起訴，也不擔憂新功能沒法在它的基礎上進行擴展。

後來咱們通過一年的時間作了一個用JS驅動動畫的工具Animation Flow Tool。

動畫管理

我我的喜歡把動畫的管理看成是導演一場舞臺劇，要指揮每一個演員什麼時候出場，出來作什麼，什麼時候退場。在咱們的動畫管理中有一個timeline，它很像導演的角色。

經過時間軸能夠很好地控制動畫的場景，包括它什麼時候播放、什麼時候中止、什麼時候退出。

CSS處理動畫銜接的短板

CSS是經過持續時間來實現控制，若是全部時間點都已經肯定了，這樣作是沒有問題的。

好比動畫「火山升起」的時候發來1秒的時間，第二個動畫「火焰柱噴發」是在「火山升起」結束後開始播放。這時就可知它的延遲時間是1秒，「岩漿流動」同時播放也是1秒。到了「紅包噴發」的時候就須要進行計算，前面的動畫播放4秒後再播放「紅包噴發」，它的延遲是1.4秒。若是這時「火山升起」的持續時間有所變更，那麼後續的全部時間都要從新進行計算。這是CSS管理動畫最大的缺點之一。