Skip to content

Animated duration config [Bug Or Limitation] #15872

@FlaviooLima

Description

@FlaviooLima

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions