UNPKG

react-native-animated-splash

Version:

[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger) ![Supports Android and iOS](https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg?style=flat-square) [![License](htt

327 lines (223 loc) 9.98 kB
## React-Native-Animated-Splash -- Android Description Check the [Example Application](https://github.com/Blitz-Mobile-Apps/react-native-animated-splash/blob/v2/androidexample.md) for reference. ## Usage MainActivity.java ```sh ... import static com.blitzapp.animatedsplash.animation.Constants.FADE; import static com.blitzapp.animatedsplash.animation.Constants.SCALE; import static com.blitzapp.animatedsplash.animation.Constants.SPLASH_SLIDE_RIGHT; import static com.blitzapp.animatedsplash.animation.Splash.screenHeight; import static com.blitzapp.animatedsplash.animation.Splash.screenWidth; import com.blitzapp.animatedsplash.animation.AnimatedObject; import com.blitzapp.animatedsplash.animation.GroupAnimation; import com.blitzapp.animatedsplash.animation.ObjectAnimation; import com.blitzapp.animatedsplash.animation.SingleAnimation; import com.blitzapp.animatedsplash.animation.Splash; ... ``` ## Methods Description ### Splash MainActivity.java Run the lines in the onCreate method ``` // Create Splash Splash splash = new Splash(getContext()); //Set Background Color To View splash.setBackgroundColor("#101010"); //Set Hiding Animation for Splash splash.setSplashHideAnimation(SPLASH_SLIDE_RIGHT); //Set Delay for Splash to hide splash.setSplashHideDelay(1500); ``` > Add all the code just above the return statement in the didFinishLaunchingWithOptions method. **setBackgroundColor** | Prop | Description | Type| |--|--|--| | colorString | Background color of your splash, give color value in Hex String ("#101010") |String| **setBackgroundImage** | Prop | Description | Type| |--|--|--| | drawable | Hiding animation of your splash, give any drawable image from resources|Int| any drawable image from resources.| **setSplashHideAnimation** | Prop | Description | Type| |--|--|--| | animationType | Background Image of your splash, use constants provided in the library |Int| **setSplashHideDelay** | Prop | Description | Type| |--|--|--| | delay | Duration of the splashscreen, Provide delay time in milliseconds |Int| **splashShow()** Renders the native splash screen and runs the animations. ### Splash Hide Animation Constants | Animation | Description | | ------ | ------ | | SPLASH_SLIDE_LEFT | Hides splash sliding left.| | SPLASH_SLIDE_RIGHT | Hides splash sliding right.| | SPLASH_SLIDE_DOWN | Hides splash sliding down.| | SPLASH_FADE | Hides splash with fade effect.| ## AnimatedObject ##### Initializing new Object ```sh AnimatedObject square = new AnimatedObject(R.drawable.square, screenWidth * 0.4f, screenHeight * 0.24f); ``` | Parameter | Description | Type | | ------ | ------ | ------- | | imageSource | Image that you want to add on splash screen from assets in iOS| Integer | | height | Height of image drawable| Double | | width | Width of image drawable| Double | #### Setter Functions ``` logoimage.setPositionY(12); logoimage.setPositionX(12); logoimage.setVisibility(true); logoimage.setScaleType(FIT_CENTER); logoimage.setRotateDegree(180); logoimage.setOpacity(0.5f); ``` | Method | Description | Type | | ------ | ------ | ------- | | setPositionX | Set position of image drawable on X-Axis on Splash Screen| Double | | setPositionY | Set position of image drawable on Y-Axis on Splash Screen| Double | | setScaleType | Set scaleType of image drawable. (possible options could be: FIT_XY, FIT_CENTER, FIT_END, FIT_START)| String (To be importted from Constants class) | | setVisibility | Set visiblity of the image on splash screen initially.| Boolean | | setRotateDegree | Set initial rotate degree of image| Double | | setOpacity | Set initial opacity of image. Value ranges from 0-1 | Double | ## Animation Types | Animation | Description | | ------ | ------ | | SLIDE | Slide image object to given x and y axis.| | SCALE | Scale image object starting from initial value to final value.| | FADE | Fade image object starting from initial value to final value. Value ranges from 0 - 1 (for fade in) or 1-0 (for fade out)| | ROTATE | Rotate image object starting from initial value to final value.| ## ObjectAnimation ### Note > Looping is not available in the "setHideAnimation". #### Initializing new Animation ```sh ObjectAnimation logoimageAnimation1 = new ObjectAnimation(logoimage, FADE, 1000, 0f, 1f, false); ``` ### Slide Animation ```sh //Without Loop ObjectAnimation image2Animation = new ObjectAnimation(image2, SLIDE, 500, 0f, 100, 0f,100); // With Loop ObjectAnimation image2Animation = new ObjectAnimation(image2, SLIDE, 500, 0f, 100, 0f,100, true); ``` | Attribute | Description | Type | ------ | ------ | ------- | | imageSource | Add the source image itself | AnimatedObject | | animationType | Type of animation | Int (Constant) | | animationDuration | Duration of animation in milliseconds | Int | | fromX | Initial position of object on X-Axis| Float | | toX | Final position of object on X-Axis | Float| | fromY | Initial position of object on Y-Axis | Float| | toY | Final position of object on Y-Axis | Float| | loop | Loop the animation (Default value is false) | Boolean| ### Scale Animation ```sh //Without Loop ObjectAnimation logoimageAnimation2 = new ObjectAnimation(logoimage, SCALE, 1000, 0f, 1f, 0f, 1f); // With Loop ObjectAnimation logoimageAnimation2 = new ObjectAnimation(logoimage, SCALE, 1000, 0f, 1f, 0f, 1f, true); ``` | Attribute | Description | Type | ------ | ------ | ------- | | imageSource | Add the source image itself | AnimatedObject | | animationType | Type of animation | Int (Constant) | | animationDuration | Duration of animation in milliseconds | Int | | scaleX | Final mulitple size of object on X-Axis | Float| | scaleY | Final mulitple position of object on Y-Axis | Float| | loop | Loop the animation (Default value is false) | Boolean| **Note:** > 2 means the size of image is multiplied by 2. ### Fade Animation ```sh //Without Loop ObjectAnimation logoimageAnimation1 = new ObjectAnimation(logoimage, FADE, 1000, 0f, 1f, false); // With Loop ObjectAnimation logoimageAnimation1 = new ObjectAnimation(logoimage, FADE, 1000, 0f, 1f, true); ``` | Attribute | Description | Type | ------ | ------ | ------- | | imageSource | Add the source image itself | AnimatedObject | | animationType | Type of animation | Int (Constant) | | animationDuration | Duration of animation in milliseconds | Int | | fromValue | Initial opacity of object or image| Float | | toValue | Final opacity of object or image | Float| | loop | Loop the animation (Default value is false) | Boolean| ### Rotate Animation ```sh //Without Loop ObjectAnimation *squareAnimation1 = [[ObjectAnimation alloc] initimage:square animationtype:FADE animationDuration:2000 rotateDegree:180]; // With Loop ObjectAnimation *squareAnimation1 = [[ObjectAnimation alloc] initimage:square animationtype:FADE animationDuration:2000 rotateDegree:180 loop:true]; ``` | Attribute | Description | Type | ------ | ------ | ------- | | imageSource | Add the source image itself | AnimatedObject | | animationType | Type of animation | Int (Constant) | | duration | Duration of animation in milliseconds | Int | | fromValue | Initial rotation degree of object or image| Float | | toVlaue | Final rotation degree of object or image| Float | | loop | Loop the animation (Default value is false) | Boolean| ## Group Animations > Animations added in the group will run simultaneously. Animation with lesser priority will run after all the objects in the group are done animating. ``` GroupAnimation group1 = new GroupAnimation(1); group1.addAnimation(logoimageAnimation1); group1.addAnimation(logoimageAnimation2); ``` | Parameter | Description | Type | | ------ | ------ | ------- | | priority | priority or the sequence of animation | Int | | Method | Description | Type | | ------ | ------ | ------- | | addAnimation | Adds the given image or object in the group | ObjectAnimation | ## Single Animations > Single Animations will animate the object one at a time and the next animation will run after it's animation is completed. ``` SingleAnimation single1 = new SingleAnimation(image1Animation,2); ``` | Parameter | Description | Type | | ------ | ------ | ------- | | object | Single object or image that will animate one at a time | ObjectAnimation | | priority | priority or the sequence of animation | Int | ### Note > These animations will run just before the splash starts to hide. ## Hiding Group Animations > Animations added in the group will run simultaneously. Animation with lesser priority will run after all the objects in the group are done animating. ``` HideGroupAnimation hideGroup1 = new HideGroupAnimation(1); hideGroup1.addAnimation(logoimageHideAnimation1); hideGroup1.addAnimation(logoimageHideAnimation2); ``` | Parameter | Description | Type | | ------ | ------ | ------- | | priority | priority or the sequence of animation | Int | | Method | Description | Type | | ------ | ------ | ------- | | addAnimation | Adds the given image or object in the group | ObjectAnimation | ## Hiding Single Animations > Single Animations will animate the object one at a time and the next animation will run after it's animation is completed. ``` HideSingleAnimation hideSingle1 = new HideSingleAnimation(image1HideAnimation,2); ``` | Parameter | Description | Type | | ------ | ------ | ------- | | object | Single object or image that will animate one at a time | ObjectAnimation | | priority | priority or the sequence of animation | Int | ## Show Splash in your app > After all the objects and their animations are added, add this line before return statement MainActivity.java ```sh splash.ShowSplash(); ``` ## Hide Splash in your app > Call hide function of splash in your app, from react native like this: ```sh import AnimatedSplash from "react-native-animated-splash"; AnimatedSplash.hide() ``` License MIT