Creating Animated Energy Flow Lines in React Native Expo

Question

I'm currently developing a React Native application using Expo, and I'm facing a challenge with implementing animated energy flow lines on one of my screens. The goal is to animate lines on an image of a house to simulate the flow of energy, as depicted in the following concept:

what I have currently:

what is should look like:

I've explored various options, but I haven't found a suitable library or approach to achieve this effect in React Native. While I don't anticipate the animation itself to be overly complex, I'm relatively new to animation in React Native and could use some guidance on how to approach this task effectively.

Here's what I've tried so far:

Searched for existing libraries that provide similar animation capabilities. Experimented with basic animation techniques in React Native, but haven't achieved the desired effect. If anyone has experience or insights into creating animated effects like this in React Native, I would greatly appreciate your assistance or guidance on how to proceed.

Thank you in advance for your help!

can you specify what kind of animation you want, you posted a png picture — masteronin99
– masteronin99, Commented May 3, 2024 at 16:29

S. N · Accepted Answer · 2024-05-08 12:05:32Z

So I made a component:

import React, { useState, useEffect } from 'react'; import { View, Animated, Easing, StyleSheet } from 'react-native'; const EnergyFlowAnimation = ({ duration = 1000, direction = 'left', style = null, value = 1, nrOfMarks = 5 }) => { const [arrowPosition] = useState(new Animated.Value(0)); const animation = Animated.timing(arrowPosition, { toValue: value, duration: duration, easing: Easing.linear, // easing: Easing.back(), useNativeDriver: true, }); const startAnimation = () => { animation.start(() => { animation.reset(); startAnimation(); }); }; useEffect(() => { startAnimation(); }, []); const Mark = () => { return ( <View style={{ width: 7, height: 5, backgroundColor: '#FF6B00', marginLeft: 3, borderRadius: 5 }} /> ); } let arrowTranslateX = 0; let arrowTranslateY = 0; let arrowRotation = '0deg'; switch (direction) { case 'left': arrowTranslateX = arrowPosition.interpolate({ inputRange: [0, 1], outputRange: [40, -10], }); arrowRotation = '180deg'; break; case 'right': arrowTranslateX = arrowPosition.interpolate({ inputRange: [0, 1], outputRange: [-10, 40], }); arrowRotation = '0deg'; break; case 'top': arrowTranslateY = arrowPosition.interpolate({ inputRange: [0, 1], outputRange: [40, -10], }); arrowRotation = '-90deg'; break; case 'down': arrowTranslateY = arrowPosition.interpolate({ inputRange: [0, 1], outputRange: [-10, 40], }); arrowRotation = '90deg'; break; default: arrowTranslateX = arrowPosition.interpolate({ inputRange: [0, 1], outputRange: [40, -10], }); } return ( <View> <Animated.View style={[ styles.roadLine, style, { transform: [{ translateX: arrowTranslateX }, { translateY: arrowTranslateY }, { rotate: arrowRotation }], // position: 'absolute', justifyContent: 'center', alignItems: 'center', alignSelf: 'center', }]}> {[...new Array(nrOfMarks)].map((_, index) => <View key={index}><Mark /></View>)} </Animated.View> </View> ); }; const styles = StyleSheet.create({ roadLine: { height: 10, flexDirection: 'row', }, }); export default EnergyFlowAnimation;

I call this component as follow:

<View style={[styles.bottom, { top: 20, flexDirection: 'row' }]} > <View style={{ backgroundColor: 'blue', width: 20, height: 20, zIndex: 1, right: -10 }} /> <EnergyFlowAnimation duration={500} direction='right' value={0.6} nrOfMarks={15} /> <View style={{ backgroundColor: 'yellow', width: 20, height: 20, right: 2 }} /> </View>

this gives me the following:

Collectives™ on Stack Overflow

Creating Animated Energy Flow Lines in React Native Expo

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related