Skip to content

Commit 2e8c9b2

Browse files
farfromrefugfarfromrefug
committed
chore: update
1 parent 7b28195 commit 2e8c9b2

File tree

3 files changed

+121
-131
lines changed

3 files changed

+121
-131
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -210,8 +210,8 @@ Place your animations files in your `app/App_Resources/iOS/` folder.
210210
| `isAnimating` | `boolean` | None | Returns true if the LottieView is animating, else false. |
211211
| `playAnimation` | `void` | None | Plays the animation for the LottieView instance. |
212212
| `playAnimationFromProgressToProgress` | `void` | startProgress, endProgress | Plays the animation for the LottieView instance from the specified start and end progress values (between 0 and 1). |
213-
| `setColorValueDelegateForKeyPath` | `void` | value, keyPath | Sets the provided color value on each property that matches the specified keyPath in the LottieView instance. |
214-
| `setOpacityValueDelegateForKeyPath` | `void` | value, keyPath | Sets the provided opacity value (0 - 1) on each property that matches the specified keyPath in the LottieView instance. |
213+
| `setColor` | `void` | value, keyPath | Sets the provided color value on each property that matches the specified keyPath in the LottieView instance. |
214+
| `setOpacity` | `void` | value, keyPath | Sets the provided opacity value (0 - 1) on each property that matches the specified keyPath in the LottieView instance. |
215215

216216
## Contributors
217217

