react / react/react-native

iOS: Multiple animations which use "useNativeDriver" do not work if preceded by a delay.

Aperta
#18,513 9 commenti 13 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

API: Animated Bug Help Wanted :octocat: Platform: iOS Priority: Low
Lingua principale
C++
Stelle
127k
Fork
25.3k
Merge medio
1g 23h
PR unite (30g)
4

Descrizione

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

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. 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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.