Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nativescript-community/ui-lottie
NativeScript plugin to expose Airbnb Lottie
https://github.com/nativescript-community/ui-lottie
airbnb-lottie android animation ios lottie nativescript nativescript-plugin nstudio typescript
Last synced: 1 day ago
JSON representation
NativeScript plugin to expose Airbnb Lottie
- Host: GitHub
- URL: https://github.com/nativescript-community/ui-lottie
- Owner: nativescript-community
- License: other
- Created: 2017-02-02T02:48:08.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-30T09:05:53.000Z (8 months ago)
- Last Synced: 2024-10-29T21:54:25.050Z (2 months ago)
- Topics: airbnb-lottie, android, animation, ios, lottie, nativescript, nativescript-plugin, nstudio, typescript
- Language: TypeScript
- Homepage: https://github.com/airbnb/lottie-android
- Size: 5.67 MB
- Stars: 177
- Watchers: 7
- Forks: 57
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome-lottie - NativeScript bindings
README
@nativescript-community/ui-lottie
NativeScript plugin to expose AirBnB Lottie library
| 
|
| --- | ----------- |
| iOS Demo | Android Demo |
[](#table-of-contents)
[](#table-of-contents)
## Table of Contents
* [Installation](#installation)
* [Usage](#usage)
* [NativeScript (Core)](#nativescript-core)
* [XML](#xml)
* [TS](#ts)
* [NativeScript Angular](#nativescript-angular)
* [Module](#module)
* [XML](#xml-1)
* [Component](#component)
* [NativeScript Vue](#nativescript-vue)
* [Bootstrap](#bootstrap)
* [Component](#component-1)
* [Assets](#assets)
* [Android](#android)
* [iOS](#ios)
* [Properties (bindable)](#properties-bindable)
* [Properties](#properties)
* [Methods](#methods)
* [Contributors](#contributors)
* [Demos and Development](#demos-and-development)
* [Repo Setup](#repo-setup)
* [Build](#build)
* [Demos](#demos)
* [Contributing](#contributing)
* [Update repo ](#update-repo-)
* [Update readme ](#update-readme-)
* [Update doc ](#update-doc-)
* [Publish](#publish)
* [modifying submodules](#modifying-submodules)
* [Questions](#questions)
[](#installation)
[](#installation)
## Installation
Run the following command from the root of your project:
`ns plugin add @nativescript-community/ui-lottie`
[](#usage)
[](#usage)
## Usage
### NativeScript (Core)
#### XML
```xml
```
#### TS
```typescript
import { LottieView } from "@nativescript-community/ui-lottie";
public yourLoadedEvent(args) {
this._myLottie = args.object as LottieView; /// this is the instance of the LottieAnimationView
}
```
---
### NativeScript Angular
#### Module
First you need to include the `NativeScriptLottieModule` in your `app.module.ts`
```typescript
import { NativeScriptLottieModule} from '@nativescript-community/ui-lottie/angular';
@NgModule({
imports: [
NativeScriptLottieModule
],
...
})
```
#### XML
```xml
```
#### Component
```typescript
import { Component } from '@angular/core';
import { LottieView } from '@nativescript-community/ui-lottie';
@Component({
templateUrl: 'home.component.html',
moduleId: module.id
})
export class HomeComponent {
public loop: boolean = true;
public src: string;
public autoPlay: boolean = true;
public animations: Array;
private _lottieView: LottieView;
constructor() {
this.animations = [
'Mobilo/A.json',
'Mobilo/D.json',
'Mobilo/N.json',
'Mobilo/S.json'
];
this.src = this.animations[0];
}
lottieViewLoaded(event) {
this._lottieView = event.object;
}
}
```
---
[](#nativescript-vue)
[](#nativescript-vue)
## NativeScript Vue
### Bootstrap
If you want to use this plugin with Vue, do this in your `app.js` or `main.js`:
```javascript
import LottieView from '@nativescript-community/ui-lottie/vue';
Vue.use(LottieView);
```
This will install and register `LottieView` component to your `Vue` instance and now you can use the plugin.
### Component
```xml
export default {
methods: {
lottieViewLoaded(args) {
this._lottieView = args.object;
},
},
data() {
return {
_lottieView: null,
}
}
};
```
---
[](#assets)
[](#assets)
## Assets
:fire: You can find animations in the `sample-effects` folder.
### Android
Place your animation files in the NS app's `app/App_Resources/Android/src/main/assets` folder.
Note: In a nativescript-vue project the above folder may not exist. Place the files in `platforms/android/app/src/main/assets`.
### iOS
Place your animations files in your `app/App_Resources/iOS/` folder.
[](#properties-bindable)
[](#properties-bindable)
## Properties (bindable)
| Property | Type | Default | Description |
| ---------- | --------- | ------- | --------------------------------------------- |
| `autoPlay` | `boolean` | `false` | Start LottieView animation on load if `true`. |
| `loop` | `boolean` | `false` | Loop continuously animation if `true`. |
| `src` | `string` | `null` | Animation path to `.json` file. |
[](#properties)
[](#properties)
## Properties
| Property | Type | Default | Description |
| ----------------- | ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `completionBlock` | `(boolean) => void` | `null` | Completion block to be executed upon completion of the animation. The animation is considered complete when it finishes playing and is no longer looping. |
| `duration` | `number` | `null` | Get the duration of the animation. |
| `progress` | `number` | `0` | Get/set the progress of the animation. |
| `speed` | `number` | `1` | Get/set the speed of the animation. |
[](#methods)
[](#methods)
## Methods
| Method | Return | Parameters | Description |
| ------------------------------------- | --------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `cancelAnimation` | `void` | None | Pauses the animation for the LottieView instance. |
| `isAnimating` | `boolean` | None | Returns true if the LottieView is animating, else false. |
| `playAnimation` | `void` | None | Plays the animation for the LottieView instance. |
| `playAnimationFromProgressToProgress` | `void` | startProgress, endProgress | Plays the animation for the LottieView instance from the specified start and end progress values (between 0 and 1). |
| `setColor` | `void` | value, keyPath | Sets the provided color value on each property that matches the specified keyPath in the LottieView instance. |
| `setOpacity` | `void` | value, keyPath | Sets the provided opacity value (0 - 1) on each property that matches the specified keyPath in the LottieView instance. |
[](#contributors)
[](#contributors)
## Contributors
| [
](https://github.com/bradmartin) | [
](https://github.com/NathanWalker/) | [
](https://github.com/rhanb) | [
](https://github.com/hamdiwanis) |
| :-----------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: |
| [bradmartin](https://github.com/bradmartin) | [NathanWalker](https://github.com/NathanWalker) | [rhanb](https://github.com/rhanb) | [HamdiWanis](https://github.com/hamdiwanis) |
| [
](https://github.com/itstheceo) | [
](https://github.com/mudlabs) |
| :--------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| [itstheceo](https://github.com/itstheceo) | [mudlabs](https://github.com/mudlabs) |
[](#demos-and-development)
[](#demos-and-development)
## Demos and Development
### Repo Setup
The repo uses submodules. If you did not clone with ` --recursive` then you need to call
```
git submodule update --init
```
The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.
To develop and test:
if you use `yarn` then run `yarn`
if you use `pnpm` then run `pnpm i`
**Interactive Menu:**
To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
### Build
```bash
npm run build.all
```
WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`
### Demos
```bash
npm run demo.[ng|react|svelte|vue].[ios|android]
npm run demo.svelte.ios # Example
```
Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`
Instead you work in `demo-snippets/[ng|react|svelte|vue]`
You can start from the `install.ts` of each flavor to see how to register new demos
[](#contributing)
[](#contributing)
## Contributing
### Update repo
You can update the repo files quite easily
First update the submodules
```bash
npm run update
```
Then commit the changes
Then update common files
```bash
npm run sync
```
Then you can run `yarn|pnpm`, commit changed files if any
### Update readme
```bash
npm run readme
```
### Update doc
```bash
npm run doc
```
### Publish
The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)
Simply run
```shell
npm run publish
```
### modifying submodules
The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
One easy solution is t modify `~/.gitconfig` and add
```
[url "ssh://[email protected]/"]
pushInsteadOf = https://github.com/
```
[](#questions)
[](#questions)
## Questions
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
[](#demos-and-development)
## Demos and Development
### Repo Setup
The repo uses submodules. If you did not clone with ` --recursive` then you need to call
```
git submodule update --init
```
The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.
To develop and test:
if you use `yarn` then run `yarn`
if you use `pnpm` then run `pnpm i`
**Interactive Menu:**
To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
### Build
```bash
npm run build.all
```
WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`
### Demos
```bash
npm run demo.[ng|react|svelte|vue].[ios|android]
npm run demo.svelte.ios # Example
```
Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`
Instead you work in `demo-snippets/[ng|react|svelte|vue]`
You can start from the `install.ts` of each flavor to see how to register new demos
[](#contributing)
## Contributing
### Update repo
You can update the repo files quite easily
First update the submodules
```bash
npm run update
```
Then commit the changes
Then update common files
```bash
npm run sync
```
Then you can run `yarn|pnpm`, commit changed files if any
### Update readme
```bash
npm run readme
```
### Update doc
```bash
npm run doc
```
### Publish
The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)
Simply run
```shell
npm run publish
```
### modifying submodules
The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
One easy solution is t modify `~/.gitconfig` and add
```
[url "ssh://[email protected]/"]
pushInsteadOf = https://github.com/
```
[](#questions)
## Questions
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).