当前位置: 首页 > article >正文

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"))
  1. 使用绘制组件中的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") })
  1. 计算投票比例作为左右图形宽度,且定义动画效果。源码参考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


http://www.kler.cn/a/274197.html

相关文章:

  • 高强度螺栓等级划分
  • Jenkins 任意文件读取(CVE-2024-23897)修复及复现
  • 重温设计模式--单例模式
  • Scala项目(图书管理系统)
  • 性能优化!突破性能瓶颈的尖兵CPU Cache
  • 网络管理 详细讲解
  • HarmonyOS NEXT应用开发之多文件下载监听案例
  • 基础小白快速入门web前端开发技术----------->htm基础
  • C++ 引用变量、引用形参
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Toggle)
  • 高效日志为服务器保驾护航
  • sparksql简介
  • mysql查询条件包含IS NULL、IS NOT NULL、!=、like %* 、like %*%,不能使用索引查询,只能使用全表扫描,是真的吗???
  • bitset详解
  • 代理IP品质对Tik Tok代理的重要性
  • Vue快速教程:如何优雅地移除数组中的特定元素?
  • 架起桥梁,畅享流通:如何使用私有Registry实现镜像跨源同步与管理
  • linux系统中的PS命令详解
  • R语言中的常用基础绘图函数 直方图,箱线图,条形图,散点图
  • 深入理解nginx的请求限速模块[下]
  • 代码随想录算法训练营 DAY 14 | 二叉树的递归遍历和迭代遍历
  • 中间件-消息队列
  • git的起源
  • JavaScript中new操作符具体干了什么
  • 【LIMS】微服务
  • 前端项目,个人笔记(三)【Vue-cli - api封装-axios使用举例】