iOS: Multiple animations which use "useNativeDriver" do not work if preceded by a delay.
Nessuno ha ancora preso questa issue.
- Lingua principale
- C++
- Stelle
- 127k
- Fork
- 25.3k
- Merge medio
- 1g 23h
- PR unite (30g)
- 4
Descrizione
- 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.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Clona l'esempio animationBug collegato, esegui yarn install e react-native run-ios e riproduci il malfunzionamento con Animated.delay o setTimeout prima di Animated.parallel. Inizia tracciando i percorsi di Animated.sequence, Animated.parallel e useNativeDriver mostrati nel report. Il lavoro è completato quando entrambe le animazioni dell'opacità del testo e della view vengono eseguite su iOS dopo il ritardo, come avviene su Android.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react-native
- Ambito
- mobile
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100