bradmartin / Nativescript Lottie
Licence: other
NativeScript plugin to expose Airbnb Lottie
Stars: ✭ 149
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Nativescript Lottie
Ti.animation
Airbnb Lottie Animation module for Axway Titanium SDK
Stars: ✭ 104 (-30.2%)
Mutual labels: lottie
U.movin
Unity library for rendering After Effects shape animations
Stars: ✭ 122 (-18.12%)
Mutual labels: lottie
Nativescript Floatingactionbutton
Material Design Floating Action Button in NativeScript apps.
Stars: ✭ 133 (-10.74%)
Mutual labels: nativescript
Nativescript Ar
Augmented Reality NativeScript plugin
Stars: ✭ 107 (-28.19%)
Mutual labels: nativescript
Nativescript Checkbox
NativeScript plugin for checkbox UI component
Stars: ✭ 113 (-24.16%)
Mutual labels: nativescript
Push Plugin
Contains the source code for the Push Plugin.
Stars: ✭ 122 (-18.12%)
Mutual labels: nativescript
Lottiesharp
Port of Lottie(https://github.com/airbnb/lottie-android)
Stars: ✭ 90 (-39.6%)
Mutual labels: lottie
Nativescript Pulltorefresh
♻️ NativeScript plugin for PullToRefresh controls
Stars: ✭ 144 (-3.36%)
Mutual labels: nativescript
Harrypotter
🧙🏻 Sample HarryPotter application based on MVVM architecture (ViewModel, LiveData, Repository, Coroutines, Koin or Dagger-Hilt)
Stars: ✭ 116 (-22.15%)
Mutual labels: lottie
Nativescript Fingerprint Auth
💅 👱♂️ Forget passwords, use a fingerprint scanner or facial recognition!
Stars: ✭ 130 (-12.75%)
Mutual labels: nativescript
Nativescript Drop Down
A NativeScript DropDown widget.
Stars: ✭ 107 (-28.19%)
Mutual labels: nativescript
Nativescript Ui Feedback
This repository is used for customer feedback regarding Telerik UI for NativeScript. The issues system here is used by customers who want to submit their feature requests or vote for existing ones.
Stars: ✭ 110 (-26.17%)
Mutual labels: nativescript
Nativescript Feedback
📢 Non-blocking textual feedback for your NativeScript app
Stars: ✭ 127 (-14.77%)
Mutual labels: nativescript
Nativescript App Templates
Monorepo for NativeScript app templates
Stars: ✭ 108 (-27.52%)
Mutual labels: nativescript
Motionlayoutsamples
A sample to take you to appreciate the charm of MotionLayout.
Stars: ✭ 135 (-9.4%)
Mutual labels: lottie
Mln
高性能、小巧、易上手的移动跨平台开发框架. A framework for building Mobile cross-platform apps with Lua
Stars: ✭ 1,343 (+801.34%)
Mutual labels: nativescript
Nativescript Videoplayer
🎬 Video Player widget for NativeScript apps
Stars: ✭ 122 (-18.12%)
Mutual labels: nativescript
Tgs To Gif
Converts animated Telegram stickers (*.tgs) to animated GIFs (.gif)
Stars: ✭ 148 (-0.67%)
Mutual labels: lottie
Awesome Nativescript Vue
Resources for nativescript vue
Stars: ✭ 142 (-4.7%)
Mutual labels: nativescript
Nativescript Geolocation
Geolocation plugin to use for getting current location, monitor movement, etc
Stars: ✭ 127 (-14.77%)
Mutual labels: nativescript
NativeScript-Lottie
NativeScript plugin to expose Airbnb Lottie for awesome animations.
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 [email protected]
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
🔥 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
bradmartin | NathanWalker | rhanb | HamdiWanis |
itstheceo | mudlabs |
Contributing
- Fork and clone the repository
-
cd nativescript-lottie && npm run demo.android
(or demo.ios) - Changes in the
src
directory of the plugin will sync to the demo app for testing changes. - Create a PR with proposed changes.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].