HarmonyOS NEXT应用开发—投票动效实现案例

介绍

本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。

效果预览图

使用说明

1. 加载完成后会有一个胶囊块被切割成两个等大的图形来作为投票的两个选项，中间由PK两字分隔开
2. 点击左边选项，两个图形会随着选择人数的比例同步变化，且有变化的动画效果，PK两字消失，图形间间隙变小，选项颜色变淡， 分别在两个图形上显示选择对应选项的人数比例，下方提示文字也会同步改成已选择的选项，且显示总参与投票人数

实现思路

1. 使用Column绘制胶囊块图形，为实现胶囊块的切割效果以及投票后的比例变换，这里使用两个Colum分别绘制两个半个胶囊块拼接而成。源码参考VotingComponent.ets。

// 使用Column绘制出胶囊块
Column()// 设置左上和左下两个角为圆角.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) // 动态变化透明度.width(this.leftOptionWidth) // 选项宽度.height($r("app.integer.option_background_height"))

2. 使用绘制组件中的Polygon实现胶囊块中间被分割的效果。中间的间隙有两个状态：1、未投票时是个宽度比较大的平行四边形，且有PK两字；2、投票后是个宽度很窄的平行四边形，且PK两字消失。源码参考VotingComponent.ets。

  // TODO：知识点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"))// 点击前，空隙宽度稍微大一些，且其中有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：知识点4：因为Polygon是以一个矩形框为基准来绘制的，因此会受到这个矩形框的影响，使用position以及markAnchor来偏移，以抵消前述影响
.position({ x: this.leftOptionWidth })
.markAnchor({ x: $r("app.string.mid_gap_mark_anchor") })

3. 计算投票比例作为左右图形宽度，且定义动画效果。源码参考VotingComponent.ets。

  // 定义动画animateParam: AnimateParam = {duration: Constants.ANIMATE_DURATION,curve: Curve.EaseOut}/*** 投票后改变属性** @param option 投了左边还是右边*/changeState(option: string) {// 投票后将点击状态置为已点击，实现投票只能投一次的效果this.isClick = true;// 左下角文字提示投票已选择的选项this.notice = '已选择"' + option + '"';// 投票后设置透明度，实现颜色变浅的效果this.fillOpacity = Constants.END_FILL_OPACITY;// 根据投票人数来计算选项两边的比例const leftOptionPercent: number = this.leftOptionChoose / (this.leftOptionChoose + this.rightOptionChoose) * Constants.PERCENTAGE;// TODO：知识点1：使用显式动画，只有在宽度变化时生效animateTo(this.animateParam, () => {this.leftOptionWidth = leftOptionPercent.toFixed(0) + '%';this.rightOptionWidth = (Constants.PERCENTAGE - leftOptionPercent).toFixed(0) + '%';this.points = Constants.END_POINTS;});}

高性能知识点

不涉及

工程结构&模块类型

votingcomponent                                        // har类型
|---constants
|   |---Constants.ets                                 // 常量类
|---view
|   |---VotingComponent.ets                            // 视图层-投票组件页面 

模块依赖

本场景依赖了路由模块来注册路由。

参考资料

Polygon

animationTo

borderRadius

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

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

1. 基本概念
2. 构建第一个ArkTS应用
3. ……

开发基础知识：https://qr21.cn/FV7h05

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

腾讯T10级高工技术，安卓全套VIP课程全网免费送：https://qr21.cn/D2k9D5