【鸿蒙实战开发】长按组件颜色刷新

最新推荐文章于 2025-09-01 14:40:56 发布

原创

最新推荐文章于 2025-09-01 14:40:56 发布 · 1.2k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#android #harmonyos #华为 #鸿蒙 #前端

需求描述

实现一个工具，可以帮助我们实现根据触摸时间来动态更新当前的颜色

原理讲解

ARGB

ARGB颜色字符串是一种用于表示颜色的编码方式，它结合了RGB色彩模式与Alpha（透明度）通道。

ARGB颜色字符串由四个部分组成，分别代表Alpha（透明度）、Red（红色）、Green（绿色）、Blue（蓝色）四个通道的值。每个通道的值通常用十六进制数表示，范围从00到FF（十六进制），对应于十进制中的0到255。因此，一个完整的ARGB颜色字符串看起来像这样：#AARRGGBB，其中AA是Alpha值，RR是红色值，GG是绿色值，BB是蓝色值。

渐变

在渐变中，A、R、G、B四个颜色通道的值会沿着渐变方向逐渐变化。例如，从红色（R:255, G:0, B:0）渐变到蓝色（R:0, G:0, B:255），则红色通道的值会逐渐减小，而蓝色通道的值会逐渐增加，绿色通道的值可能保持不变（取决于中间是否有绿色过渡）。

实现思路

定义起始和结束颜色：确定用户在未长按时的颜色（起始颜色）和长按时想要达到的颜色（结束颜色），长按到达结束颜色的时间。
颜色解析：将起始颜色和结束颜色相应的ARGB值进行重新解码，得到每个通道单独的ARGB值。
颜色线性插值计算：根据时间的变化，在两个指定的颜色之间平滑过渡。它首先计算了从某个起始时间到当前时间的差值，并将这个差值限制在一个指定的时间间隔内。然后，它使用线性插值方法来计算当前时间下应该显示的颜色的各个颜色通道（红、绿、蓝、透明度）的值。这些值可以用来在图形界面上动态地改变元素的颜色。
颜色编码：将拿到的十进制ARGB值重新编码成十六进制。
触摸事件：抓取触摸事件的按下和抬起事件，将记录手指触摸组件的时间点和手指离开组件的时间点。用来给颜色计算。并且定时刷新颜色

实现源码

1.定义起始和结束颜色：

  // 开始颜色
  startColor = "#ffff0000"
  // 结束颜色
  endColor = "#ff00ff00"
  // 最大长按时间
  timeInterval = 4000;

  constructor();
  constructor(startColor: string, endColor: string, timeInterval: number);
  constructor(startColor?: string, endColor?: string, timeInterval?: number) {
    if (startColor && endColor && timeInterval) {
      this.startColor = startColor;
      this.endColor = endColor;
      this.timeInterval = t