react-native-animated-splash
Version:
[](https://travis-ci.org/joemccann/dillinger)  [ • 9.98 kB
Markdown
## 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