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_ ![LottieView](screens/lottieDemo.gif) ## 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