How to translateX, translateY to a certain coordinate rather than a relative point?

Question

My question is about using translateX and translateY in react and/or react-native animations, to animate an object to a certain point.

These two transformations move an object relative to the existing point.

But for the scenario, the existing coordinate is not important and I want to assure the object moves to a certain point wherever it may exist in the screen.

Additional limitation is, I can not animate styles top, bottom, left and right because in react-native, if we animate these styles then we can not use the useNativeDriver={true} directive which causes performance problems.

What I had done is in ```react-native``` using ```react-native-animatable```. I wanted to go with top and left values' animation (which is not relevant with the question so did not paste here). It is like ```this.refsInSpace[i][j].transitionTo({top: c_footerHeight + (i+1) * this.squareEdge, left: j * this.squareEdge,}, 1000);``` which ends a message like, ```Error: Style property 'left' is not supported by native animated module```. For movement, it seems I need to go with transformX and transformY, which comes to the point in the question, they are relative movements. — Mehmet Kaplan, May 15 '19 at 12:36

Erik Haider Forsén · Accepted Answer · 2019-05-28T07:01:48.190

10

You can use the onLayout prop to get position (relative to parent) and height/width on any View component.

Something like this should work. You might need to get position of more parent View components, depending on your current structure.

componentDidMount() {
  this.animatedValue = new Animated.Value(0);  
}

animate() {
  const { parentYPosition } = this.state;
  Animated.Timing(this.animatedValue, {
    toValue: FINAL_POSITION - parentYPosition
  }).start(); 
}

render() {
  return (
    <View 
      onLayout={event => {
        const { y } = event.nativeEvent.layout;
        this.setState({parentYPosition: y})
      }}
    >
      <Animated.View 
        style={{
          position: 'absolute',
          top: 0, 
          transform: [
          {
            translateY: this.animatedValue
          }
      />
    />
  );
}

https://facebook.github.io/react-native/docs/view#onlayout

edited May 28 '19 at 07:01

answered May 27 '19 at 13:19

Erik Haider Forsén

517
1
4
16

I generated a snack here with the code you provided https://snack.expo.io/@mehmetkaplan/af32ac The point that I could not get is, how this is supposed to move to an absolute point? Even though it takes into consideration the parent's coordinates, it does not deal with its own coordinates. As you may see within the snack with comment "// CHANGING THIS VALUE THE FINAL ANIMATED POINT CHANGES", it goes to the relative point. The gist of the question is to animate to an absolute point regardless of the initial coordinates without animating ```top```, ```bottom```, ```left```, ```right```styles. – Mehmet Kaplan May 27 '19 at 17:06
The answer only includes the parts you had problems with, how to calculate the final value of your animations. It is not a complete, runnable class, more like pseudo code to get you going. In the expo you're missing a function to run the animation. The answer relates to the "gist of your question", which is not to provide you a complete running class, but help you animate to an absolute point, which I now have showed you how you can do. – Erik Haider Forsén May 28 '19 at 06:44
Sorry Erik, what I did not get is, the code you provided navigates to a relative coordinate, not to an exact point in the screen. In this view, it is equivalent to use translateY alone. The possible solution should know where the view is previously and find the translateY value accordingly. But the code knows “where the parent is” not the actual view itself. – Mehmet Kaplan May 28 '19 at 06:50
1

Unless the parent has content, the child has the same position as parent. A simple solution is to create a parent with only one child (which is the Animated.View), and then use position: absolute, top: 0 as style on the Animated.View, and then animate translateY value. In that case you will achieve what you want, and you can use the native driver. – Erik Haider Forsén May 28 '19 at 06:56
Thanks, now it makes sense. Let me try the method today. – Mehmet Kaplan May 28 '19 at 07:07
I think this has a bitter angle, when I animate a few times consecutively, since the parent will not be animated and all the animations (other than the first one) will have wrong coordinates. Am I right? – Mehmet Kaplan May 28 '19 at 07:12

How to translateX, translateY to a certain coordinate rather than a relative point?

1 Answers1