網頁設計中關于web動效設計

2022-11-01    分類: 網站建設

網站建設- 建站教程 - 網頁設計 - 網頁設計中關于web動效設計

在一般的業務開發環境下,所有的動效是否全部由程序實現,這是需要按照不同的情況設計實現手段進行判斷的,一個很小的特殊效果讓前端日以繼夜地堆代碼是一種性價比極低的方法。很多情況下,對于不需要太多交互操作的動態效果,實際上是前端提供一個畫布區域設計師通過逐幀動畫的設計其實現效果,會更有效地提升產品開發效率。這里給大家提供三個性價比相當高的方法:


成都網站建設

(1)GIF動畫


大家對GF圖片應用并不陌生,今天主要跟大家普及GIF的壓縮技巧。我們在做用戶走訪的時候發現,很多B類用戶辦公條件都不具備高速的帶寬,所以我們必須考慮到GIF的體量。拿我們在父親節做的一個情感化的小動效來說,在PS無壓縮的情況下是67k,我們可以通過對幀速率進行壓縮,每兩幀抽減一幀,為保持循環周期不變,新的每幀持續時間需要設置成原來的兩倍,這樣壓縮之后體量就會減少為原來的1/2,但是效果比起來,有一點點卡頓的感覺,效果沒有原來的流暢了。

這里給大家推薦另外一種方法,扁平化的動效設計可以對顏色和損耗做適當的壓縮,并且刪掉循環中重復或者是非常相近的幀,注意刪掉某一幀之后,要把它替代裝的時間補全,保證循環周期不變,這樣也可以有效地壓縮GF體量,但是需要注意一點的是顏色壓縮只活用于無漸變的動效。GIF的應用范圍比較小,由于它比較難以控制播放,所以基本上都是用在像LOGO區這樣不需要太多操作的區域。

(2)webM視頻

壓縮方式對比webM是一個視頻格式,并且是一個可以控制播放的容器,它的體量是GI的1/3,兼容響應式的設計,優點是減少設計成本,全面兼容瀏覽器,硬件要求低嘗試在B類營銷場景中插入動態背景視頻,原視頻367MB壓縮為GIF的6.9MB,轉換為webM的1.8MB,體量完全符合用戶要求,并且圖像的損失也在可控范圍內;在產品區域的應用,由于可控播放的優點,未來我們的產品完全可以360度地展現。

(3)PNG序列

最后來看一下PNG序列,對于游戲類可以進行預加載的網頁應用,在開發時間較短的,可以使用PNG序列來展現應用想要呈現的效果,通過時間點和動效周期的精,可以讓用戶有非常流暢的交互體驗。比如,我們在拳擊體感游戲“啪啪快打”項目中嘗試用PNG序列來實現一個體感游戲,用戶可以通過手機連接電腦,通過手勢控制來進行打斗的操作。具體的動效設計用雪碧圖來實現。

這些都是我們web端無法比擬的,我們在做網頁動效設計的時候必須考慮帶寬,主流兩個操作系統使用的最小時間單位都是毫秒,所以我們的楨間隔單位按照毫秒取整。

文章標題:網頁設計中關于web動效設計
網站URL:http://www.kartarina.com/news/209923.html

成都網站建設公司_創新互聯,為您提供關鍵詞優化微信公眾號建站公司企業網站制作做網站ChatGPT

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

手機網站建設
主站蜘蛛池模板: 在人线av无码免费高潮喷水| 亚洲AV无码成人精品区蜜桃| 亚洲av无码精品网站| 国产成人无码一区二区在线观看| 无码国产色欲XXXX视频| 中文无码日韩欧免费视频| 国产成人无码区免费A∨视频网站 国产成人无码午夜视频在线观看 国产成人无码精品一区不卡 | 久久午夜无码鲁丝片| 中文字幕乱妇无码AV在线| 无码福利写真片视频在线播放| 无码精品A∨在线观看中文| 久久无码av亚洲精品色午夜| 熟妇人妻无码中文字幕老熟妇 | 亚洲国产成人精品无码区二本| 四虎影视无码永久免费| 无码不卡亚洲成?人片| 无码熟妇人妻AV影音先锋| 亚洲熟妇无码久久精品| 91久久精品无码一区二区毛片| 国产在线无码制服丝袜无码| 亚洲av无码片在线观看| 夜夜添无码一区二区三区| 久久久精品无码专区不卡 | 欧洲Av无码放荡人妇网站| 精品亚洲成α人无码成α在线观看| 精品久久无码中文字幕| 久久久久亚洲AV无码永不| 国产成人精品无码片区在线观看 | 久久精品无码一区二区app| 国产精品无码一区二区三区不卡| 国产精品免费看久久久无码| 久久久g0g0午夜无码精品| 亚洲人av高清无码| 亚洲av无码av在线播放| 亚洲精品9999久久久久无码| 亚洲中文字幕无码一去台湾| 中文字幕亚洲精品无码| 久久久无码精品人妻一区| 国产怡春院无码一区二区| 免费无码国产V片在线观看| 亚洲精品无码日韩国产不卡?V|