鸿蒙在挂载事件监听器后，过一段时间就会无效

[qianyunrumo]

class listener implements PAGViewListener {
// 开始
onAnimationStart: () => void;
// 暂停
onAnimationCancel: () => void;
// 结束
onAnimationEnd: () => void;
// 更新帧
onAnimationUpdate: () => void;

constructor(start: () => void, cancel: () => void, end: () => void, update: () => void,) {
this.onAnimationStart = start;
this.onAnimationCancel = cancel;
this.onAnimationEnd = end;
this.onAnimationUpdate = update;
}
}

@ObservedV2
class controller {
containerWidth = ToolUtil.getScreenSize().vp || 0;
containerHeight = this.containerWidth / 16 * 9;
width = 145;
@trace current = 0;
@trace duration = 0;
@trace imageViewControllers: PAGImageViewController[] = new Array();
@trace viewController: PAGViewController = new PAGViewController();
@trace pageIndex: number = 0;
@trace played: boolean = false;
// 播放
play = () => {
this.played = true;
this.viewController.play();
}
// 暂停
pause = () => {
this.played = false;
this.viewController.pause();
}
// 放送
broadcast = () => {
if (this.played) {
this.pause();
} else {
this.play();
}
}
// 开始
start = () => {
console.log("开始")
}
// 暂停
cancel = () => {

}
// 结束
end = () => {
console.log("结束")
this.played = false;
}
// 更新帧
update = () => {
let time = this.viewController.getProgress();
// let time = viewController.currentFrame();
console.log(time + "---" + this.duration)
}

constructor(hctx: Context) {
let viewController = this.viewController;

let filePath = `${hctx.filesDir}/HJ-609.pag`;
let callback = async () => {
  // 解析pag
  let file = await PAGFile.LoadFromPathAsync(filePath);
  // 挂载pag
  viewController.setComposition(file);
  // 挂载监听器
  viewController.addListener(
    new WeakRef<PAGViewListener>(
      new listener(
        this.start,
        this.cancel,
        this.end,
        this.update
      )
    )
  );
  // 时长
  let duration = this.duration = viewController.duration();
}
let exist = fs.accessSync(filePath);
if (exist) {
  callback();
} else {
  let url = "https://www.hunlihu.com/pag/HJ-609/HJ-609.pag";
  request.downloadFile(hctx, { url, filePath }).then(res => {
    res.on("progress", (receivedSize: number, totalSize: number) => {
      console.info("download receivedSize:" + receivedSize + " totalSize:" + totalSize);
    })
    res.on("fail", (err: number) => {
      console.error(`Failed to download the task. Code: ${err}`);
    })
    res.on("complete", () => {
      callback();
    })
  });
}

}
}

首次进入调用play会执行PAGViewListener中的所有方法，但是在onAnimationEnd后，我如果不执行任何操作，将手机静置三分钟（不确定），然后我再调用play，此时PAGViewListener中的所有方法不会再触发，这是什么情况；如果没有静置，在onAnimationEnd后调用play是会触发PAGViewListener的

[kevingpqi123]

为了提高对接效率，此类问题请提供复现 demo，这样解决起来是最快的

[qianyunrumo]

import { request } from '@kit.BasicServicesKit';
import { PAGViewV2, PAGFile, PAGImageViewController, PAGViewController, PAGViewListener } from '@tencent/libpag';
import fs from '@ohos.file.fs';
import { MyFrameCallback, ToolUtil } from '../utils/ToolUtil';
import { media } from '@kit.MediaKit';

@builder
export function pagBuilder() {
Pag()
}

class listener implements PAGViewListener {
// 开始
onAnimationStart: () => void;
// 暂停
onAnimationCancel: () => void;
// 结束
onAnimationEnd: () => void;
// 更新帧
onAnimationUpdate: () => void;

constructor(start: () => void, cancel: () => void, end: () => void, update: () => void,) {
this.onAnimationStart = start;
this.onAnimationCancel = cancel;
this.onAnimationEnd = end;
this.onAnimationUpdate = update;
}
}

