cordova-plugin-lottie-splashscreen
Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
Supported platforms
- iOS (10+) (with cordova-ios >= 5.0.0 only)
- Android (with cordova-android >= 8.0.0 only)
Planned platforms
- macOS
Prerequisites/Warnings
iOS
You need to have CocoaPods installed because lottie-ios is fetched from there.
$ sudo gem install cocoapods
$ pod setup
Caveats
Only cordova >= 9.0.0 and cordova-ios >= 5.0.0 are supported.
You need to specify a valid SwiftVersion (minimum is 4.2) in your config.xml (see https://cordova.apache.org/docs/en/latest/config_ref/)
Android
AndroidX support is required for lottie-android >= 2.8.0.
In order to use version >= v0.7.0 you need to configure AndroidX support.
In case you do not manually build the project and edit the files in Android Studio, these two plugins might be required: https://github.com/dpa99c/cordova-plugin-androidx and https://github.com/dpa99c/cordova-plugin-androidx-adapter.
In the FAQ are some examples with common error messages and how to fix them.
Installation
from npm (recommended)
$ cordova plugin add cordova-plugin-lottie-splashscreen
from git (unstable)
$ cordova plugin add https://github.com/timbru31/cordova-plugin-cordova-plugin-lottie-splashscreen.git
Usage
This Cordova plugin is meant as a replacement for the stock cordova-plugin-splashscreen.
An example project can be found in the example folder.
Methods
- lottie.splashscreen.hide
- lottie.splashscreen.show
lottie.splashscreen.hide
This methods hides the current active Lottie splashscreen and destroys the views. Returns a Promise which is resolved with "OK" in the success case or the error message when it's failed.
await lottie.splashscreen.hide();
lottie.splashscreen.show
This method shows a Lottie splash screen. If no arguments are given, it defaults to the config.xml values, however you can pass (new) options here to change the behavior on runtime. Returns a Promise which is resolved with "OK" in the success case or the error message when it's failed. (For easier reading the TypeScript notation is used)
await lottie.splashscreen.show(location?: string, remote?: boolean, width?: number, height?: number)
Preferences
LottieRemoteEnabled(Boolean, defaultfalse). Toggles Lottie's remote mode which allows files to be downloaded/displayed from URLs. Example:
<preference name="LottieRemoteEnabled" value="true" />
LottieAnimationLocation(String, default""). Location of the Lottie JSON file that should be loaded. Can either be a URL (ifLottieRemoteEnabledistrue) or a local JSON or ZIP file (e.g.www/lottie/error.json).
<preference name="LottieAnimationLocation" value="https://assets.lottiefiles.com/datafiles/99nA1a7mkSF3Oz8/data.json" />
LottieImagesLocation(String, defaultpath of LottieAnimationLocation). Android only! Location of the Lottie images folder specified by the JSON.
<preference name="LottieImagesLocation" value="www/lottie/images" />
LottieCancelOnTap(Boolean, defaultfalse). Immediately cancels the Lottie animation when the user taps on the screen.
<preference name="LottieCancelOnTap" value="true" />
LottieHideTimeout(Double, default0). Duration in seconds after which the Lottie animation should be hidden.
<preference name="LottieHideTimeout" value="10" />
LottieBackgroundColor(String, default#ffffff). Background color of the overlay. Can be used with alpha values, too. (For more information see the 8 digits notation of RGB notation)
<preference name="LottieBackgroundColor" value="#fff000a3" />
LottieWidth(Integer, default200). Width of the container that's rendering the Lottie animation
<preference name="LottieWidth" value="750" />
LottieHeight(Integer, default200). Height of the container that's rendering the Lottie animation
<preference name="LottieHeight" value="750" />
LottieRelativeSize(Boolean, defaultfalse). Uses width and height values as relative values. Specify them as e.g.0.3to have 30%.
<preference name="LottieRelativeSize" value="true" />
LottieFullScreen(Boolean, defaultfalse). Renders the animation in full screen. Ignores properties above.
<preference name="LottieFullScreen" value="true" />
LottieLoopAnimation(Boolean, defaultfalse). Loops the animation
<preference name="LottieLoopAnimation" value="true" />
LottieAutoHideSplashScreen(Boolean, defaultfalse). Hides the Lottie splash screen when thepageDidLoadevent fired
<preference name="LottieAutoHideSplashScreen" value="true" />
LottieEnableHardwareAcceleration(Boolean, defaultfalse). Android only! Enables hardware acceleration for the animation view. Not really recommended since Lottie decides automatically whether the hardware mode should be used or not.
<preference name="LottieEnableHardwareAcceleration" value="true" />
LottieScaleType(String, defaultFIT_CENTER). Android only! Scale type of the view. Can be one of the following: https://developer.android.com/reference/android/widget/ImageView.ScaleType
<preference name="LottieScaleType" value="CENTER_CROP" />
LottieCacheDisabled(Boolean, defaultfalse). Disables caching of animations.
<preference name="LottieCacheDisabled" value="true" />
Built by (c) Tim Brust and contributors. Released under the MIT license.