Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 21, 2022 09:26 pm GMT

How to animate background image in react native

Image description

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

Lets 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.

Image description

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.
Image description

2. Styling the image

Okay lets 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.

Image description

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.


Original Link: https://dev.to/aj019/how-to-animate-background-image-in-react-native-1k37

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To