HarmonyOS 基于ArkUI(ETS) 實(shí)現(xiàn)雷達(dá)掃描
??想了解更多關(guān)于開(kāi)源的內(nèi)容,請(qǐng)?jiān)L問(wèn):??
??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??
前言
雷達(dá)掃描是一個(gè)比較有科技感的東西,對(duì)于科幻迷來(lái)說(shuō),科幻電影里基本都能看到的畫(huà)面,一個(gè)大大的屏幕上,可以看到雷達(dá)掃描的綠幕效果。
下面我們使用三種方式來(lái)實(shí)現(xiàn)這樣的雷達(dá)效果。
項(xiàng)目說(shuō)明
- 工具版本:DevEco Studio 3.0 Release
- SDK版本:3.1.1.2(API Version 8 Release)
- 主要組件:canvas, Row, Image
效果
- 使用Image圖片組件方式實(shí)現(xiàn)
- 使用canvas組件實(shí)現(xiàn)
- 使用Row組件的漸變屬性實(shí)現(xiàn)
實(shí)現(xiàn)過(guò)程
需要注意,一個(gè)頁(yè)面里只能有一個(gè)@Entry修飾符,所以,下面三種方法在預(yù)覽的時(shí)候,需要注意注釋只保留一個(gè)@Entry
1、使用Image方法實(shí)現(xiàn)
使用Image組件的方法是最簡(jiǎn)單的,直接制作兩張圖片,一張底圖,一張掃描的圖
將兩張圖片通過(guò)疊加,將掃描的圖片通過(guò)圓心宣旋轉(zhuǎn)即可,下面使用代碼來(lái)實(shí)現(xiàn)
整體比較簡(jiǎn)單,旋轉(zhuǎn)主要用到了animation屬性,這些在官網(wǎng)API文檔可以查看。雖然使用Image組件實(shí)現(xiàn)比較簡(jiǎn)單,但是卻是可以實(shí)現(xiàn)一些復(fù)雜的雷達(dá)UI。
2、使用canvas實(shí)現(xiàn)
使用canvas實(shí)現(xiàn)的需要用到兩個(gè)組件,第一個(gè)是Canvas組件,用來(lái)繪制底圖網(wǎng)格,第二個(gè)是Row組件,使用角漸變屬性實(shí)現(xiàn)旋轉(zhuǎn)的扇形。
這里為什么不都使用canvas實(shí)現(xiàn)呢,找了一圈,canvas只有線性漸變和徑向漸變,切沒(méi)有角度漸變屬性,所以,為了方便就用了row來(lái)實(shí)現(xiàn)吧。
下面直接上代碼。
Row的漸變方式在下一個(gè)方法講解,最終都還是使用animation屬性動(dòng)畫(huà)實(shí)現(xiàn)扇形的旋轉(zhuǎn)效果
3、使用Row組件實(shí)現(xiàn)
使用Row組件實(shí)現(xiàn)的方法稍微復(fù)雜一些,這里用到了4個(gè)Row組件,其實(shí)對(duì)于前端童鞋來(lái)說(shuō),這里可能會(huì)比較好里一些,其實(shí)就是類似通過(guò)div和css來(lái)實(shí)現(xiàn)的,row組件是div,其屬性是css樣式。
廢話不多說(shuō),直接上代碼開(kāi)搞
(1)實(shí)現(xiàn)圓圈圈
首先使用徑向漸變屬性(radialGradient)來(lái)實(shí)現(xiàn)底部圈圈的效果
radialGradient屬性有幾個(gè)需要注意的值,radius是漸變的半徑,這里使用30。
漸變顏色colors組用了三個(gè)數(shù)據(jù),可以看出,前兩個(gè)其實(shí)是透明度為0的。
可以理解為
- 第一個(gè)漸變顏色到第二個(gè)漸變顏色用了90%。
- 第二個(gè)漸變顏色到第三個(gè)漸變顏色,用了10%(100%-90%)。
- 也就是說(shuō)在漸變半徑為30的情況下,有90%是透明的,只有10%是透明到green顏色的,這樣得到了一個(gè)圈圈。
- 然后又設(shè)置了repeating屬性(重復(fù)著色)為true。
- 所以在半徑為150的圓內(nèi),可以設(shè)置 150 / 3 = 5個(gè)圓圈圈。
我們看看效果:
(2)實(shí)現(xiàn)十字架
實(shí)現(xiàn)十字架使用了兩個(gè)Row組件,使用線性漸變屬性(linearGradient)分別繪制了一橫一豎的效果。
可以看到顏色組colors使用了5個(gè)顏色來(lái)實(shí)現(xiàn),1,2,4,5的顏色都是透明的。
- 第一個(gè)顏色到第二個(gè)顏色都是透明的,漸變范圍是0到49%。
- 第二個(gè)顏色到第三個(gè)顏色漸變范圍是50% - 49% = 1%,也就是在其50%(中間)的地方繪制了一個(gè)1%的green線條
- 第三個(gè)顏色到第四個(gè)顏色不變。
- 第三個(gè)到第五個(gè)顏色也是透明,漸變范圍也是50%。
上面繪制好之后,我們通過(guò)angle屬性將線條旋轉(zhuǎn)90度得到一個(gè)十字架。
來(lái)看看效果:
(3)實(shí)現(xiàn)旋轉(zhuǎn)扇形
扇形也是用到Row組件,其角度漸變屬性(sweepGradient)來(lái)實(shí)現(xiàn)的。
來(lái)看看效果:
最后設(shè)置rotate旋轉(zhuǎn)屬性,設(shè)置旋轉(zhuǎn)軸為z軸,角度angle為動(dòng)態(tài)更新,這樣animation動(dòng)畫(huà)屬性才會(huì)更新。
最終代碼:
扇形的代碼:
這里添加一個(gè)掃描周邊設(shè)備的效果,動(dòng)態(tài)設(shè)置了一個(gè)數(shù)據(jù)源,通過(guò)ForEach來(lái)動(dòng)態(tài)渲染。
最終的代碼:
來(lái)看看最終完整的效果:
git地址
https://gitee.com/yango520/yg-radar。
總結(jié)
通過(guò)這個(gè)雷達(dá)demo,特別是第三種方法,可以學(xué)到了顏色漸變屬性中的三種漸變,線性漸變,徑向漸變,和角度漸變。也可以學(xué)習(xí)屬性動(dòng)畫(huà)的實(shí)現(xiàn)。
??想了解更多關(guān)于開(kāi)源的內(nèi)容,請(qǐng)?jiān)L問(wèn):??