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

首先，是界面設(shè)計的部分：

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

另外，在首頁將“需求發(fā)布”的模塊保留，變?yōu)榭旖萑肟?#xff0c;通過右滑進(jìn)行操作(類似瀏覽器返回操作)，快速進(jìn)入。留給了客戶一個可以直接交流的窗口。

現(xiàn)存問題：作為一個宣傳型網(wǎng)站，制作時沒有體現(xiàn)聯(lián)系方式等重要信息…

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

接下來就是動態(tài)效果的實(shí)現(xiàn)。

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

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

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

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

分開做了一些局部的動畫

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

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

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

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

【最終效果】

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

歡迎大神蒞臨指導(dǎo)，各位多多指教，拜謝。

以上為“H5案例分享”團(tuán)隊(duì)轉(zhuǎn)載文章，版權(quán)歸原作者所有。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。