前兩天設計一款主頁，想給它加上一些操作演示，于是便自己琢磨如何實現。先上效果圖：

首先，是界面設計的部分：

需求是針對現有的網站做移動端的展示。針對門戶網站的性質，以及對象的行業特性，將首頁直接體現的提煉為“解決方案”、“服務”、“客戶&案例”三個模塊。這樣排版更加能從自身業務出發，使網站瀏覽者能夠快速尋找到自身想要的答案。

另外，在首頁將“需求發布”的模塊保留，變為快捷入口，通過右滑進行操作(類似瀏覽器返回操作)，快速進入。留給了客戶一個可以直接交流的窗口。

現存問題：作為一個宣傳型網站，制作時沒有體現聯系方式等重要信息…

配色選用紫色，活潑而又豐富，更加吸睛。Banner摒棄了切換效果，而是做成了動態圖的處理，目的是在同質化嚴重的類型網站中做出自己的特點。案例用客戶的logo作為列表，項目做彈窗展示。還有一些其他的導航彈窗需求提交的滑動頁之類的首頁其他模塊也一并弄好

接下來就是動態效果的實現。

要做動效演示，一定先要在心里有一個想法，想要實現一個什么樣的效果在自己的心里要有一個大概的雛形。如果覺得還不是很清晰可以多看一些案例的演示，分析它們的運動規律，我也是之前看到了很多類似的案例才有了做這樣演示的想法。

有了初步的想法之后，就要去找實現的辦法。網上搜羅了很多方法和工具，成本較小的兩種還是靠PS和AE來實現動圖的制作。

對于我來說的話，ae接觸并不是很多，但是感覺簡單入門的話并不是很難，制作一些簡易的動圖應該倒也不成問題。但是生成gif圖的時候AE導出的文件一般都很大(很可能是我的設置有問題)，還得用ps去重新壓縮一下，這是我在使用時遇到的問題。

而用ps做gif圖的制作需要用到時間軸工具，需要注意的兩點：1.要選擇新建視頻時間軸而不是幀動畫；2.不同的圖層對象類型對應的關鍵幀變換也不相同，制作時要想好這一圖層要進行怎樣的變化，再去做對應圖層類型的圖層。

分開做了一些局部的動畫

然后整個頁面的操作，沒有太獨特的地方。于是就想有沒有合適的原型工具可以直接滿足我的需求，于是我找到了一款簡單的在線原型制作軟件。只要可以實現基本的頁面操作動畫在我看來就可以了。

工具使用中有兩個問題：1.只能操作演示或手機分享，無法導出動圖。2.插入gif不可動畫化，不然圖片會變形…

emmm~然后……我找了一個GIF屏幕錄制軟件，將交互操作時的窗口錄制成gif

把每個gif處理一下(大小，多余部分裁剪)，然后就是多個gif的拼接。直接拼用ps操作起來不是很方便。還是用錄屏軟件，將單個gif順序排好，一張張錄制，完成后將多余貞刪除，感覺這樣比直接拼接gif更加簡單，然后導出就是最后成品啦！

【最終效果】

路子比較野，都是自己摸索的來，做的不好還請見諒。

歡迎大神蒞臨指導，各位多多指教，拜謝。

以上為“H5案例分享”團隊轉載文章，版權歸原作者所有。

總結

以上是生活随笔為你收集整理的站酷用HTML5播放视频,站酷：动效展示实践的问题及解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。