iOS: Multiple animations which use "useNativeDriver" do not work if preceded by a delay.
Personne n'a encore pris cette issue.
- Langage dominant
- C++
- Étoiles
- 127k
- Forks
- 25.3k
- Merge moyen
- 1 j 23 h
- PR mergées (30 j)
- 4
Description
- I have reviewed the documentation
- I have searched existing issues
- I am using the latest React Native version
On iOS, if attempting to animate a text component and a view component in parallel, preceded by an Animated.delay (or setTimeout), the text component will not animate:
doAnimate = () => {
Animated.sequence([
// Removing the delay here will fix the issue.
Animated.delay(1000),
Animated.parallel([
Animated.timing(this.squareAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
// If you remove "useNativeDriver" below, the animation works.
Animated.timing(this.textAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
])
]).start();
// This also fails to animate the text component:
// setTimeout(() => {
// Animated.parallel([
// Animated.timing(this.squareAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
// Animated.timing(this.textAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
// ]).start();
// }, 1000);
}
componentDidMount() {
setTimeout(this.doAnimation, 3000);
}
render() {
return (
<View style={styles.container}>
<Animated.Text style={[styles.textContainer, {
opacity: this.textAnimation
}]}>
Welcome to React Native!
</Animated.Text>
<Animated.View style={[styles.squareContainer, {
opacity: this.squareAnimation
}]}>
</Animated.View>
</View>
);
}
If you remove "useNativeDriver" from the "textAnimation", the animation works. Also, making the textAnimation interpolate from viewAnimation does not work (that's how my code originally worked, but I broke them out into separate animations to test what was going wrong).
Environment
Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.4
Yarn: 1.5.1
npm: 5.6.0
Watchman: Not Found
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003
Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.3
react-native: 0.54.2 => 0.54.2
Steps to Reproduce
See code snippet above, alternatively you can check out my example repo:
git clone https://github.com/dannycochran/animationBug
cd animationBug
yarn install
react-native run-ios
Expected Behavior
The animations for both the View and Text component work, as they do on Android.
Actual Behavior
The text opacity never animates.
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Clonez l’exemple animationBug lié, exécutez yarn install et react-native run-ios, puis reproduisez l’échec avec Animated.delay ou setTimeout avant Animated.parallel. Commencez par suivre les chemins de Animated.sequence, Animated.parallel et useNativeDriver présentés dans le rapport. La tâche est terminée lorsque les animations d’opacité du texte et de la vue s’exécutent toutes deux sur iOS après le délai, comme sur Android.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react-native
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100