介紹

本示例介紹使用繪制組件中的Polygon組件配合使用顯式動畫以及borderRadius實(shí)現(xiàn)投票pk組件。

效果預(yù)覽圖

使用說明

1. 加載完成后會有一個(gè)膠囊塊被切割成兩個(gè)等大的圖形來作為投票的兩個(gè)選項(xiàng)，中間由PK兩字分隔開
2. 點(diǎn)擊左邊選項(xiàng)，兩個(gè)圖形會隨著選擇人數(shù)的比例同步變化，且有變化的動畫效果，PK兩字消失，圖形間間隙變小，選項(xiàng)顏色變淡， 分別在兩個(gè)圖形上顯示選擇對應(yīng)選項(xiàng)的人數(shù)比例，下方提示文字也會同步改成已選擇的選項(xiàng)，且顯示總參與投票人數(shù)

實(shí)現(xiàn)思路

1. 使用Column繪制膠囊塊圖形，為實(shí)現(xiàn)膠囊塊的切割效果以及投票后的比例變換，這里使用兩個(gè)Colum分別繪制兩個(gè)半個(gè)膠囊塊拼接而成。源碼參考VotingComponent.ets。

// 使用Column繪制出膠囊塊
Column()// 設(shè)置左上和左下兩個(gè)角為圓角.borderRadius({topLeft: $r("app.integer.fillet_radius"),bottomLeft: $r("app.integer.fillet_radius"),topRight: $r("app.integer.right_angle_radius"),bottomRight: $r("app.integer.right_angle_radius")}).backgroundColor(Constants.LEFT_COLOR).opacity(this.fillOpacity) // 動態(tài)變化透明度.width(this.leftOptionWidth) // 選項(xiàng)寬度.height($r("app.integer.option_background_height"))

2. 使用繪制組件中的Polygon實(shí)現(xiàn)膠囊塊中間被分割的效果。中間的間隙有兩個(gè)狀態(tài)：1、未投票時(shí)是個(gè)寬度比較大的平行四邊形，且有PK兩字；2、投票后是個(gè)寬度很窄的平行四邊形，且PK兩字消失。源碼參考VotingComponent.ets。

  // TODO：知識點(diǎn)3：使用繪制組件Polygon投票組件中間的平行四邊形空隙效果Polygon().points(this.points).fill(Color.White).stroke(Color.White).antiAlias(true).width($r("app.integer.polygon_width")).height($r("app.integer.polygon_height"))// 點(diǎn)擊前，空隙寬度稍微大一些，且其中有PK兩字if (!this.isClick) {Text() {Span($r("app.string.mid_text_left")).fontColor(Constants.LEFT_COLOR)Span($r("app.string.mid_text_right")).fontColor(Constants.RIGHT_COLOR)}.fontSize($r("app.integer.mid_text_font_size")).fontStyle(FontStyle.Italic).fontWeight(Constants.MID_TEXT_FONT_WEIGHT).textAlign(TextAlign.Center)}
}
// TODO：知識點(diǎn)4：因?yàn)镻olygon是以一個(gè)矩形框?yàn)榛鶞?zhǔn)來繪制的，因此會受到這個(gè)矩形框的影響，使用position以及markAnchor來偏移，以抵消前述影響
.position({ x: this.leftOptionWidth })
.markAnchor({ x: $r("app.string.mid_gap_mark_anchor") })

3. 計(jì)算投票比例作為左右圖形寬度，且定義動畫效果。源碼參考VotingComponent.ets。

  // 定義動畫animateParam: AnimateParam = {duration: Constants.ANIMATE_DURATION,curve: Curve.EaseOut}/*** 投票后改變屬性** @param option 投了左邊還是右邊*/changeState(option: string) {// 投票后將點(diǎn)擊狀態(tài)置為已點(diǎn)擊，實(shí)現(xiàn)投票只能投一次的效果this.isClick = true;// 左下角文字提示投票已選擇的選項(xiàng)this.notice = '已選擇"' + option + '"';// 投票后設(shè)置透明度，實(shí)現(xiàn)顏色變淺的效果this.fillOpacity = Constants.END_FILL_OPACITY;// 根據(jù)投票人數(shù)來計(jì)算選項(xiàng)兩邊的比例const leftOptionPercent: number = this.leftOptionChoose / (this.leftOptionChoose + this.rightOptionChoose) * Constants.PERCENTAGE;// TODO：知識點(diǎn)1：使用顯式動畫，只有在寬度變化時(shí)生效animateTo(this.animateParam, () => {this.leftOptionWidth = leftOptionPercent.toFixed(0) + '%';this.rightOptionWidth = (Constants.PERCENTAGE - leftOptionPercent).toFixed(0) + '%';this.points = Constants.END_POINTS;});}

高性能知識點(diǎn)

不涉及

工程結(jié)構(gòu)&模塊類型

votingcomponent                                        // har類型
|---constants
|   |---Constants.ets                                 // 常量類
|---view
|   |---VotingComponent.ets                            // 視圖層-投票組件頁面 

模塊依賴

本場景依賴了路由模塊來注冊路由。

參考資料

Polygon

animationTo

borderRadius

為了能讓大家更好的學(xué)習(xí)鴻蒙（HarmonyOS NEXT）開發(fā)技術(shù)，這邊特意整理了《鴻蒙開發(fā)學(xué)習(xí)手冊》（共計(jì)890頁），希望對大家有所幫助：https://qr21.cn/FV7h05

《鴻蒙開發(fā)學(xué)習(xí)手冊》：

如何快速入門：https://qr21.cn/FV7h05

1. 基本概念
2. 構(gòu)建第一個(gè)ArkTS應(yīng)用
3. ……

開發(fā)基礎(chǔ)知識：https://qr21.cn/FV7h05

1. 應(yīng)用基礎(chǔ)知識
2. 配置文件
3. 應(yīng)用數(shù)據(jù)管理
4. 應(yīng)用安全管理
5. 應(yīng)用隱私保護(hù)
6. 三方應(yīng)用調(diào)用管控機(jī)制
7. 資源分類與訪問
8. 學(xué)習(xí)ArkTS語言
9. ……

基于ArkTS 開發(fā)：https://qr21.cn/FV7h05

1. Ability開發(fā)
2. UI開發(fā)
3. 公共事件與通知
4. 窗口管理
5. 媒體
6. 安全
7. 網(wǎng)絡(luò)與鏈接
8. 電話服務(wù)
9. 數(shù)據(jù)管理
10. 后臺任務(wù)(Background Task)管理
11. 設(shè)備管理
12. 設(shè)備使用信息統(tǒng)計(jì)
13. DFX
14. 國際化開發(fā)
15. 折疊屏系列
16. ……

鴻蒙開發(fā)面試真題（含參考答案）：https://qr18.cn/F781PH

鴻蒙開發(fā)面試大盤集篇（共計(jì)319頁）：https://qr18.cn/F781PH

1.項(xiàng)目開發(fā)必備面試題
2.性能優(yōu)化方向
3.架構(gòu)方向
4.鴻蒙開發(fā)系統(tǒng)底層方向
5.鴻蒙音視頻開發(fā)方向
6.鴻蒙車載開發(fā)方向
7.鴻蒙南向開發(fā)方向

騰訊T10級高工技術(shù)，安卓全套VIP課程全網(wǎng)免費(fèi)送：https://qr21.cn/D2k9D5