站酷用HTML5播放视频,站酷:动效展示实践的问题及解决
前兩天設(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: kafka consumer配置拉取速度
- 下一篇: 如何打造园本特色_立足城市特色 打造赛事