網(wǎng)頁設(shè)計中關(guān)于web動效設(shè)計
2022-11-01 分類： 網(wǎng)站建設(shè)
在一般的業(yè)務(wù)開發(fā)環(huán)境下,所有的動效是否全部由程序?qū)崿F(xiàn),這是需要按照不同的情況設(shè)計實現(xiàn)手段進行判斷的,一個很小的特殊效果讓前端日以繼夜地堆代碼是一種性價比極低的方法。很多情況下,對于不需要太多交互操作的動態(tài)效果,實際上是前端提供一個畫布區(qū)域設(shè)計師通過逐幀動畫的設(shè)計其實現(xiàn)效果,會更有效地提升產(chǎn)品開發(fā)效率。這里給大家提供三個性價比相當(dāng)高的方法：
(1)GIF動畫
大家對GF圖片應(yīng)用并不陌生,今天主要跟大家普及GIF的壓縮技巧。我們在做用戶走訪的時候發(fā)現(xiàn),很多B類用戶辦公條件都不具備高速的帶寬,所以我們必須考慮到GIF的體量。拿我們在父親節(jié)做的一個情感化的小動效來說,在PS無壓縮的情況下是67k,我們可以通過對幀速率進行壓縮,每兩幀抽減一幀,為保持循環(huán)周期不變,新的每幀持續(xù)時間需要設(shè)置成原來的兩倍,這樣壓縮之后體量就會減少為原來的1/2,但是效果比起來,有一點點卡頓的感覺,效果沒有原來的流暢了。
這里給大家推薦另外一種方法,扁平化的動效設(shè)計可以對顏色和損耗做適當(dāng)?shù)膲嚎s,并且刪掉循環(huán)中重復(fù)或者是非常相近的幀,注意刪掉某一幀之后,要把它替代裝的時間補全,保證循環(huán)周期不變,這樣也可以有效地壓縮GF體量,但是需要注意一點的是顏色壓縮只活用于無漸變的動效。GIF的應(yīng)用范圍比較小,由于它比較難以控制播放,所以基本上都是用在像LOGO區(qū)這樣不需要太多操作的區(qū)域。
(2)webM視頻
壓縮方式對比webM是一個視頻格式,并且是一個可以控制播放的容器,它的體量是GI的1/3,兼容響應(yīng)式的設(shè)計,優(yōu)點是減少設(shè)計成本,全面兼容瀏覽器,硬件要求低嘗試在B類營銷場景中插入動態(tài)背景視頻,原視頻367MB壓縮為GIF的6.9MB,轉(zhuǎn)換為webM的1.8MB,體量完全符合用戶要求,并且圖像的損失也在可控范圍內(nèi);在產(chǎn)品區(qū)域的應(yīng)用,由于可控播放的優(yōu)點,未來我們的產(chǎn)品完全可以360度地展現(xiàn)。
(3)PNG序列
最后來看一下PNG序列,對于游戲類可以進行預(yù)加載的網(wǎng)頁應(yīng)用,在開發(fā)時間較短的,可以使用PNG序列來展現(xiàn)應(yīng)用想要呈現(xiàn)的效果,通過時間點和動效周期的精,可以讓用戶有非常流暢的交互體驗。比如,我們在拳擊體感游戲“啪啪快打”項目中嘗試用PNG序列來實現(xiàn)一個體感游戲,用戶可以通過手機連接電腦,通過手勢控制來進行打斗的操作。具體的動效設(shè)計用雪碧圖來實現(xiàn)。
這些都是我們web端無法比擬的，我們在做網(wǎng)頁動效設(shè)計的時候必須考慮帶寬，主流兩個操作系統(tǒng)使用的最小時間單位都是毫秒，所以我們的楨間隔單位按照毫秒取整。
分享名稱：網(wǎng)頁設(shè)計中關(guān)于web動效設(shè)計
分享鏈接：http://www.rwnh.cn/news23/209923.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、微信公眾號、網(wǎng)站改版、云服務(wù)器、靜態(tài)網(wǎng)站、App開發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 微信場景營銷管理平臺 2022-11-01
- 互聯(lián)網(wǎng)轉(zhuǎn)型可以帶給公司哪些思考 2022-11-01
- 網(wǎng)站建設(shè)的真正價值你都挖掘到了嗎？ 2022-11-01
- 網(wǎng)站上線前如何規(guī)劃內(nèi)容 2022-11-01
- 網(wǎng)站建設(shè)目前的發(fā)展趨勢 2022-11-01
- 一文帶你了解電商的10種模式（二） 2022-11-01
- 如何提升網(wǎng)站的權(quán)重 2022-11-01
- 5個范例告訴你：什么是自適應(yīng)網(wǎng)頁設(shè)計 2022-11-01
- B2C電子商務(wù)網(wǎng)絡(luò)營銷解決方案 2022-11-01
- 怎樣對一個網(wǎng)站進行準(zhǔn)確的定位 2022-11-01
- 網(wǎng)站如何制作才能吸人眼球 2022-11-01
- 怎樣的營銷型網(wǎng)站建設(shè)可以吸引用戶點擊和咨詢？ 2022-11-01
- APP怎么推廣更有效,APP推廣方法 2022-11-01
- 做好建站準(zhǔn)備工作讓網(wǎng)站發(fā)揮出超能營銷力 2022-11-01
- 熊掌號對網(wǎng)站SEO有什么好處？ 2022-11-01
- 小程序是如何拉新、留存用戶和提高復(fù)購率的？ 2022-11-01
- 電商網(wǎng)站SEO優(yōu)化的實用技巧有幾方面？ 2022-11-01
- 微信暗度陳倉，小程序攻下北大清華等30所高校 2022-11-01
- 企業(yè)做推廣需要考慮SEO優(yōu)化技巧嗎？SEO優(yōu)化方法有哪些？ 2022-11-01