zhangbo1_wd

列表页面lottie动画crash问题修复。下拉刷新动画使用优化

... ... @@ -85,8 +85,8 @@ export default struct CustomLayout {
name: this.animateName,
path: "lottie/refresh_step1.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
})
}
this.animateItem.goToAndStop(1)
}
let total = CustomLayout.REFRESH_HEIGHT
let progress = offset * 100 / total
this.animateItem?.goToAndStop(this.getFramesByProgress(progress), true);
... ... @@ -103,9 +103,6 @@ export default struct CustomLayout {
path: "lottie/refresh_step2.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
})
}
// this.animateItem2.isLoaded
// TODO 是否拦截重复触发
this.animateItem2.goToAndPlay(1)
}
getFramesByProgress(progress: number): number {
... ...
... ... @@ -18,14 +18,18 @@ export struct CustomPullToRefresh {
.setAnimDuration(500);
private refreshSettings: RenderingContextSettings = new RenderingContextSettings(true)
private refreshContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.refreshSettings)
private refreshingSettings: RenderingContextSettings = new RenderingContextSettings(true)
private refreshingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.refreshingSettings)
private loadMoreSettings: RenderingContextSettings = new RenderingContextSettings(true)
private loadMoreContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.loadMoreSettings)
private refreshAnimation: AnimationItem | null = null;
private refreshingAnimation: AnimationItem | null = null;
private loadMoreAnimation: AnimationItem | null = null;
private refreshAnimName: string = "refresh";
private refreshingAnimName: string = "refreshing";
private loadMoreAnimName: string = "loadMore";
private refreshAnimationDestroy = true
private refreshingAnimationDestroy = true
// refresh-1,refreshing-2,refreshed-3,idle-4
@State @Watch('stateChange') private refreshState: number = 4;
... ... @@ -120,9 +124,23 @@ export struct CustomPullToRefresh {
})
.onDisAppear(() => {
lottie.destroy(this.refreshAnimName);
})
.visibility(this.refreshState == 1 ? Visibility.Visible : Visibility.Hidden)
Canvas(this.refreshingContext)
.width(60)
.height(60)
.backgroundColor(Color.Transparent)
.onReady(() => {
// 可在此生命回调周期中加载动画,可以保证动画尺寸正确
//抗锯齿的设置
this.refreshContext.imageSmoothingEnabled = true;
this.refreshContext.imageSmoothingQuality = 'medium'
})
.onDisAppear(() => {
lottie.destroy(this.refreshingAnimName);
})
.visibility((this.refreshState == 1 || this.refreshState == 2) ? Visibility.Visible : Visibility.Hidden)
.visibility(this.refreshState == 2 ? Visibility.Visible : Visibility.Hidden)
Text('已更新至最新')
.fontSize(14)
... ... @@ -175,10 +193,7 @@ export struct CustomPullToRefresh {
}
private refreshAnim(percent: number) {
if (this.refreshAnimation == null || this.refreshAnimation.name != this.refreshAnimName ||
this.refreshAnimationDestroy) {
this.refreshAnimation?.destroy(this.refreshAnimName)
this.refreshAnimation?.destroy(this.refreshingAnimName)
if (this.refreshAnimation == null || this.refreshAnimationDestroy) {
this.refreshAnimation = lottie.loadAnimation({
container: this.refreshContext,
renderer: 'canvas', // canvas 渲染模式
... ... @@ -212,21 +227,19 @@ export struct CustomPullToRefresh {
}
private refreshingAnim() {
// Logger.error('zzzz', 'animate2, 1')
// 先销毁之前的动画
if (this.refreshAnimation == null || this.refreshAnimation.name != this.refreshingAnimName ||
this.refreshAnimationDestroy) {
this.refreshAnimation?.destroy(this.refreshAnimName)
this.refreshAnimation?.destroy(this.refreshingAnimName)
this.refreshAnimation = lottie.loadAnimation({
container: this.refreshContext,
if (this.refreshingAnimation == null || this.refreshingAnimationDestroy) {
this.refreshingAnimation?.destroy(this.refreshingAnimName)
this.refreshingAnimation = lottie.loadAnimation({
container: this.refreshingContext,
renderer: 'canvas', // canvas 渲染模式
loop: 10,
autoplay: true,
name: this.refreshingAnimName,
path: "lottie/refresh_step2.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
})
this.addRefreshAnimListener()
this.refreshingAnimationDestroy = false
this.addRefreshingAnimListener()
}
// Logger.error('zzzz', 'animate2, 2')
}
... ... @@ -242,6 +255,13 @@ export struct CustomPullToRefresh {
});
}
private addRefreshingAnimListener() {
this.refreshingAnimation?.addEventListener('destroy', (args: Object): void => {
// Logger.error('zzzz', "lottie destroy");
this.refreshingAnimationDestroy = true
});
}
loadMoreAnimate() {
if (this.loadMoreAnimation == null) {
this.loadMoreAnimation = lottie.loadAnimation({
... ...