動(dòng)畫、交互和產(chǎn)品體驗(yàn)
動(dòng)畫能夠給平淡的交互增彩不少钥庇,利用好動(dòng)畫缰贝,能夠設(shè)計(jì)出很棒的交互寝凌,增強(qiáng)產(chǎn)品體驗(yàn)。我們常常會(huì)為一些炫酷的效果而驚嘆顽悼,這也是前端當(dāng)時(shí)吸引我的地方曼振。前端的復(fù)雜度除了狀態(tài)的管理、組件的拆分和代碼復(fù)用之外蔚龙,交互和體驗(yàn)也是一個(gè)很重要的方向冰评,但這卻被很多前端所忽視,國(guó)內(nèi)的產(chǎn)品交互大多也比較平淡無奇木羹,可能是考慮到迭代速度甲雅,可能是實(shí)現(xiàn)成本。而國(guó)外的產(chǎn)品經(jīng)常能看到一些令人眼前一亮的交互動(dòng)畫效果坑填。
說實(shí)話我很少接觸到一些復(fù)雜的交互效果的需求抛人,可能是國(guó)內(nèi)的產(chǎn)品和設(shè)計(jì)都比較保守。最近接觸到一個(gè)較為復(fù)雜的交互效果的需求穷遂,花了一天多的時(shí)間基本實(shí)現(xiàn),過程中收獲很多娱据,讓我對(duì)交互動(dòng)畫有了更深的認(rèn)識(shí)蚪黑。
觸發(fā)式動(dòng)畫和伴隨式動(dòng)畫
動(dòng)畫分為觸發(fā)式動(dòng)畫和伴隨式動(dòng)畫,觸發(fā)式動(dòng)畫是指當(dāng)用戶觸發(fā)之后中剩,動(dòng)畫就從開始一直運(yùn)行到結(jié)束忌穿,不需要再次交互,比如基于css3的@keyframes實(shí)現(xiàn)的各種動(dòng)畫结啼。而伴隨式動(dòng)畫是隨著用戶的交互過程而逐步進(jìn)行掠剑,用戶可以控制動(dòng)畫的過程,比如滾動(dòng)視差動(dòng)畫郊愧。伴隨式動(dòng)畫因?yàn)橛脩艨梢钥刂苿?dòng)畫的過程朴译,交互性和體驗(yàn)更強(qiáng),當(dāng)然難度也會(huì)更大一些属铁。
復(fù)雜伴隨式動(dòng)畫的分析
復(fù)雜的動(dòng)畫都是有很多變化的眠寿,到了某個(gè)值或者百分之多少換成另一種效果。就像滾動(dòng)視差動(dòng)畫焦蘑,滾動(dòng)的不同方向盯拱,滾動(dòng)的不同位置會(huì)有不同的動(dòng)畫效果。
從設(shè)計(jì)圖開始,通過樣式和模版組合各種資源形成靜態(tài)的頁面狡逢,之后的動(dòng)畫和業(yè)務(wù)邏輯都是對(duì)這些模版宁舰、樣式、資源的處理奢浑。動(dòng)畫其實(shí)就是某一些樣式從某個(gè)值變化到某個(gè)值的過程蛮艰,當(dāng)然這里指的是屬性動(dòng)畫。
分析一個(gè)復(fù)雜的伴隨式動(dòng)畫殷费,首先要找出主要變化的是什么屬性印荔,然后這個(gè)屬性變化有哪些階段,每個(gè)階段有哪些屬性值變化详羡,是以怎么樣的規(guī)律變化的仍律。也就是“階段”、“屬性”实柠、“變化規(guī)律”這3個(gè)要點(diǎn)水泉。
伴隨式動(dòng)畫實(shí)例分析
比如這個(gè)動(dòng)畫,階段分為向上和向下兩個(gè)階段窒盐。向上階段變化的屬性是蒙層的透明度和圖片的位置草则,蒙層透明度變化規(guī)律是從0到1勻速變化,圖片位置的變化規(guī)律是scrollTop變化值的一半蟹漓。向下的階段變化的屬性是圖片的高度炕横,變化的規(guī)律是初始高度加scrollTop的絕對(duì)值。
最近做的那個(gè)動(dòng)畫比這個(gè)例子更復(fù)雜一些葡粒,向上的階段又細(xì)分成了2個(gè)小階段份殿,第一個(gè)階段是不變的,到第二個(gè)階段才開始變嗽交。
這里變化的屬性中有圖片的位置和顯示范圍卿嘲,比如向上的過程中圖片位置上移,向下的過程中顯示范圍變大夫壁。這種效果通過圖片標(biāo)簽做起來比較麻煩:位置的改變還可以通過改變圖片標(biāo)簽的位置來實(shí)現(xiàn)拾枣,但是顯示范圍的變化卻需要開始隱藏部分顯示部分,然后交互的時(shí)候通過改變位置來顯示全部盒让,比較麻煩梅肤。如果通過背景圖片來實(shí)現(xiàn)會(huì)簡(jiǎn)單很多:位置的變化直接修改background-position,不需要修改元素位置所以也不會(huì)觸發(fā)reflow邑茄;顯示范圍的變化可以通過修改元素高度凭语,不需要考慮隱藏和位置的變化。
劃分清楚有幾個(gè)大小階段撩扒,每個(gè)階段有哪些屬性值變化似扔,每個(gè)屬性值變化的規(guī)律是什么之后實(shí)現(xiàn)就變得簡(jiǎn)單了吨些。
小程序?qū)崿F(xiàn)伴隨式動(dòng)畫的坑
在h5中實(shí)現(xiàn)了比較滿意的效果,但放到小程序中發(fā)現(xiàn)有很大問題炒辉。因?yàn)樾〕绦蚴前唁秩竞瓦壿嫹謥硖幚淼暮朗瑑烧咝枰惒降膫飨硗ㄐ牛S著滾動(dòng)黔寇,邏輯進(jìn)程計(jì)算出很多新的屬性值偶器,通過setData異步批量的傳給渲染進(jìn)程,在高端機(jī)中幾乎是同步的實(shí)時(shí)地缝裤,但在一些性能較差的手機(jī)中能明顯感覺出這種異步來屏轰,現(xiàn)象是我滾動(dòng)完了一段時(shí)間之后,相關(guān)的元素的位置和其他屬性才開始變化憋飞,慢很多拍霎苗。
小程序這種邏輯和渲染分開然后異步通信的方式是獨(dú)一份,所以這樣的坑我也是第一次遇見榛做,目前在想解決的方式唁盏,估計(jì)要改變交互效果的方案了。
總結(jié)
合理的設(shè)計(jì)一些動(dòng)畫能增強(qiáng)產(chǎn)品的體驗(yàn)检眯。動(dòng)畫可分為觸發(fā)式動(dòng)畫和伴隨式動(dòng)畫厘擂,分析伴隨式動(dòng)畫需要先劃分出有哪幾個(gè)階段,然后每個(gè)階段有哪些屬性值變化锰瘸,變化規(guī)律是什么刽严。如果涉及到圖片位置和顯示范圍的變化,用背景圖片實(shí)現(xiàn)會(huì)簡(jiǎn)單很多避凝。另外舞萄,小程序的渲染和邏輯分離的特殊性,會(huì)導(dǎo)致低端機(jī)下伴隨式動(dòng)畫的和交互行為的不同步恕曲,需要特別注意鹏氧。