I wanted to add an animated background for my game Catchphrase as the main play screen had a lot of white space and now you can add it as well.
1. Constants
Let’s start by defining some constants for our animation. Create constants.js
export const INPUT_RANGE_START = 0;
export const INPUT_RANGE_END = 1;
export const OUTPUT_RANGE_START = -281;
export const OUTPUT_RANGE_END = 0;
export const ANIMATION_TO_VALUE = 1;
export const ANIMATION_DURATION = 25000;
you can modify the values according to your need.
We need these values for interpolation . If you want to learn more about interpolation. Here is a great tutorial for it
Interpolation with React Native Animations
Now we need an image that we want to animate. I am using the following image.
If it was not clear what we are doing exactly in the above gif. Here is a simple explaination. We have an image and we are moving it down at a 45 degree angle using animation.
2. Styling the image
Okay let’s make the big enough to cover the screen. Create styles.js
import {StyleSheet} from 'react-native'
const styles = StyleSheet.create({
background: {
position: 'absolute',
width: 1200,
height: 1200,
top: 0,
opacity: 0.2,
transform: [
{
translateX: 0,
},
{
translateY: 0,
},
],
},
});
export default styles
Now finally lets create the component to animate background :- BackgroundAnimation
3. Animating the ImageBackground Component
import React, { useEffect,useRef } from 'react';
import { Animated, Easing, ImageBackground } from 'react-native';
import backgroundImage from '../../assets/background.png';
import styles from './styles';
import {
INPUT_RANGE_START,
INPUT_RANGE_END,
OUTPUT_RANGE_START,
OUTPUT_RANGE_END,
ANIMATION_TO_VALUE,
ANIMATION_DURATION,
} from '../../utils/constants';
export default function BackgroundAnimation() {
const initialValue = 0;
const translateValue = useRef(new Animated.Value(initialValue)).current;
useEffect(() => {
const translate = () => {
translateValue.setValue(initialValue);
Animated.timing(translateValue, {
toValue: ANIMATION_TO_VALUE,
duration: ANIMATION_DURATION,
easing: Easing.linear,
useNativeDriver: true,
}).start(() => translate());
};
translate();
}, [translateValue]);
const translateAnimation = translateValue.interpolate({
inputRange: [INPUT_RANGE_START, INPUT_RANGE_END],
outputRange: [OUTPUT_RANGE_START, OUTPUT_RANGE_END],
});
const AnimetedImage = Animated.createAnimatedComponent(ImageBackground);
return (
<AnimetedImage
resizeMode="repeat"
style={[styles.background,{
transform: [
{
translateX: translateAnimation,
},
{
translateY: translateAnimation,
},
],
}]}
source={backgroundImage} />
)
}
Now we can simply import our BackgroundAnimation in any of our screen and we will get an animated background automatically.
Thanks for reading this article. Be sure to like/recommend as much as you can and also share with your friends. It means a lot to me.
If you want to check out the game in this blog . The game is available both for Android and iOS.
Top comments (0)