I need to create an animation with an image that will circle around another image. I have already tried to use suggestions from a similar question like Animate a Circle around another circle , but unfortunately it didn't help. I tried looking into 3rd party modules that would offer the desirable functionality, but haven't found something that would fit my need.
I found a helpful article to understand the circular motion in JavaScript, however I have a hard time to replicate it in React Native animation. I believe I simply have a hard time understanding a proper usage of Animated API and transform
style properties when it comes to animating circular movement.
<View style={animationContainer}>
<Image
source={require('./images/image.png')}
style={image}
/>
<Animated.Image
source={require('./images/icon.png')}
style={circlingIcon}
/>
</View>
I have posted a similar butter smooth solution for the question react native circle transform translate animation
Full code:
import React, {Component} from 'react';
import {View, Text, Animated, StyleSheet, Easing} from 'react-native';
export default class Circle extends Component {
constructor() {
super();
this.animated = new Animated.Value(0);
var inputRange = [0, 1];
var outputRange = ['0deg', '360deg'];
this.rotate = this.animated.interpolate({inputRange, outputRange});
outputRange = ['0deg', '-360deg'];
this.rotateOpposit = this.animated.interpolate({inputRange, outputRange});
}
componentDidMount() {
this.animate();
}
animate() {
Animated.loop(
Animated.timing(this.animated, {
toValue: 1,
duration: 4000,
useNativeDriver: true,
easing: Easing.linear,
}),
).start();
}
render() {
const transform = [{rotate: this.rotate}];
const transform1 = [{rotate: this.rotateOpposit}];
return (
<View style={styles.container}>
<Animated.View style={[styles.item, {transform}]}>
<Animated.View style={[styles.topItem, {transform: transform1}]}>
<Text style={styles.text}>Test</Text>
</Animated.View>
</Animated.View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
item: {
position: 'absolute',
width: 100,
height: 200, // this is the diameter of circle
},
topItem: {
width: '100%',
height: 20,
backgroundColor: 'red',
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: '#fff',
},
});
I hope it will help you..
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With