LottieView.ets
2.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import lottie, { AnimationItem, AnimationSegment } from '@ohos/lottie';
@Component
export struct LottieView {
@Prop name: string
@Prop path: string
@Prop lottieWidth: number = 30
@Prop lottieHeight: number = 30
@Prop autoplay: boolean = false
@Prop loop: boolean = false
@Prop initialSegment?: AnimationSegment = [0, 120] // 动画起始帧
@Prop onReady: (animateItem: AnimationItem | null) => void // 动画初始化完成事件
@Prop onComplete?: () => void // 动画完成事件
private politeChickyController: CanvasRenderingContext2D =
new CanvasRenderingContext2D(); // CanvasRenderingContext2D对象
private animateItem: AnimationItem | null = null; // 初始化loadAnimation接口的返回对象
@Prop title: string
// 页面隐藏销毁动画
// onPageHide(): void {
// this.animateItem?.destroy()
//
// if (this.onComplete) {
// this.animateItem?.removeEventListener('complete', this.onComplete)
// }
// }
/**
* 加载动画
* @param autoplay 控制动画是否自动播放参数
*/
loadAnimation() {
// 销毁动画，减少缓存
if (this.animateItem !== null) {
this.animateItem.destroy(this.name);
this.animateItem = null;
}
this.animateItem = lottie.loadAnimation({
container: this.politeChickyController,
renderer: 'canvas',
loop: this.loop,
autoplay: this.autoplay,
name: this.name, // 动画名称
path: this.path, // hap包内动画资源文件路径，仅支持json格式
// initialSegment: this.initialSegment
})
if (this.initialSegment) {
this.animateItem.segments = this.initialSegment
}
if (this.onComplete) {
this.animateItem.addEventListener('complete', this.onComplete)
}
}
aboutToAppear(): void {
// console.error('XXXXZZZZ', '-------aboutToAppear-------' + this.title)
//lottie?.play()
// if(this.init){
// if(this.animateItem = null){
// this.loadAnimation();
// }
// }
}
aboutToDisappear(): void {
// console.error('XXXXZZZZ', '-------aboutToDisappear-------' + this.title)
// if(this.init){
// lottie?.destroy(this.name)
//
// if (this.onComplete) {
// this.animateItem?.removeEventListener('complete', this.onComplete)
// }
// this.animateItem = null;
// // }
}
build() {
Stack({ alignContent: Alignment.TopStart }) {
Canvas(this.politeChickyController)
.width(this.lottieWidth)
.height(this.lottieHeight)// .backgroundColor(Color.Black)
.onReady(() => {
this.loadAnimation();
if (this.onReady) {
this.onReady(this.animateItem)
}
})
.onDisAppear(() => {
lottie.destroy(this.name)
this.animateItem = null;
}).onAppear(()=>{
this.loadAnimation();
})
}
}
}