iOS: Multiple animations which use "useNativeDriver" do not work if preceded by a delay.
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 127k
- Forks
- 25.3k
- Ø Merge
- 1 T. 23 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
- 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.
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Klonen Sie das verlinkte animationBug-Beispiel, führen Sie yarn install und react-native run-ios aus und reproduzieren Sie den Fehler mit Animated.delay oder setTimeout vor Animated.parallel. Beginnen Sie damit, die im Bericht gezeigten Pfade von Animated.sequence, Animated.parallel und useNativeDriver nachzuverfolgen. Erledigt ist die Aufgabe, wenn die Text- und die View-Opacity-Animation unter iOS nach der Verzögerung beide ausgeführt werden, wie es unter Android der Fall ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react-native
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100