HarmonyOS鸿蒙Next中rendernode重复调用invalidate不生效

HarmonyOS鸿蒙Next中rendernode重复调用invalidate不生效

export class MyRenderNode extends RenderNode {

private startPoint: common2D.Point = { x: 8 * testScale, y: 12 * testScale } private centerPoint: common2D.Point = { x: 11 * testScale, y: 14 * testScale } private endPoint: common2D.Point = { x: 16 * testScale, y: 9 * testScale } private path:drawing.Path = new drawing.Path(); private circlePath:drawing.Path = new drawing.Path(); private redPen:drawing.Pen = new drawing.Pen(); private whitePen:drawing.Pen = new drawing.Pen(); private whiteBrush = new drawing.Brush();

private lastTime = 0; private isStart = false;

private pathLeft: Point | undefined = undefined // 左侧红线路径 private pathRight: Point | undefined = undefined // 右侧红线路径 //白色圆圈缩放比例 private AnimScale: number = 0.0 private AnimOpacity: number = 0.0 // 透明度

private circleAppearTime = 200; //白色圆消失动画时长 单位：毫秒 private circleDisappearTime = 400; //右侧红线动画时长 单位：毫秒 private rightLineTime = 200; //左侧红线动画时长 单位：毫秒 private leftLineTime = 200; //圆心 private centerOfCircle = AnimWidth / 2; //白色圆圈透明度变化速度 private alphaSpeed = 255.0 / this.circleAppearTime;

private radius = AnimWidth / 2 - 2;

////// private alpha = 0; //左边红线动画已绘制的长度 private leftLineStepX = 0; private leftLineStepY = 0; //右边红线动画已绘制的长度 private rightLineStepX = 0; private rightLineStepY = 0; //线条绘制速度 private lineSpeedX = 0; private lineSpeedY = 0; //当红线全部画完后至白圈开始缩小动画之间的延时时间 private delayTime = 0;

//白色圆圈缩放速度 private scaleSpeed = 0;

constructor() { super() this.init() }

private init(){

//pen
this.redPen.setAntiAlias(true);
let pen_color : common2D.Color = { alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 };
this.redPen.setColor(pen_color);
this.redPen.setStrokeWidth(2);
this.redPen.setCapStyle(drawing.CapStyle.ROUND_CAP);
//

this.whitePen.setColor({ alpha: 0xFF, red: 0xFF, green: 0xFF, blue: 0xFF });
// 设置填充颜色
this.whiteBrush.setColor(0xFF, 0xFF, 0xFF, 0xFF);

this.circleAppearTime = 200;
this.leftLineTime = 200;
this.rightLineTime = 200;
this.circleDisappearTime = 400;

this.alphaSpeed = 255.0 / this.circleAppearTime;

this.centerOfCircle = AnimWidth / 2.0;
this.radius = this.centerOfCircle - 2;
//

}

draw(context: DrawContext) {

const canvas = context.canvas;
let intervals = this.getIntervals();
XLog.i(TAG, " draw intervals is： "+ intervals + " alpha is: " + this.alpha)
// canvas.scale(this.AnimScale, this.AnimScale);

if (this.alpha < 255) {
  this.drawCircleAppearAnim(intervals/10);
  canvas.attachBrush(this.whiteBrush);
  canvas.drawCircle(this.centerOfCircle, this.centerOfCircle, this.radius);
  canvas.detachBrush();
  this.invalidate();
  return;
}

}

private reset() { this.AnimOpacity = 0.0; this.alpha = 0;

this.isStart = false;
this.delayTime = 200;

//将所需画的长度拆分成每一毫秒应该绘制的长度
// lineSpeedX = (centerPointX - startPointX) / leftLineTime;
// lineSpeedY = (centerPointY - startPointY) / leftLineTime;
this.scaleSpeed = 1.2 / this.circleAppearTime;

this.leftLineStepX = 0.0;
this.leftLineStepY = 0.0;
this.rightLineStepX = 0.0;
this.rightLineStepY = 0.0;
this.lastTime = 0;
this.AnimScale = 0.0;

}

private drawCircleAppearAnim(intervals: number) { this.alpha += Math.floor(this.alphaSpeed * intervals); this.AnimScale += this.scaleSpeed * intervals; if (this.alpha > 255) { this.alpha = 255; } if (this.AnimScale > 1.2) { this.AnimScale = 1.2; } this.whiteBrush.setAlpha(this.alpha); }

private getIntervals() { let intervals = 1; let currentTime = Date.now(); if (this.lastTime != 0) { intervals = currentTime - this.lastTime; } this.lastTime = currentTime; return intervals; }

public doAnim(){ this.isStart = true; } }

上述rendernode做动画，在draw之后调用invalidate重绘。

直接调用this.invalidate(); 无效

setTimeout(()=>{ this.invalidate(); }, 0)生效

或者类似上述路径动画如何做，有更好的方法吗