reagieren native, wie Scroll-Position und Elementhöhe zusammen animieren

Question

Ich benutze eine reaktive native Liste, die die Liste Elemente auf volle Höhe erweitern wird.

Angenommen Listenversatz ist 'o' und Ansichtsfensterhöhe ist 'H' und Elementpos ist 'py' und Elementhöhe 'h'.

Dies erfolgt in zwei Schritten:

1. Blättern Sie in der Listenansicht auf gewünschte Offset: o -> o + py
2. die Elementhöhe Resize: h -> H

Ich möchte in der Lage sein, diese beiden Eigenschaften gleichzeitig, aber ohne Flimmern zu animieren.

Der derzeitige Ansatz, die ich verwende ist

lisview.scrollTo({y: o + py}, {animated: true}) 
var mh = new Animated.Value(h); 
this.setState({height: mh}); 
Animated.timing(mh, {toValue: H}).start(); 

Aber die Animation ist nicht glatt. Ich würde gerne wissen, wie man Schriftrolle und Höhe gleichzeitig am besten animiert. Danke im Voraus!!

Answer 1

Sie können parallel verwenden, um ein Array von Animationen gleichzeitig zu starten. Es gibt eine gute Anleitung für Animationen here, einschließlich paralleler Animationen.

Answer 2

Ein bisschen spät, aber ich hoffe, die Antwort kann anderen helfen.

Ich hatte gerade das gleiche Problem. Die Scroll-Animation kann nicht einfach gesteuert werden, da sie in nativem Code erfolgt. Ich kann nicht sagen, dass ich eine wunderbare Lösung gefunden habe, aber es funktioniert für mich.

Was ich getan habe, war die Animationsdauer zu verringern und eine Verzögerung hinzuzufügen. Es ergab sich eine ähnliche UX. Der Code geht so:

lisview.scrollTo({y: o + py, animated: true}) 
var mh = new Animated.Value(h); 
this.setState({height: mh}); 
// Default animation duration is 500, so it will be a little faster 
Animated.timing(mh, {toValue: H, duration: 100, delay: 300}).start(); 

Der letzte Effekt das Scrollen zu sehen war das Ende der Höhe Animation zu positionieren und auch ohne Panne sehen. Getestet mit vielen verschiedenen Höhen.

Ich hoffe, es hilft.