‎demo-angular/src/app/home/home.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,14 +97,14 @@ export class HomeComponent {
9797
public setTheme(value) {
9898
const color = new Color(value);
9999
ANDROID_WAVE_KEYPATHS.forEach(keyPath => {
100-
this._lottieViewTwo.setColorValueDelegateForKeyPath(color, [...keyPath]);
100+
this._lottieViewTwo.setColor(color, [...keyPath]);
101101
});
102102
}
103103

104104
public setSecondLottieRandomOpacity() {
105105
const opacity = getRandomWithPrecision(2);
106106
ANDROID_WAVE_KEYPATHS.forEach(keyPath => {
107-
this._lottieViewTwo.setOpacityValueDelegateForKeyPath(opacity, [
107+
this._lottieViewTwo.setOpacity(opacity, [
108108
...keyPath
109109
]);
110110
});

‎demo/app/main-view-model.ts

Lines changed: 117 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,129 @@
1-
import { Observable, Color } from '@nativescript/core';
1+
import { Color, Observable } from '@nativescript/core';
22
import { LottieView } from '@nativescript-community/ui-lottie';
33

44
const ANDROID_WAVE_KEYPATHS = [
5-
['Shirt', 'Group 5', 'Fill 1'],
6-
['LeftArmWave', 'LeftArm', 'Group 6', 'Fill 1'],
7-
['RightArm', 'Group 6', 'Fill 1']
5+
['Shirt', 'Group 5', 'Fill 1'],
6+
['LeftArmWave', 'LeftArm', 'Group 6', 'Fill 1'],
7+
['RightArm', 'Group 6', 'Fill 1']
88
];
99

1010
export class DemoViewModel extends Observable {
11-
public animationIndex: number = 0;
12-
public animations: string[] = [
13-
'Mobilo/B',
14-
'Mobilo/A.json',
15-
'Mobilo/D.json',
16-
'Mobilo/N',
17-
'Mobilo/R',
18-
'Mobilo/S.json'
19-
];
20-
public thirdLottieProgressTo: string = 'Try it!';
21-
22-
/**
23-
* For demoing cycling through the sample animations.
24-
*/
25-
private _lottieViewOne: LottieView;
26-
27-
/**
28-
* For demoing changing colors and opacity dynamically at runtime.
29-
*/
30-
private _lottieViewTwo: LottieView;
31-
32-
/**
33-
* For demoing partially animating a composition.
34-
*/
35-
private _lottieViewThree: LottieView;
36-
37-
/**
38-
* For demoing the completion block (i.e for async work).
39-
*/
40-
private _lottieViewFour: LottieView;
41-
42-
public firstLottieLoaded(event) {
43-
this._lottieViewOne = event.object as LottieView;
44-
this._lottieViewOne.autoPlay = true;
45-
this._lottieViewOne.loop = true;
46-
this._lottieViewOne.src = this.animations[this.animationIndex];
47-
this._lottieViewOne.completionBlock = (animationFinished: boolean) => {
48-
console.log(`completionBlock animationFinished: ${animationFinished}`);
49-
};
50-
}
51-
52-
public secondLottieLoaded(event) {
53-
this._lottieViewTwo = event.object as LottieView;
54-
this._lottieViewTwo.autoPlay = true;
55-
this._lottieViewTwo.loop = true;
56-
this._lottieViewTwo.src = 'AndroidWave.json';
57-
}
58-
59-
public thirdLottieLoaded(event) {
60-
this._lottieViewThree = event.object as LottieView;
61-
this._lottieViewThree.autoPlay = false;
62-
this._lottieViewThree.loop = false;
63-
this._lottieViewThree.src = 'Mobilo/N';
64-
}
65-
66-
public fourthLottieLoaded(event) {
67-
this._lottieViewFour = event.object as LottieView;
68-
this._lottieViewFour.autoPlay = false;
69-
this._lottieViewFour.src = 'doughnut';
70-
71-
this.setFourthLottieToLoadingState();
72-
}
73-
74-
public next() {
75-
this.animationIndex++;
76-
if (this.animationIndex >= this.animations.length) {
77-
this.animationIndex = 0;
11+
public animationIndex: number = 0;
12+
public animations: string[] = ['Mobilo/B', 'Mobilo/A.json', 'Mobilo/D.json', 'Mobilo/N', 'Mobilo/R', 'Mobilo/S.json'];
13+
public thirdLottieProgressTo: string = 'Try it!';
14+
15+
/**
16+
* For demoing cycling through the sample animations.
17+
*/
18+
private _lottieViewOne: LottieView;
19+
20+
/**
21+
* For demoing changing colors and opacity dynamically at runtime.
22+
*/
23+
private _lottieViewTwo: LottieView;
24+
25+
/**
26+
* For demoing partially animating a composition.
27+
*/
28+
private _lottieViewThree: LottieView;
29+
30+
/**
31+
* For demoing the completion block (i.e for async work).
32+
*/
33+
private _lottieViewFour: LottieView;
34+
35+
public firstLottieLoaded(event) {
36+
this._lottieViewOne = event.object as LottieView;
37+
this._lottieViewOne.autoPlay = true;
38+
this._lottieViewOne.loop = true;
39+
this._lottieViewOne.src = this.animations[this.animationIndex];
40+
this._lottieViewOne.completionBlock = (animationFinished: boolean) => {
41+
console.log(`completionBlock animationFinished: ${animationFinished}`);
42+
};
7843
}
79-
this._lottieViewOne.src = this.animations[this.animationIndex];
80-
}
81-
82-
public toggleAnimation() {
83-
if (this._lottieViewOne.isAnimating()) {
84-
this._lottieViewOne.cancelAnimation();
85-
} else {
86-
this._lottieViewOne.playAnimation();
44+
45+
public secondLottieLoaded(event) {
46+
this._lottieViewTwo = event.object as LottieView;
47+
this._lottieViewTwo.autoPlay = true;
48+
this._lottieViewTwo.loop = true;
49+
this._lottieViewTwo.src = 'AndroidWave.json';
50+
}
51+
52+
public thirdLottieLoaded(event) {
53+
this._lottieViewThree = event.object as LottieView;
54+
this._lottieViewThree.autoPlay = false;
55+
this._lottieViewThree.loop = false;
56+
this._lottieViewThree.src = 'Mobilo/N';
57+
}
58+
59+
public fourthLottieLoaded(event) {
60+
this._lottieViewFour = event.object as LottieView;
61+
this._lottieViewFour.autoPlay = false;
62+
this._lottieViewFour.src = 'doughnut';
63+
64+
this.setFourthLottieToLoadingState();
65+
}
66+
67+
public next() {
68+
this.animationIndex++;
69+
if (this.animationIndex >= this.animations.length) {
70+
this.animationIndex = 0;
71+
}
72+
this._lottieViewOne.src = this.animations[this.animationIndex];
73+
}
74+
75+
public toggleAnimation() {
76+
if (this._lottieViewOne.isAnimating()) {
77+
this._lottieViewOne.cancelAnimation();
78+
} else {
79+
this._lottieViewOne.playAnimation();
80+
}
81+
}
82+
83+
public toggleLoop() {
84+
this._lottieViewOne.loop = !this._lottieViewOne.loop;
85+
}
86+
87+
public setTheme = value => () => {
88+
const color = new Color(value);
89+
ANDROID_WAVE_KEYPATHS.forEach(keyPath => {
90+
this._lottieViewTwo.setColor(color, [...keyPath]);
91+
});
92+
};
93+
94+
public setSecondLottieRandomOpacity() {
95+
const opacity = getRandomWithPrecision(2);
96+
ANDROID_WAVE_KEYPATHS.forEach(keyPath => {
97+
this._lottieViewTwo.setOpacity(opacity, [
98+
...keyPath
99+
});
100+
}
101+
102+
public setThirdLottieRandomProgress() {
103+
const toProgress = getRandomWithPrecision(2);
104+
this.set('thirdLottieProgressTo', `Animated to ${toProgress}`);
105+
this._lottieViewThree.playAnimationFromProgressToProgress(0, toProgress);
106+
}
107+
108+
public setFourthLottieToLoadingState() {
109+
this._lottieViewFour.loop = true;
110+
this._lottieViewFour.playAnimationFromProgressToProgress(0, 0.5);
111+
}
112+
113+
public setFourthLottieToLoadedState() {
114+
this._lottieViewFour.completionBlock = (animationFinished: boolean) => {
115+
console.log(`lottieViewFour completionBlock animationFinished: ${animationFinished}`);
116+
117+
this._lottieViewFour.playAnimationFromProgressToProgress(0.5, 0.85);
118+
this._lottieViewFour.completionBlock = null;
119+
};
120+
121+
// Trigger the completion block by disabling looping and allowing the final loop to lapse.
122+
this._lottieViewFour.loop = false;
87123
}
88-
}
89-
90-
public toggleLoop() {
91-
this._lottieViewOne.loop = !this._lottieViewOne.loop;
92-
}
93-
94-
public setTheme = value => () => {
95-
const color = new Color(value);
96-
ANDROID_WAVE_KEYPATHS.forEach(keyPath => {
97-
this._lottieViewTwo.setColorValueDelegateForKeyPath(color, [...keyPath]);
98-
});
99-
};
100-
101-
public setSecondLottieRandomOpacity() {
102-
const opacity = getRandomWithPrecision(2);
103-
ANDROID_WAVE_KEYPATHS.forEach(keyPath => {
104-
this._lottieViewTwo.setOpacityValueDelegateForKeyPath(opacity, [
105-
...keyPath
106-
]);
107-
});
108-
}
109-
110-
public setThirdLottieRandomProgress() {
111-
const toProgress = getRandomWithPrecision(2);
112-
this.set('thirdLottieProgressTo', `Animated to ${toProgress}`);
113-
this._lottieViewThree.playAnimationFromProgressToProgress(0, toProgress);
114-
}
115-
116-
public setFourthLottieToLoadingState() {
117-
this._lottieViewFour.loop = true;
118-
this._lottieViewFour.playAnimationFromProgressToProgress(0, 0.5);
119-
}
120-
121-
public setFourthLottieToLoadedState() {
122-
this._lottieViewFour.completionBlock = (animationFinished: boolean) => {
123-
console.log(
124-
`lottieViewFour completionBlock animationFinished: ${animationFinished}`
125-
);
126-
127-
this._lottieViewFour.playAnimationFromProgressToProgress(0.5, 0.85);
128-
this._lottieViewFour.completionBlock = null;
129-
};
130-
131-
// Trigger the completion block by disabling looping and allowing the final loop to lapse.
132-
this._lottieViewFour.loop = false;
133-
}
134124
}
135125

136126
function getRandomWithPrecision(precision?: number): number {
137-
const multiplier = Math.pow(10, precision || 0);
138-
return Math.round(Math.random() * multiplier) / multiplier;
127+
const multiplier = Math.pow(10, precision || 0);
128+
return Math.round(Math.random() * multiplier) / multiplier;
139129
}

0 commit comments

Comments
 (0)