Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animated duration config [Bug Or Limitation] #15872

Closed
FlaviooLima opened this issue Sep 8, 2017 · 2 comments
Closed

Animated duration config [Bug Or Limitation] #15872

FlaviooLima opened this issue Sep 8, 2017 · 2 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@FlaviooLima
Copy link

FlaviooLima commented Sep 8, 2017

Hi guys, I'm having a trouble with animations I still don't know if this is a bug or a limitation.
I have a function that builds a sequence of animation's (you can see code below).
The strange thing is that some times the Duration that I set in each animation config does not correspond to the time that the animation takes.

More Detail:
The time that the total animation is gonna take depends on what the user asks, it could be 4, 2 or 1 second.
This time is divided by the length(2104 positions in this case) of an array that contains the X and Y of the object.
When the time that the user choose comes to an end this component receives an array through props with new positions and start's the process again.

Ex: if the user chooses 1 seconds of total animation, each position of "arraySequenceAnimations (length: 2104)" it would have 0.95 milliseconds to do the animation (This is why I said it could not be a bug but a limitation). But it would be better if the react jumps to the end that let the animation run but with more time (In my case it's better this way).

Two things come to my mind.
1- React cant handle animation with this low duration. (So if there is a minimum it should be placed in the docs.)
2- The react actually can handle the animations, but the few milliseconds that it takes to prepare it, (let's say 4) ends up delaying the whole animation. (4 milliseconds * 2104 = 8416 milliseconds)


// The component that is animated is a Group Component from ReactNativeART
// <AnimatedShape  x={this.state.x} y={this.state.y}>

const AnimatedShape = Animated.createAnimatedComponent(Group);

animateParty=()=>{
    var arraySequenceAnimations =[ ];
   // var animationDuration = 4000/(2104/2);  //The animation Occurs in a total of 4 Seconds
   // var animationDuration = 2000/(2104/2);  //The animation Occurs in a total of 2 Seconds
    var animationDuration = 1000/(2104/2);     //The animation Occurs in a total of 1 Second
  
    var x = 0;
    var y = 0;

    for (var i = 0; i < 2104; i+=2) {
     x += 1;
     y += 1;

      arraySequenceAnimations.push(
        Animated.parallel([
          Animated.timing(this.state.x, {
            toValue: x,
            duration:animationDuration,
            easing: Easing.linear,
          }),
          Animated.timing(this.state.y, {
            toValue: y,
            duration: animationDuration,
            easing: Easing.linear,
          })
        ])
      )
    }

    Animated.sequence(arraySequenceAnimations).start();
  }

React-Native: 0.41.2 and 0.48.1

Devices Tested:
-iPhone 6 (iOS 9.3 Emulator)
-iPhone 6S (iOS 10.0.3 Real Device) Both Debug and Release Mode

@update
Well, now I created a function that reduces the number of animations to a max of 60 per second.
No luck. Tried 40 and 20 per second, no luck either.

@hramos
Copy link
Contributor

hramos commented Sep 8, 2017

This issue looks like a question that would be best asked on StackOverflow.

StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

Will close this as this is really a question that should be asked on StackOverflow.

@hramos hramos closed this as completed Sep 8, 2017
@FlaviooLima
Copy link
Author

FlaviooLima commented Sep 9, 2017

@hramos really??
In the last issue, you told me that if the problem persists in the most recent version, to open a new issue, and now the same text that I used before is fit in a category to ask on StackOverflow.
There is something wrong here, and I could be wrong, but until now everything points to a bug or a limitation, and so far no one comment saying that this example works with no problem on their side, maybe before close at least let someone actually see if this happen to them too. (if it is a limitation is not in the docs, and it should be, therefore a bug).

@facebook facebook locked as resolved and limited conversation to collaborators Sep 8, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Sep 8, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

3 participants