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: 4 months 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 (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-11-22T14:56:03.000Z (7 months ago)
- Last Synced: 2024-03-13T12:12:56.640Z (4 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.65 MB
- Stars: 175
- Watchers: 7
- Forks: 58
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Lists
- awesome-lottie - NativeScript bindings
README
nativescript-community/ui-lottie
NativeScript plugin to expose Airbnb Lottie for awesome animations.
## Changelog
All notable changes to this project will be documented in the [changelog](CHANGELOG.md).
## Demo Screen
_The .gif does not do the fluid animations justice_
## Installation
To install execute:
```
tns plugin add @nativescript-community/ui-lottie
```
## 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
### 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
: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)
| 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
| 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
| 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
| [
](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) |