HarmonyOS 鸿蒙Next中colorFilter实现颜色过渡动画

HarmonyOS 鸿蒙Next中colorFilter实现颜色过渡动画 在给Image设置colorFilter时，怎么让颜色的过渡有一个动画效果，比如从蓝色切换到红色，效果逐渐变化的

4 回复

目前实现的方式如下：

给Image的colorFilter增加自定义的属性动画，ColorFilter对象接受的参数是一个4*5的颜色矩阵，具体是一个number[]，所有需要实现AnimatableArithmetic<T>接口。然后使用@AnimatableExtend装饰器对colorFilter属性进行封装

实现代码如下：

@AnimatableExtend(Image)
function animatableColorFilter(value: MyColorFilter) {
  .colorFilter(value.colorMatrix);
}

class MyColorFilter implements AnimatableArithmetic<MyColorFilter>{
  private colorMatrix: number[] = []

  constructor(colorMatrix: number[]) {
    this.colorMatrix = colorMatrix;
  }

  plus(rhs: MyColorFilter): MyColorFilter {
    let result: number[] = [];
    let len = Math.min(rhs.colorMatrix.length, this.colorMatrix.length);
    for (let index = 0; index < len; index++) {
        result.push(this.colorMatrix[index] + rhs.colorMatrix[index])
    }
    return new MyColorFilter(result);
  }

  subtract(rhs: MyColorFilter): MyColorFilter {
    let result: number[] = [];
    let len = Math.min(rhs.colorMatrix.length, this.colorMatrix.length);
    for (let index = 0; index < len; index++) {
      result.push(this.colorMatrix[index] - rhs.colorMatrix[index])
    }
    return new MyColorFilter(result);
  }

  multiply(scale: number): MyColorFilter {
    let result: number[] = [];
    for (let index = 0; index < this.colorMatrix.length; index++) {
      result.push(this.colorMatrix[index] * scale)
    }
    return new MyColorFilter(result);
  }

  equals(rhs: MyColorFilter): boolean {
    let len = Math.min(rhs.colorMatrix.length, this.colorMatrix.length);
    for (let index = 0; index < len; index++) {
      if (this.colorMatrix[index] !== rhs.colorMatrix[index]) {
        return false;
      }
    }
    return true;
  }

更多关于HarmonyOS 鸿蒙Next中colorFilter实现颜色过渡动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


渐变色[a href=“https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-gradient-color-V5”]https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-gradient-color-V5[/a]

渐变色是一个静态效果，我想实现动态的动画效果。

在HarmonyOS（鸿蒙Next）中，colorFilter可以通过Animator或Animation实现颜色过渡动画。colorFilter通常用于对视图或图像应用颜色滤镜，而颜色过渡动画可以通过插值器（Interpolator）来平滑地改变颜色值。

  1. 使用Animator实现颜色过渡动画：
  • 通过ValueAnimator或ObjectAnimator，可以动态改变colorFilter的颜色属性。例如，使用ArgbEvaluator来插值颜色值，从起始颜色过渡到目标颜色。
  • 示例代码：
let colorAnimator = animator.createAnimator({
  duration: 1000,
  easing: "easeInOut",
  onUpdate: (value) => {
    let color = ArgbEvaluator.evaluate(value, startColor, endColor);
    view.setColorFilter(color);
  }
});
colorAnimator.start();
  1. 使用Animation实现颜色过渡动画：
  • 通过Animation组件，可以定义颜色过渡的关键帧（Keyframe），并在动画过程中应用这些关键帧。
  • 示例代码：
let animation = animation.createAnimation({
  duration: 1000,
  easing: "easeInOut"
});
animation.addKeyframe(0.0, { colorFilter: startColor });
animation.addKeyframe(1.0, { colorFilter: endColor });
animation.play();

在以上示例中，startColor和endColor分别是颜色过渡的起始和目标颜色，view是应用颜色滤镜的视图对象。通过插值器，可以实现平滑的颜色过渡效果。

回到顶部