ReactJS ネイティブでコンポーネントをアニメーション化して、点の周りを円を描くように連続的に周回させようとしています。基本的に、X、Y座標を次のように設定するために使用できる、継続的に増加するタイマーが必要です {x: r * Math.sin(timer), y: r * Math.cos(timer)}

補間に関する非常に役立つ情報が記載されているこのガイドを見つけましたが、まだ成功していません。

http://browniefed.com/react-native-animation-book/INTERPOLATION.html

このようにコンポーネントの位置を更新するにはどうすればよいですか?

おまけの質問: アニメーションを連続させるにはどうすればよいですか?

バックグラウンド

私は React Native と Redux を使用してアプリケーションを構築し、Swift を介した今後のプロジェクトでそれを使用して完全にネイティブにするかどうかを評価しています。

Redux を使用した Dan Abramov の手法は、堅実なエンジニアリングの例であると心から信じています。状態を更新せず、状態の関数としてビューを持つことは素晴らしいことであり、私はそのアイデアに非常に賛成しています。私がいくぶん行き詰まっているのは、アニメーションをミックスに投入することです。

シナリオ

より複雑なアニメーションには、ビューのフェードアウト、テキストの置き換え、フェードインなどの状態管理が必要です。アニメーションの途中でのみテキストを更新したいのですが、これはローカル状態を使用して簡単に行うことができます。アニメーション フレームワーク。

表示されるテキストが状態によって駆動されるとします。状態が適切なアクションとリデューサーの組み合わせによって変更された瞬間に更新されますが、プレゼンテーションのために、これら 2 つのアニメーションの間に必要です。

この例は、選択したレコードの名前を示す画面上のラベルがあるリストからレコードを選択することです。理想的には、グローバル ストアをすぐに更新する必要がありますが、ラベル自体は適切に移行します。

私の考え

私の考えでは、コンポーネント内で「ローカル状態」を使用してアニメーションを処理し、メインの Redux ストアをより全体的なデータまたはアーキテクチャの状態に使用することは、ある程度理にかなっています。問題は、これがビューがグローバルな状態の関数であるという考えを壊していることであり、それが私に合っているかどうかはわかりません。

一方で、たくさんのアクションやリデューサーを書いてストアを散らかしてアニメーション シーケンスなどを管理することも、きれいに感じられません。

質問

React Native はまだ初期段階にあり、誰もが Redux を使用しているわけではありませんが、この種のシナリオでアニメーションを管理する一般的に受け入れられている方法はありますか?

このcomponentWillLeave機能と対応するコールバックは、RN では見たことのない強力な機能です。それがなければ、アニメーションが完了するまで要素がページ/電話にとどまるようにするために、追加の状態を使用して非常にくだらないコードを生成することを常に余儀なくされます。willleaveアニメーション。

それで、アニメーション化するまで要素がレンダリングされたままであることを確認するために毎回カスタムコードを書く必要なしに、RNでこれを一貫して達成する方法を知っている人はいますか??

一度に1つずつ表示され、マウント/アンマウント時にそれ自体と次のアイテムの間でアニメーション化されるアイテムがたくさんあります。しかし、私はそれらすべてをさまざまな方法でアニメーション化してほしい.

これは可能ReactCSSTransitionGroupですか？コードから、グループごとに 1 つのアニメーション定義しか許可されていないようです。

どうReactTransitionGroupですか？これはうまくいくようです。それが私の唯一の選択肢ですか？

ReactTransitionGroup はアニメーションの基礎です。子が宣言的に追加または削除されると、特別なライフサイクル フックが呼び出されます。

私はそれを正しく読んでいますか、各子供は「あなたが去っています」または「あなたが入っています」と言われ、アニメーション自体（CSSアニメーションまたはjQueryなど）を行いますか？

これを行うためのより良い方法はありますか (グループ内の異なるアニメーション)?

さまざまな理由から、スクロール ビューのパン動作を再現しようとしています。PanResponder で Animated.decay を使用していますが、範囲外にならないように、値を 0 とコンテンツのサイズの間で固定する必要があります。

私はそれを行うために Animated.diffClamp を使用しましたが、AnimatedValue の値を正確にクランプするのではなく、その値から新しいクランプされた AnimatedValue を作成するだけです。

私にとって最善の解決策は、次のように Animated.decay 構成で境界を指定できるようにすることです。

しかし、ドキュメントにはそのようなものはありませんでした。それを達成するための最良の方法は何ですか？

ありがとう！

反応ネイティブの panResponder onPanResponderMove メソッドの呼び出しで、使用時に気づきました

しかし、私が使用しようとすると：

メソッドは呼び出されません。Animated.event と一緒に使用できる関数スコープを持つために使用できる別の JavaScript 構文はありますか

現在、反応ネイティブ アプリに自動非表示ヘッダーを実装しようとしています。この例のおかげでなんとかできましたが、何かが壊れました。実際、onEndReachedリストの最後に到達すると、私のメソッドはもう呼び出されません。また、RefreshControlコンポーネントを使用して機能する を実装しpull-to-refreshましたが、これAnimatedScrollViewは従来の ListView 機能に干渉するようです。

AnimatedScrollView次のようなコンポーネントを作成しました。

そして、ここに私のコンポーネントのレンダリングがあります:

私が言ったように、AnimatedScrollViewスクロール機能がの機能を上書きしていると確信していますListViewが、これを修正する方法がわかりません...

皆さんがヒントを持っているか、これに対する回避策を知っている場合、または私のヘッダーに役立つライブラリを知っている場合でも、感謝します:)

今何をsomeProps表しているのか知りたい人のために、それらは私がリンクした例とまったく同じです.

ありがとう