關(guān)于數(shù)據(jù)大屏一比一還原設(shè)計稿這件事
在5G技術(shù)剛出來，站在風(fēng)口上的時候，好家伙，那簡直鋪天蓋地，萬物都可以5G，那時不少前端人都相信5G就是前端的未來。那時剛實習(xí)的我是看不懂的，但內(nèi)心大受震撼，就在想啊，這5G究竟跟前端有啥關(guān)系呢？想了半天，晚上是橫豎睡不著，是真睡不著，只能從這字縫間看出來兩個字，“加班”。
哈哈，以上是活躍氣氛的笑話一則，其實下一代的通信技術(shù)對我們的日常生活是會帶來很大的積極影響的。數(shù)據(jù)大屏也一直在發(fā)展，一直在為擺脫華而不實的標(biāo)簽而努力著，為的就是突出數(shù)據(jù)的價值這件事。
回到開發(fā)中來，假如我們需要實現(xiàn)一款能適配所有屏幕的數(shù)據(jù)大屏應(yīng)用要怎么做呢？我們先來看看幾個實現(xiàn)方案拓展一下思路。
直接使用width百分比做適配
這種方案需要精確計算出對應(yīng)百分比的值，通常這個值并不好算，而且很多時候需要給出一個確定的高度。這樣的做法不是說不行，只能說現(xiàn)在已經(jīng)2021年了，有許多比這個更好的實現(xiàn)方案。
在剛接觸css3的媒體查詢時就覺得這個屬性太及時了，剛好對應(yīng)上了移動智能機的普及，給不同屏幕的適配提供了一個很不錯的解決方案。但媒體查詢中設(shè)置的'斷點'是離散的，實際應(yīng)用中可能會對大屏界面造成一些拉伸，不能按百分百按比例顯示出界面。而且要寫的適配樣式將會很多，有點費手。
使用postcss在打包編譯時將px經(jīng)過一系列計算轉(zhuǎn)換成rem來實現(xiàn)適配
這個方案本質(zhì)上是用到了rem這個相對長度單位的特性，例如頁面根元素的字體大小為16px，那么這時1rem就等于16px。當(dāng)然頁面根元素的默認值就是16px，如果我們設(shè)置為12px，那么這時1rem就等于12px。
這個時候我們可以知道，設(shè)計稿的高寬是固定的，而屏幕的高寬的會變的。但是我們可以算出設(shè)計稿與屏幕的比例。這樣可以推算出以下這個關(guān)鍵公式：
實際屏幕顯示的某元素寬度= (實際屏幕寬度/ 設(shè)計稿寬度) * 設(shè)計稿中某元素的寬度
在項目配置中，我們將實際屏幕與設(shè)計稿的比例應(yīng)用到頁面根元素中，如果這個比例是1/2即0.5，那么此時1rem就等于8px，然后在postcss中配置根元素字體大小為8px，這樣在代碼的開發(fā)中，就是直接使用設(shè)計稿所標(biāo)注的尺寸了。
postcss需要如下配置
不過這個方案有個問題，就是雖然能按比例顯示還原設(shè)計稿，但屏幕高寬變了怎么辦？postcss的配置是在打包編譯過程中轉(zhuǎn)換相關(guān)的rem單位的，所以無法應(yīng)對這種情況。
綜上以上幾種方法有的不夠直觀，有的很難維護，有的無法適配所有的屏幕。那么有沒有一種方法能很好的解決這一系列問題呢？答案是有的，我們需要結(jié)合現(xiàn)實情況對第三中方案作出一些改進，我們先來看看需要實現(xiàn)的效果。
需要實現(xiàn)的效果
? 能適配所有比例的屏幕
? 一比一無損還原設(shè)計稿，無論是比例還是尺寸
? 方便維護，最好能直接用設(shè)計稿里標(biāo)注的數(shù)值
分析
要達到這樣的效果，我們需要移除在編譯階段對單位的相關(guān)轉(zhuǎn)換，這樣才能動態(tài)去計算相關(guān)的轉(zhuǎn)換。而且有時寬度填滿屏幕的時候，為了保持比例不變，高度不一定等填充滿屏幕的高度，反之高度填滿屏幕的時候，寬度也不一定能填充滿，這些情況都是需要考慮到的。
統(tǒng)一數(shù)值轉(zhuǎn)換
經(jīng)過上面的鋪墊，不難發(fā)現(xiàn)其實頁面根元素的fontSize可以直接當(dāng)做一個比例，觀察以下變換，如果這個比例時1000/2000即0.5，那么此時根元素fontSize設(shè)置成0.5px，1rem等于0.5px。這樣如果設(shè)計稿中某個元素的尺寸是2000px，那么在代碼中我們可以設(shè)置成2000rem。這樣在實際屏幕上顯示的就是2000*0.5=1000px。完美，能直接使用設(shè)計稿的數(shù)值，雖然寫的時候單位要換一下。
考慮到高度或者寬度填不滿屏幕的情況，我們可以加一些判斷補充一下。
在高度或者寬度填不滿屏幕時，空白的部分可以考慮使用同一主題色或背景去填充。
到這里適配基本就做好了，但是除了還原尺寸比例之外，相關(guān)的動畫特效也是很重要的組成部分。
在大屏應(yīng)用當(dāng)中，是建議盡量使用svg矢量圖的，這樣可以徹底避免分辨率的問題，而且svg圖在動畫特效里也有很重要的作用。
例如下面是一段svg組件里path標(biāo)簽的設(shè)置，其中containerBox綁定onSize事件，這樣path可以根據(jù)內(nèi)容的尺寸，動態(tài)調(diào)整邊框的大小。
其中strokeDasharray，strokeDashoffset這兩天屬性是控制邊框動畫的關(guān)鍵。
這個動畫幀的效果比較簡單，只是一個高亮沿邊框流動的鎏金效果。如果是一些復(fù)雜的動畫可以使用TimelineLite/TimelineMax等時間軸工具去創(chuàng)建。
到此為止，編寫一個數(shù)據(jù)大屏應(yīng)用似乎并不是一件困難的事，要達到的效果已經(jīng)全部實現(xiàn)，再開發(fā)相關(guān)的大屏產(chǎn)品時就不用為相關(guān)的問題發(fā)愁了。當(dāng)然這里僅限于2D純展示類的大屏應(yīng)用，如果是3D可交互的數(shù)據(jù)應(yīng)用就是另一個話題了。
熱門文章
相關(guān)文章
極光官方微信公眾號
關(guān)注我們，即時獲取最新極光資訊
現(xiàn)在注冊，領(lǐng)取新人大禮包