@ObservedV2
class controller {
containerWidth = ToolUtil.getScreenSize().vp || 0;
containerHeight = this.containerWidth / 16 * 9;
width = 145;
avPlayer: media.AVPlayer | null = null;
state = "idle";
callback = () => {
};
@trace current = 0;
@trace duration = 0;
@trace imageViewControllers: PAGImageViewController[] = new Array();
@trace viewController: PAGViewController = new PAGViewController();
@trace pageIndex: number = 0;
@trace played: boolean = false;
startX = 0;
timer: number | null = null;
// 播放
play = () => {
this.played = true;
this.viewController.play();
this.avPlayer?.play();
}
// 暂停
pause = () => {
this.played = false;
this.viewController.pause();
this.avPlayer?.pause();
}
// 放送
broadcast = () => {
if (this.played) {
this.pause();
} else {
this.play();
}
}
// 拖拽
touch = (e: TouchEvent) => {
let x = e.touches[0].x;
let viewController = this.viewController;
switch (e.type) {
case TouchType.Down: {
this.startX = x;
}
break;
case TouchType.Move: {
if (this.startX == x) {
return;
}
this.startX = x;
if (this.timer) {
clearTimeout(this.timer);
}
let value = Math.max(0, Math.min(x, this.width)) / this.width;
this.current = value * 100;
this.timer = setTimeout(() => {
viewController.setProgress(value);
viewController.play();
viewController.pause();
}, 100)
}
break;
case TouchType.Up: {
if (this.timer) {
clearTimeout(this.timer);
}
let value = Math.max(0, Math.min(x, this.width)) / this.width;
this.current = value * 100;
viewController.setProgress(value);
viewController.play();
viewController.pause();
}
break;
}
}
// 开始
start = () => {
console.log("开始")
}
// 暂停
cancel = () => {

}
// 结束
end = () => {
console.log("结束")
this.played = false;
this.avPlayer?.pause();
this.avPlayer?.seek(0);
}
// 更新帧
update = () => {
let time = this.viewController.getProgress();
this.current = time * 100;
// this.current
// let time = viewController.currentFrame();
console.log(time + "---" + this.duration)
}

constructor(hctx: Context) {
media.createAVPlayer().then(res => {
// 当前时间
res.on("timeUpdate", (time: number) => {
// this.time = time;
// this.elapsed = this.width * (this.time / this.duration);
});
// 总时长
res.on("durationUpdate", (duration: number) => {
// this.duration = duration;
// this.time = 0;
// this.elapsed = 0;
})
// 状态变化
res.on("stateChange", (state) => {
console.log(state, 666)
this.state = state;
switch (state) {
// 空
case "idle":
this.callback();
break;
// 初始化
case "initialized":
this.callback();
break;
}
});
res.url = "https://www.hunlihu.com/pag/HJ-561/HJ-561.mp3";
this.avPlayer = res;
this.callback = () => {
this.avPlayer?.prepare();
}
})

let viewController = this.viewController;

let filePath = `${hctx.filesDir}/HJ-609.pag`;
let callback = async () => {
  // 解析pag
  let file = await PAGFile.LoadFromPathAsync(filePath);
  // 挂载pag
  viewController.setComposition(file);
  // 挂载监听器
  viewController.addListener(
    new WeakRef<PAGViewListener>(
      new listener(
        this.start,
        this.cancel,
        this.end,
        this.update
      )
    )
  );
  // 时长
  let duration = this.duration = viewController.duration();
}
let exist = fs.accessSync(filePath);
if (exist) {
  callback();
} else {
  let url = "https://www.hunlihu.com/pag/HJ-609/HJ-609.pag";
  request.downloadFile(hctx, { url, filePath }).then(res => {
    res.on("progress", (receivedSize: number, totalSize: number) => {
      console.info("download receivedSize:" + receivedSize + " totalSize:" + totalSize);
    })
    res.on("fail", (err: number) => {
      console.error(`Failed to download the task. Code: ${err}`);
    })
    res.on("complete", () => {
      callback();
    })
  });
}

}
}

