Skip to content

Commit be1fc99

Browse files
jeromelabanjeromelaban
authored
Merge pull request #19689 from unoplatform/mergify/bp/release/stable/5.6/pr-19685
fix: uno lottie animation exception (backport #19685)
2 parents b6e37c5 + 21a5fe6 commit be1fc99

File tree

2 files changed

+94
-59
lines changed

2 files changed

+94
-59
lines changed

‎src/AddIns/Uno.UI.Lottie/WasmScripts/uno-lottie.js

+47-29
Original file line numberDiff line numberDiff line change
@@ -27,60 +27,78 @@ var Uno;
2727
}
2828
static stop(elementId) {
2929
Lottie.withPlayer(p => {
30-
const a = Lottie._runningAnimations[elementId].animation;
31-
a.stop();
32-
Lottie.raiseState(a);
30+
const currentAnimation = Lottie._runningAnimations[elementId];
31+
if (currentAnimation) {
32+
const a = currentAnimation.animation;
33+
a.stop();
34+
Lottie.raiseState(a);
35+
}
3336
});
3437
return "ok";
3538
}
3639
static play(elementId, fromProgress, toProgress, looped) {
3740
Lottie.withPlayer(p => {
38-
const a = Lottie._runningAnimations[elementId].animation;
39-
a.loop = looped;
40-
const fromFrame = fromProgress * Lottie._numberOfFrames;
41-
const toFrame = toProgress * Lottie._numberOfFrames;
42-
//Set forceFlag to true in order to force animation to start right away
43-
//Ensures calling play multiple times in quick succession plays the animation properly
44-
a.playSegments([fromFrame, toFrame], true);
45-
Lottie.raiseState(a);
41+
const currentAnimation = Lottie._runningAnimations[elementId];
42+
if (currentAnimation) {
43+
const a = currentAnimation.animation;
44+
a.loop = looped;
45+
const fromFrame = fromProgress * Lottie._numberOfFrames;
46+
const toFrame = toProgress * Lottie._numberOfFrames;
47+
//Set forceFlag to true in order to force animation to start right away
48+
//Ensures calling play multiple times in quick succession plays the animation properly
49+
a.playSegments([fromFrame, toFrame], true);
50+
Lottie.raiseState(a);
51+
}
4652
});
4753
return "ok";
4854
}
4955
static kill(elementId) {
5056
Lottie.withPlayer(p => {
51-
Lottie._runningAnimations[elementId].animation.destroy();
52-
delete Lottie._runningAnimations[elementId];
57+
const currentAnimation = Lottie._runningAnimations[elementId];
58+
if (currentAnimation) {
59+
currentAnimation.animation.destroy();
60+
delete Lottie._runningAnimations[elementId];
61+
}
5362
});
5463
return "ok";
5564
}
5665
static pause(elementId) {
5766
Lottie.withPlayer(p => {
58-
const a = Lottie._runningAnimations[elementId].animation;
59-
a.pause();
60-
Lottie.raiseState(a);
67+
const currentAnimation = Lottie._runningAnimations[elementId];
68+
if (currentAnimation) {
69+
const a = currentAnimation.animation;
70+
a.pause();
71+
Lottie.raiseState(a);
72+
}
6173
});
6274
return "ok";
6375
}
6476
static resume(elementId) {
6577
Lottie.withPlayer(p => {
66-
const a = Lottie._runningAnimations[elementId].animation;
67-
a.play();
68-
Lottie.raiseState(a);
78+
const currentAnimation = Lottie._runningAnimations[elementId];
79+
if (currentAnimation) {
80+
const a = currentAnimation.animation;
81+
a.play();
82+
Lottie.raiseState(a);
83+
}
6984
});
7085
return "ok";
7186
}
7287
static setProgress(elementId, progress) {
7388
Lottie.withPlayer(p => {
74-
const animation = Lottie._runningAnimations[elementId].animation;
75-
let frame = Lottie._numberOfFrames * progress;
76-
if (frame < animation.firstFrame) {
77-
frame = frame - animation.firstFrame;
78-
}
79-
else {
80-
frame = animation.getDuration(true) * progress;
89+
const currentAnimation = Lottie._runningAnimations[elementId];
90+
if (currentAnimation) {
91+
const animation = currentAnimation.animation;
92+
let frame = Lottie._numberOfFrames * progress;
93+
if (frame < animation.firstFrame) {
94+
frame = frame - animation.firstFrame;
95+
}
96+
else {
97+
frame = animation.getDuration(true) * progress;
98+
}
99+
animation.goToAndStop(frame, true);
100+
Lottie.raiseState(animation);
81101
}
82-
animation.goToAndStop(frame, true);
83-
Lottie.raiseState(animation);
84102
});
85103
return "ok";
86104
}
@@ -182,7 +200,7 @@ var Uno;
182200
loop: true,
183201
autoplay: properties.autoplay,
184202
name: `Lottie-${properties.elementId}`,
185-
renderer: "svg",
203+
renderer: "svg", // https://github.com/airbnb/lottie-web/wiki/Features
186204
container: containerElement,
187205
rendererSettings: {
188206
// https://github.com/airbnb/lottie-web/wiki/Renderer-Settings

‎src/AddIns/Uno.UI.Lottie/ts/Uno.UI.Lottie.ts

+47-30
Original file line numberDiff line numberDiff line change
@@ -63,72 +63,89 @@ namespace Uno.UI {
6363

6464
public static stop(elementId: number): string {
6565
Lottie.withPlayer(p => {
66-
const a = Lottie._runningAnimations[elementId].animation;
67-
a.stop();
68-
Lottie.raiseState(a);
66+
const currentAnimation = Lottie._runningAnimations[elementId];
67+
if (currentAnimation) {
68+
const a = currentAnimation.animation;
69+
a.stop();
70+
Lottie.raiseState(a);
71+
}
6972
});
7073

7174
return "ok";
7275
}
7376

7477
public static play(elementId: number, fromProgress: number, toProgress: number, looped: boolean): string {
7578
Lottie.withPlayer(p => {
76-
const a = Lottie._runningAnimations[elementId].animation;
77-
a.loop = looped;
78-
79-
const fromFrame = fromProgress * Lottie._numberOfFrames;
80-
const toFrame = toProgress * Lottie._numberOfFrames;
81-
82-
//Set forceFlag to true in order to force animation to start right away
83-
//Ensures calling play multiple times in quick succession plays the animation properly
84-
a.playSegments([fromFrame, toFrame], true);
85-
Lottie.raiseState(a);
79+
const currentAnimation = Lottie._runningAnimations[elementId];
80+
if (currentAnimation){
81+
const a = currentAnimation.animation;
82+
a.loop = looped;
83+
84+
const fromFrame = fromProgress * Lottie._numberOfFrames;
85+
const toFrame = toProgress * Lottie._numberOfFrames;
86+
87+
//Set forceFlag to true in order to force animation to start right away
88+
//Ensures calling play multiple times in quick succession plays the animation properly
89+
a.playSegments([fromFrame, toFrame], true);
90+
Lottie.raiseState(a);
91+
}
8692
});
8793

8894
return "ok";
8995
}
9096

9197
public static kill(elementId: number): string {
9298
Lottie.withPlayer(p => {
93-
Lottie._runningAnimations[elementId].animation.destroy();
94-
delete Lottie._runningAnimations[elementId];
99+
const currentAnimation = Lottie._runningAnimations[elementId];
100+
if (currentAnimation) {
101+
currentAnimation.animation.destroy();
102+
delete Lottie._runningAnimations[elementId];
103+
}
95104
});
96105

97106
return "ok";
98107
}
99108

100109
public static pause(elementId: number): string {
101110
Lottie.withPlayer(p => {
102-
const a = Lottie._runningAnimations[elementId].animation;
103-
a.pause();
104-
Lottie.raiseState(a);
111+
const currentAnimation = Lottie._runningAnimations[elementId];
112+
if (currentAnimation) {
113+
const a = currentAnimation.animation;
114+
a.pause();
115+
Lottie.raiseState(a);
116+
}
105117
});
106118

107119
return "ok";
108120
}
109121

110122
public static resume(elementId: number): string {
111123
Lottie.withPlayer(p => {
112-
const a = Lottie._runningAnimations[elementId].animation;
113-
a.play();
114-
Lottie.raiseState(a);
124+
const currentAnimation = Lottie._runningAnimations[elementId];
125+
if (currentAnimation) {
126+
const a = currentAnimation.animation;
127+
a.play();
128+
Lottie.raiseState(a);
129+
}
115130
});
116131

117132
return "ok";
118133
}
119134

120135
public static setProgress(elementId: number, progress: number): string {
121136
Lottie.withPlayer(p => {
122-
const animation = Lottie._runningAnimations[elementId].animation;
123-
let frame = Lottie._numberOfFrames * progress;
124-
if (frame < (animation as any).firstFrame) {
125-
frame = frame - (animation as any).firstFrame
126-
} else {
127-
frame = animation.getDuration(true) * progress;
137+
const currentAnimation = Lottie._runningAnimations[elementId];
138+
if (currentAnimation) {
139+
const animation = currentAnimation.animation;
140+
let frame = Lottie._numberOfFrames * progress;
141+
if (frame < (animation as any).firstFrame) {
142+
frame = frame - (animation as any).firstFrame
143+
} else {
144+
frame = animation.getDuration(true) * progress;
145+
}
146+
animation.goToAndStop(frame, true);
147+
Lottie.raiseState(animation);
128148
}
129-
animation.goToAndStop(frame, true);
130-
Lottie.raiseState(animation);
131-
132149
});
133150

134151
return "ok";

0 commit comments

Comments
 (0)