網(wǎng)頁中復(fù)雜伴隨式動(dòng)畫的分析

動(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)畫的和交互行為的不同步恕曲,需要特別注意鹏氧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末渤涌,一起剝皮案震驚了整個(gè)濱河市佩谣,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌实蓬,老刑警劉巖茸俭,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異安皱,居然都是意外死亡调鬓,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門酌伊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來腾窝,“玉大人缀踪,你說我怎么就攤上這事『绺” “怎么了驴娃?”我有些...
    開封第一講書人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)循集。 經(jīng)常有香客問我唇敞,道長(zhǎng),這世上最難降的妖魔是什么咒彤? 我笑而不...
    開封第一講書人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任疆柔,我火速辦了婚禮,結(jié)果婚禮上镶柱,老公的妹妹穿的比我還像新娘旷档。我一直安慰自己,他們只是感情好奸例,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開白布彬犯。 她就那樣靜靜地躺著,像睡著了一般查吊。 火紅的嫁衣襯著肌膚如雪谐区。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,929評(píng)論 1 290
  • 那天逻卖,我揣著相機(jī)與錄音宋列,去河邊找鬼。 笑死评也,一個(gè)胖子當(dāng)著我的面吹牛炼杖,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播盗迟,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼坤邪,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了罚缕?” 一聲冷哼從身側(cè)響起艇纺,我...
    開封第一講書人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎邮弹,沒想到半個(gè)月后黔衡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡腌乡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年盟劫,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片与纽。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡侣签,死狀恐怖塘装,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情影所,我是刑警寧澤氢哮,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站型檀,受9級(jí)特大地震影響冗尤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜胀溺,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一裂七、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧仓坞,春花似錦背零、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至嫉称,卻和暖如春侦镇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背织阅。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工壳繁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人荔棉。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓闹炉,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親润樱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子渣触,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350