nativescript-lottie

by bradmartin

NativeScript plugin to expose Airbnb Lottie

140 Stars 46 Forks Last release: over 1 year ago (3.0.2) Other 222 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

NativeScript-Lottie

NativeScript plugin to expose Airbnb Lottie for awesome animations.

Action Build npm npm

Changelog

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

Demo Screen

The .gif does not do the fluid animations justice

LottieView

Installation

To install execute:

NativeScript Version 7+:

ns plugin add nativescript-lottie

NativeScript Version prior to 7:

tns plugin add [email protected]

Usage

NativeScript (Core)

XML

    
        
    

TS

import { LottieView } from "nativescript-lottie";

public yourLoadedEvent(args) { this._myLottie = args.object as LottieView; /// this is the instance of the LottieAnimationView }


NativeScript Angular

XML

    

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;

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 (probably in app.js)

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

Component


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). | |
setColorValueDelegateForKeyPath
|
void
| value, keyPath | Sets the provided color value on each property that matches the specified keyPath in the LottieView instance. | |
setOpacityValueDelegateForKeyPath
|
void
| value, keyPath | Sets the provided opacity value (0 - 1) on each property that matches the specified keyPath in the LottieView instance. |

Contributors

| Brad Martin | Nathan Walker | Jean-Baptiste Aniel | HamdiWanis | | :-----------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | | bradmartin | NathanWalker | rhanb | HamdiWanis |

| itstheceo | itstheceo | | :--------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | | itstheceo | mudlabs |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.