-
Notifications
You must be signed in to change notification settings - Fork 24.8k
Description
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.