Skip to content

Commit a7cd4c3

Browse files
bradmartinbradmartin
authored
Merge pull request #25 from hamdiwanis/master
feat: add dynamic properties
2 parents e745f17 + fa1201f commit a7cd4c3

File tree

15 files changed

+4983
-70
lines changed

15 files changed

+4983
-70
lines changed

‎README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ Place your animations files in your `app/App_Resources/iOS/` folder.
116116
| `autoPlay` | `boolean` | `false` | Start LottieView animation on load if `true`. |
117117
| `loop` | `boolean` | `false` | Loop continuously animation if `true`. |
118118
| `src` | `string` | `null` | Animation path to `.json` file. |
119+
| `theme` | `{ keyPath: string[], value: string }[]` | `null` | keyPath is the path to layer in your json file (i.e in After Effect) and value is the layer color |
119120

120121
## Properties
121122

@@ -134,6 +135,6 @@ Place your animations files in your `app/App_Resources/iOS/` folder.
134135

135136
## Contributors
136137

137-
| [<img alt="Brad Martin" src="https://avatars0.githubusercontent.com/u/6006148?s=400&v=4" width="117">](https://github.com/bradmartin) | [<img alt="Nathan Walker" src="https://avatars0.githubusercontent.com/u/457187?s=400&v=4" width="117">](https://github.com/NathanWalker/) | [<img alt="Jean-Baptiste Aniel" src="https://avatars3.githubusercontent.com/u/9477179?s=460&v=4" width="117">](https://github.com/rhanb) |
138-
| :-----------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: |
139-
| [bradmartin](https://github.com/bradmartin) | [NathanWalker](https://github.com/NathanWalker) | [rhanb](https://github.com/rhanb) |
138+
| [<img alt="Brad Martin" src="https://avatars0.githubusercontent.com/u/6006148?s=400&v=4" width="117">](https://github.com/bradmartin) | [<img alt="Nathan Walker" src="https://avatars0.githubusercontent.com/u/457187?s=400&v=4" width="117">](https://github.com/NathanWalker/) | [<img alt="Jean-Baptiste Aniel" src="https://avatars3.githubusercontent.com/u/9477179?s=460&v=4" width="117">](https://github.com/rhanb) | [<img alt="HamdiWanis" src="https://avatars3.githubusercontent.com/u/11708544?s=460&v=4" width="117">](https://github.com/hamdiwanis) |
139+
| :-----------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: |
140+
| [bradmartin](https://github.com/bradmartin) | [NathanWalker](https://github.com/NathanWalker) | [rhanb](https://github.com/rhanb) | [HamdiWanis](https://github.com/hamdiwanis) |

‎demo/app/App_Resources/Android/app.gradle‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
1-
// Add your native dependencies here:
1+
android {
2+
compileSdkVersion 27
3+
defaultConfig {
4+
targetSdkVersion 27
5+
generatedDensities = []
6+
applicationId = "org.nativescript.demo"
7+
}
8+
aaptOptions {
9+
additionalParameters "--no-version-vectors"
10+
}
11+
}
212

3-
// Uncomment to add recyclerview-v7 dependency
4-
//dependencies {
5-
// compile 'com.android.support:recyclerview-v7:+'
6-
//}
13+
def settingsGradlePath
14+
15+
if(project.hasProperty("appResourcesPath")){
16+
settingsGradlePath = "$project.appResourcesPath/Android/settings.gradle";
17+
} else {
18+
settingsGradlePath = "$rootDir/../../app/App_Resources/Android/settings.gradle";
19+
}
20+
21+
def settingsGradleFile = new File(settingsGradlePath);
22+
23+
if(settingsGradleFile.exists())
24+
{
25+
apply from: settingsGradleFile;
26+
}
727

8-
android {
9-
defaultConfig {
10-
generatedDensities = []
11-
applicationId = "org.nativescript.demo"
12-
}
13-
aaptOptions {
14-
additionalParameters "--no-version-vectors"
15-
}
16-
}

‎demo/app/main-page.xml‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<Page
2-
xmlns="http://schemas.nativescript.org/tns.xsd"
2+
xmlns="http://schemas.nativescript.org/tns.xsd"
33
xmlns:Lottie="nativescript-lottie" navigatingTo="navigatingTo" class="page">
44
<Page.actionBar>
55
<ActionBar title="Airbnb Lottie" icon="" class="action-bar"></ActionBar>
66
</Page.actionBar>
77
<ScrollView>
8-
<GridLayout rows="auto, auto, auto, auto" columns="*" class="p-10">
8+
<GridLayout rows="auto, auto, auto, auto, auto" columns="*" class="p-10">
99
<Label row="0" col="0" text="Yea... NativeScript supports Lottie - Thanks Airbnb!!!" class="h3" textWrap="true"></Label>
1010
<StackLayout row="1" orientation="vertical">
1111
<Lottie:LottieView src="{{ src }}" height="150" width="auto" loop="{{ loop }}" autoPlay="{{ autoPlay }}" loaded="{{ lottieLoaded }}" />
@@ -17,6 +17,23 @@
1717
<Button text="Start animation" class="p-10 btn btn-primary" tap="{{ startOrStopAnimation }}"></Button>
1818
<Button text="Stop animation" class="p-10 btn btn-primary" tap="{{ startOrStopAnimation }}"></Button>
1919
</StackLayout>
20+
21+
<StackLayout row="4">
22+
<Lottie:LottieView src="AndroidWave.json" theme="{{ theme }}" height="400" width="auto" loop="true" autoPlay="true"/>
23+
24+
<WrapLayout height="120" width="100%">
25+
<StackLayout height="50%" width="20%" backgroundColor="red" tap="{{ setTheme('red') }}"/>
26+
<StackLayout height="50%" width="20%" backgroundColor="gold" tap="{{ setTheme('gold') }}"/>
27+
<StackLayout height="50%" width="20%" backgroundColor="green" tap="{{ setTheme('green') }}"/>
28+
<StackLayout height="50%" width="20%" backgroundColor="orange" tap="{{ setTheme('orange') }}"/>
29+
<StackLayout height="50%" width="20%" backgroundColor="gray" tap="{{ setTheme('gray') }}"/>
30+
<StackLayout height="50%" width="20%" backgroundColor="#191970" tap="{{ setTheme('#191970') }}"/>
31+
<StackLayout height="50%" width="20%" backgroundColor="#00bfff" tap="{{ setTheme('#00bfff') }}"/>
32+
<StackLayout height="50%" width="20%" backgroundColor="#8b008b" tap="{{ setTheme('#8b008b') }}"/>
33+
<StackLayout height="50%" width="20%" backgroundColor="#2f4f4f" tap="{{ setTheme('#2f4f4f') }}"/>
34+
<StackLayout height="50%" width="20%" backgroundColor="#8b4513" tap="{{ setTheme('#8b4513') }}"/>
35+
</WrapLayout>
36+
</StackLayout>
2037
</GridLayout>
2138
</ScrollView>
2239
</Page>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export class HelloWorldModel extends Observable {
1010
public src: string;
1111
public loop: boolean;
1212
public autoPlay: boolean;
13+
public theme;
1314

1415
constructor() {
1516
super();
@@ -56,4 +57,13 @@ export class HelloWorldModel extends Observable {
5657
public toggleLoop() {
5758
this._myLottie.loop = !this._myLottie.loop;
5859
}
60+
61+
setTheme = color => () => {
62+
let theme = [
63+
{keyPath: ['Shirt', 'Group 5', 'Fill 1'], value: color},
64+
{keyPath: ['LeftArmWave', 'LeftArm','Group 6', 'Fill 1'], value: color},
65+
{keyPath: ['RightArm', 'Group 6', 'Fill 1'], value: color}
66+
];
67+
this.set('theme', theme);
68+
}
5969
}

0 commit comments

Comments
 (0)