在一般的業(yè)務(wù)網(wǎng)站建設(shè)開(kāi)發(fā)環(huán)境下,所有的動(dòng)效是否全部由程序?qū)崿F(xiàn),這是需要按照不同的情況設(shè)計(jì)實(shí)現(xiàn)手段進(jìn)行判斷的,一個(gè)很小的特殊效果讓前端日以繼夜地堆代碼是一種性?xún)r(jià)比極低的方法。很多情況下,對(duì)于不需要太多交互操作的動(dòng)態(tài)效果,實(shí)際上是前端提供一個(gè)畫(huà)布區(qū)域設(shè)計(jì)師通過(guò)逐幀動(dòng)畫(huà)的設(shè)計(jì)其實(shí)現(xiàn)效果,會(huì)更有效地提升產(chǎn)品開(kāi)發(fā)效率。這里給大家提供三個(gè)性?xún)r(jià)比相當(dāng)高的方法:
(1)GIF動(dòng)畫(huà)
大家對(duì)GF圖片應(yīng)用并不陌生,今天主要跟大家普及GIF的壓縮技巧。我們?cè)谧鲇脩?hù)走訪的時(shí)候發(fā)現(xiàn),很多B類(lèi)用戶(hù)辦公條件都不具備高速的帶寬,所以我們必須考慮到GIF的體量。拿我們?cè)诟赣H節(jié)做的一個(gè)情感化的小動(dòng)效來(lái)說(shuō),在PS無(wú)壓縮的情況下是67k,我們可以通過(guò)對(duì)幀速率進(jìn)行壓縮,每?jī)蓭闇p一幀,為保持循環(huán)周期不變,新的每幀持續(xù)時(shí)間需要設(shè)置成原來(lái)的兩倍,這樣壓縮之后體量就會(huì)減少為原來(lái)的1/2,但是效果比起來(lái),有一點(diǎn)點(diǎn)卡頓的感覺(jué),效果沒(méi)有原來(lái)的流暢了。 這里給大家推薦另外一種網(wǎng)站建設(shè)方法,扁平化的動(dòng)效設(shè)計(jì)可以對(duì)顏色和損耗做適當(dāng)?shù)膲嚎s,并且刪掉循環(huán)中重復(fù)或者是非常相近的幀,注意刪掉某一幀之后,要把它替代裝的時(shí)間補(bǔ)全,保證循環(huán)周期不變,這樣也可以有效地壓縮GF體量,但是需要注意一點(diǎn)的是顏色壓縮只活用于無(wú)漸變的動(dòng)效。GIF的應(yīng)用范圍比較小,由于它比較難以控制播放,所以基本上都是用在像LOGO區(qū)這樣不需要太多操作的區(qū)域。 (2)webM視頻 壓縮方式對(duì)比webM是一個(gè)視頻格式,并且是一個(gè)可以控制播放的容器,它的體量是GI的1/3,兼容響應(yīng)式的設(shè)計(jì),優(yōu)點(diǎn)是減少網(wǎng)站建設(shè)設(shè)計(jì)成本,全面兼容瀏覽器,硬件要求低嘗試在B類(lèi)營(yíng)銷(xiāo)場(chǎng)景中插入動(dòng)態(tài)背景視頻,原視頻367MB壓縮為GIF的6.9MB,轉(zhuǎn)換為webM的1.8MB,體量完全符合用戶(hù)要求,并且圖像的損失也在可控范圍內(nèi);在產(chǎn)品區(qū)域的應(yīng)用,由于可控播放的優(yōu)點(diǎn),未來(lái)我們的產(chǎn)品完全可以360度地展現(xiàn)。 (3)PNG序列 最后來(lái)看一下PNG序列,對(duì)于游戲類(lèi)可以進(jìn)行預(yù)加載的網(wǎng)頁(yè)應(yīng)用,在開(kāi)發(fā)時(shí)間較短的,可以使用PNG序列來(lái)展現(xiàn)應(yīng)用想要呈現(xiàn)的效果,通過(guò)時(shí)間點(diǎn)和動(dòng)效周期的精,可以讓用戶(hù)有非常流暢的交互體驗(yàn)。比如,我們?cè)谌瓝趔w感游戲“啪啪快打”項(xiàng)目中嘗試用PNG序列來(lái)實(shí)現(xiàn)一個(gè)體感游戲,用戶(hù)可以通過(guò)手機(jī)連接電腦,通過(guò)手勢(shì)控制來(lái)進(jìn)行打斗的操作。具體的動(dòng)效設(shè)計(jì)用雪碧圖來(lái)實(shí)現(xiàn)。 這些都是我們web端無(wú)法比擬的,我們?cè)谧鼍W(wǎng)站建設(shè)網(wǎng)頁(yè)動(dòng)效設(shè)計(jì)的時(shí)候必須考慮帶寬,主流兩個(gè)操作系統(tǒng)使用的最小時(shí)間單位都是毫秒,所以我們的楨間隔單位按照毫秒取整。廣州天河區(qū)珠江新城富力盈力大廈北塔2706
020-38013166(網(wǎng)站咨詢(xún)專(zhuān)線)
400-001-5281 (售后服務(wù)熱線)
深圳市坂田十二橡樹(shù)莊園F1-7棟
Site/ http://www.szciya.com
E-mail/ itciya@vip.163.com
品牌服務(wù)專(zhuān)線:400-001-5281
長(zhǎng)沙市天心區(qū)芙蓉中路三段398號(hào)新時(shí)空大廈5樓
聯(lián)系電話(huà)/ (+86 0731)88282200
品牌服務(wù)專(zhuān)線/ 400-966-8830
旗下運(yùn)營(yíng)網(wǎng)站:
Copyright ? 2016 廣州思洋文化傳播有限公司,保留所有權(quán)利。 粵ICP備09033321號(hào)