Need help with nativescript-lottie?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

nativescript-community
152 Stars 49 Forks Other 238 Commits 16 Opened issues

Description

NativeScript plugin to expose Airbnb Lottie

Services available

!
?

Need anything else?

Contributors list

# 66,190
TypeScr...
natives...
C
Svelte
131 commits
# 21,589
TypeScr...
natives...
Objecti...
mpandro...
31 commits
# 104,674
HTML
fluid
Shell
CSS
15 commits
# 9,663
Objecti...
TypeScr...
natives...
ionic
11 commits
# 473,569
HTML
Shell
CSS
lottie
9 commits
# 415,780
HTML
Shell
CSS
lottie
8 commits
# 631,683
HTML
Shell
CSS
lottie
1 commit
# 65,738
TypeScr...
natives...
natives...
Angular
1 commit
# 134,065
CSS
HTML
Shell
Android
1 commit
# 76,703
Swift
cocoapo...
mac
lottie
1 commit
# 178,287
HTML
CSS
natives...
natives...
1 commit
# 199,093
Shell
Android
Angular
java8
1 commit
# 85,086
HTML
CSS
iOS
Angular
1 commit

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-community/ui-lottie

NativeScript Version prior to 7:

tns plugin add [email protected]

Usage

NativeScript (Core)

XML

    
        
    

TS

import { LottieView } from "@nativescript-community/ui-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

    

Component

import { Component } from '@angular/core';
import { registerElement } from '@nativescript/angular';
import { LottieView } from '@nativescript-community/ui-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; 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-community/ui-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 |

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.

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.