@Preview
@ComponentV2
export struct Pag {
ctx = this.getUIContext();
hctx = this.ctx.getHostContext()!;
controller = new controller(this.hctx);

async aboutToAppear() {
}

@Styles
wh(){
.width("100%").height("100%")
}

@builder
icon(e: string, color: string = "", size: string | number = "") {
Text(e).fontFamily("iconfont").fontColor(color).fontSize(size)
}

build() {
NavDestination() {
Column() {
Stack() {
PAGViewV2({ controller: this.controller.viewController })
.width("100%")
.height("100%")
Row() {
Text("\ue6c8")
.fontFamily("iconfont")
.fontColor("#fff")
.fontSize(20)
.padding(12)
.backgroundColor("rgba(0,0,0,0.3)")
.border({ width: 2, color: "#fff", radius: "50%" })
}
.wh()
.zIndex(2)
.backgroundColor("rgba(0,0,0,0.3)")
.justifyContent(FlexAlign.Center)
.opacity(this.controller.played ? 0 : 1)
}
.width(this.controller.containerWidth)
.height(this.controller.containerHeight)
.backgroundColor("#4FC8D6")
.onClick(this.controller.broadcast)

    Row() {
      Row({ space: 3 }) {
        if (this.controller.played) {
          this.icon("\ue6c1", "#666666", 12)
        } else {
          this.icon("\ue6c8", "#666666", 12)
        }
        Text("预览")
          .fontSize(11)
          .fontColor("#666666")
      }
      .width(50)
      .height(18)
      .borderRadius(38)
      .backgroundColor("#EBEBED")
      .justifyContent(FlexAlign.Center)
      .onClick(this.controller.broadcast)

      Text("00:20")

      Row() {
        Row()
          .width("100%")
          .height(10)
          .position({ x: 0, y: "50%" })
          .translate({ y: "-50%" })
          .onTouch((e: TouchEvent) => {
            this.ctx.postFrameCallback(new MyFrameCallback(() => {
              this.controller.touch(e);
            }))
          })
        Row() {
          Row()
            .width(10)
            .height(10)
            .borderRadius("50%")
            .position({ x: "100%", y: "50%" })
            .translate({ x: "-50%", y: "-50%" })
            .backgroundColor("#4FC8D6")
            .hitTestBehavior(HitTestMode.None)
        }
        .width(`${this.controller.current}%`)
        .height(4)
        .borderRadius(4)
        .backgroundColor("#4FC8D6")
        .position({ x: 0, y: 0 })
        .hitTestBehavior(HitTestMode.None)
      }
      .width(this.controller.width)
      .height(4)
      .borderRadius(4)
      .backgroundColor("#D9D9D9")

      Text("00:20")
    }
    .width("100%")
    .height(40)
    .backgroundColor("#fff")
    .padding({
      left: 10,
      top: 0,
      right: 10,
      bottom: 0
    })
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
.backgroundColor("red")

}
}

getScreenSize(): ScreenSize {
try {
const defaultDisplay = display.getDefaultDisplaySync();
// 内部直接计算 vp：px 转 vp（160dpi 下 1px = 1vp，以此为基准）
const screenVp = defaultDisplay.width / (defaultDisplay.densityDPI / 160);
return {
width: defaultDisplay.width, // 原始 px 宽度
height: defaultDisplay.height, // 原始 px 高度
vp: screenVp // 已转换的 vp 宽度（直接返回，后续用的时候不用再算）
};
} catch (error) {
console.error(获取屏幕尺寸失败: ${error.code}, ${error.message});
// 异常时兜底：返回合理的默认值（避免后续用 vp 时出现 0 或 undefined）
return {
width: 1080, // 默认 px 宽度（常见手机分辨率）
height: 2340, // 默认 px 高度
vp: 360 // 默认 vp 宽度（多数手机屏幕宽度的 vp 值，保证布局正常）
};
}
}

class MyFrameCallback extends FrameCallback {
callback = () => {
};

constructor(callback: () => void) {
super();
this.callback = callback;
}

onFrame() {
this.callback();
}
}

目前的话update会在进度播放到0.044左右就失效

Uploading 7e416639724edfaa9c4abf4727429d76.mp4…

[qianyunrumo]

7e416639724edfaa9c4abf4727429d76.mp4

[qianyunrumo]

[0x1306a94]

@qianyunrumo listener 你需要自己强引用，从你提供的描述过一段时间就会无效应该是WeakRef被GC释放了

  viewController.addListener(
    new WeakRef<PAGViewListener>(
      new listener(
        this.start,
        this.cancel,
        this.end,
        this.update
      )
    )
  );

[qianyunrumo]

没用过WeakRef，将listener赋值给一个变量进行强引用确实可以了