Question

13

Circling motion animation in React Native

rated 0 times [ 20] [ 7] / answers: 1 / hits: 7860 / 4 Years ago, tue, february 4, 2020, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janayr

Add To Favorites

Follow

Total Points: 80

Total Questions: 80

Total Answers: 114

Location: Venezuela

Member since Sat, Aug 22, 2020

4 Years ago

janayr questions

1 NestJS - Increase response timeout for particular http endpoint

Thu, May 19, 22, 00:00, 2 Years ago

1 How to use Lazy query with React-query?

Wed, Dec 29, 21, 00:00, 2 Years ago

1 Discord JS - interactionCreate and messageCreate

Sun, Oct 31, 21, 00:00, 3 Years ago

1 How to change the hover effect for react-bootstrap navbar link?

Fri, Oct 30, 20, 00:00, 4 Years ago

1 Show autocomplete only after 3 entered chars in < datalist> field?

Thu, Jul 25, 19, 00:00, 5 Years ago

View All

answered 4 Years ago naomim · Accepted Answer

I have taken a solution from a question react native circle transform translate animation and refactored it a little by separating interpolation of coordinates over Y and X in two different functions.

interface InterpolatedMotion {

  translateX: Animated.Value;

  translateY: Animated.Value;

}



interface AnimatedIcon extends InterpolatedMotion {

  animated: Animated.Value;

}



interface State {

  icon: AnimatedIcon;

}



const defaultAnimatedIcon = (animatedValue: number): AnimatedIcon => ({

  animated: new Animated.Value(animatedValue),

  translateX: new Animated.Value(0),

  translateY: new Animated.Value(0),

});



export class Animation extends PureComponent<Props, State> {

  state = {

    icon: defaultAnimatedIcon(0),

  }



  constructor(props) {

    super(props);

    let { icon } = this.state;



    icon.animated.setValue(0);



    const snapshot = 50;

    const radius = 200;



    const inOutX = this.interpolateCircularMotionOverX(snapshot, radius);



    icon.translateX = coins.animated.interpolate(inOutX);



    const inOutY = this.interpolateCircularMotionOverY(snapshot, radius);



    icon.translateY = coins.animated.interpolate(inOutY);

  }



  componentWillMount(): void {

    this.startAnimation();

  }



  startAnimation = (): void => {

    let { icon } = this.state;



    icon.animated.setValue(0);



    let animations = [

      Animated.timing(

        icon.animated,

        {

          toValue: 1,

          duration: 8000,

          easing: Easing.linear,

        },

      ),

    ];



    Animated.loop(

      Animated.parallel(animations),

    ).start(() => {

      icon.animated.setValue(0);

    });

  }



  interpolateCircularMotionOverX = (snapshot: number, radius: number) => {

    const inputRange = [];

    const outputRange = [];

    for (let i = 0; i <= snapshot * 2; ++i) {

      const value = i / snapshot;

      const move = Math.sin(value * Math.PI * 2) * radius;

      inputRange.push(value);

      outputRange.push(move);

    }

    return { inputRange, outputRange };

  }



  interpolateCircularMotionOverY = (snapshot: number, radius: number) => {

    const inputRange = [];

    const outputRange = [];

    for (let i = 0; i <= snapshot * 2; ++i) {

      const value = i / snapshot;

      const move = -Math.cos(value * Math.PI * 2) * radius;

      inputRange.push(value);

      outputRange.push(move);

    }

    return { inputRange, outputRange };

  }



  render(): JSX.Element {

    const { icon } = this.state;



    const transformIcon = [

      { translateY: icon.translateY },

      { translateX: icon.translateX },

    ];



    return (

        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

          <View style={{ flex: 1 }}>

            <Animated.Image

              source={require('./images/coins.png')}

              style={[Styles.forms.circlingIcon, { transform: transformCoins }]}

            />

          </View>

        </View>

    );

}

This has helped me by providing a flexible and reusable solution for any future instances of circular animation.