技術之路

站在代碼以外看技術

廣汽豐田漢蘭達--大漢是怎樣煉成的

H5以“大漢是怎樣煉成的”爲主題,清點漢蘭達車型亮點。流傳産品動力及綜合性、省油、平安性等特色。經由過程簡略的互動情勢,深度流傳産品賣點。

在廣汽漢蘭達項目中,應用swiper停止分頁和癥結點分頁展現和swiper.animate.js停止動畫切換。

項目技術元素

video標簽、重力感應、搖一搖切屏、canvas繪制配景、swiper 3d切換,和包括大批輪回的CSS3動畫(如車燈、輪胎、輪回路配景)。

開辟難點:

  1. swiper多重嵌套;
  2. 視頻和大批CSS3動畫,湧現安卓機型卡頓成績。

 

項目處理思緒和辦法以下

  1. 之前瀏覽曉得大批css3動畫會招致界面襯著湧現卡頓。路采取css3動畫停止路的輪回,因為山的配景圖比擬大,開端采取div停止配景輪回,然後重力感應停止配景扭轉,後果不太幻想。因而山的配景圖采取canvas方法襯著,然後扭轉canvas來順應重力感應。
  2. 元素非輪回動畫采取ani動畫,輪回動畫應用css3,在swiper切換的時刻停止顯示影藏。
  3. 停止一個個page檢討,發明video標簽,不在以後選擇頁面,照樣會停止數據加載,招致界面卡頓。因而針對video標簽,僅在以後選擇狀況,才設置其可見。
  4. 因為子項swiper重要停止賣點引見,包括大批的圖片。在項目構建時,將子項swiper直接嵌入,發明會招致長時光延時。因而將子項swiper嵌套在div傍邊,在切換到以後頁時,動態加載子項swiper包括的內容,當切換出以後頁,移除子項swiper包括的元素。
  5. 經由過程代碼優化和細節調劑,終究使得項目在安卓機型下賤暢的運轉。
  6. 弄定。終究可以好好歇息下了~

項目UI設計與地址:

《廣汽豐田漢蘭達--大漢是怎樣煉成的》

 

點贊

揭櫫評論

電子郵件地址不會被公開。 必填項已用*標注