スクロール位置と要素の高さを一緒にアニメートする方法をネイティブに反応します

Question

私はリストの要素をフルハイトに展開する反応ネイティブリストを使用しています。

リストオフセットが 'o'で、ビューポートの高さが 'H'で、要素posが 'py'であり、要素の高さが 'h'であるとします。

これは、2つの工程を伴う：

1. スクロール所望のオフセットのリストビュー：O - > O + PY
2. 素子高リサイズ：H - > H

を私がしたいとこの2つのプロパティを同時にフリッカーなしでアニメートすることができます。私が使用しています

現在のアプローチは

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

である。しかし、アニメーションは滑らかではありません。スクロールと高さを同時にアニメーション化するための最良の方法を知りたい。前もって感謝します！！

Answer 1

parallelを使用すると、同時にアニメーションの配列を開始できます。パラレルアニメーションを含む、アニメーションの良いガイドがhereです。

Answer 2

少し遅れていますが、答えが他人を助けることを願っています。

私はちょうど同じ問題を抱えていました。スクロールアニメーションは、ネイティブコードで行われるため、簡単に制御することはできません。私は素晴らしい解決策を見つけたとは言えませんが、それは私のために働いています。

私がしたことは、アニメーションの時間を短くし、遅延を追加することでした。同様のUXになりました。コードは次のようになります：

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(); 

最終的な効果は、位置へのスクロールを見て、グリッジなしで高さアニメーションの終わりを見ることでした。さまざまな高さでテストされています。

希望します。