nativescript-lottie v5.0.4

Changelog

All notable changes to this project will be documented in the changelog.

Demo Screen

The .gif does not do the fluid animations justice

Installation

To install execute:

NativeScript Version 7+:

ns plugin add nativescript-lottie

NativeScript Version prior to 7:

tns plugin add nativescript-lottie@4.0.1

Usage

NativeScript (Core)

XML

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:Lottie="nativescript-lottie" navigatingTo="navigatingTo" class="page">
    <StackLayout>
        <Lottie:LottieView src="PinJump.json" height="130" loop="true" autoPlay="true" loaded="yourLoadedEvent" />
    </StackLayout>
</Page>

TS

import { LottieView } from "nativescript-lottie";

public yourLoadedEvent(args) {
    this._myLottie = args.object as LottieView; /// this is the instance of the LottieAnimationView
    this._myLottie.loop = false; // to get the completionBlock to fire the animation can not be looping because then it will never "complete"
    this._myLottie.completionBlock = (bool) => {
        console.log('lottie animaton complete', bool);
    }
}

NativeScript Angular

XML

<StackLayout>
    <LottieView width="100" height="150" [src]="src" [loop]="loop" [autoPlay]="autoPlay" (loaded)="lottieViewLoaded($event)"></LottieView>
</StackLayout>

Component

import { Component } from '@angular/core';
import { registerElement } from '@nativescript/angular';
import { LottieView } from 'nativescript-lottie';

registerElement('LottieView', () => LottieView);

@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<string>;

  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 = <LottieView>event.object;
    this._myLottie.loop = false; // to get the completionBlock to fire the animation can not be looping because then it will never "complete"
    this._myLottie.completionBlock = bool => {
      console.log('lottie animaton complete', bool);
    };
  }
}

NativeScript Vue

Bootstrap (probably in app.js)

Vue.registerElement(
  'LottieView',
  () => require('nativescript-lottie').LottieView
);

Component

<template>
    <Page class="page">
        <StackLayout>
            <LottieView height="130" src="PinJump.json" :loop="true" :autoPlay="true" @loaded="lottieViewLoaded"></LottieView>
        </StackLayout>
    </page
</template>

<script>
    export default {
        methods: {
            lottieViewLoaded(args) {
                this._lottieView = args.object;
            },
        },
        data() {
            return {
                _lottieView: null,
            }
        }
    };
</script>

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

Methods

Contributors

Contributing

1. Fork and clone the repository
2. cd nativescript-lottie && npm run demo.android (or demo.ios)
3. Changes in the src directory of the plugin will sync to the demo app for testing changes.
4. Create a PR with proposed changes.