React Native Animatedまとめ

React Nativeで実装されたアニメーションの主なフレームワークはAnimatedで、多くのバージョンの反復を経て、Animatedはかなり完備しており、日常的な開発ニーズを基本的に満たすことができます.
Animatedの資料については、ドキュメントのネット上にたくさんありますが、ここでは詳しく説明しません.自分が開発した期間をまとめて、アニメイトについての小さな理解をしてみましょう.

アニメイトVSオリジナルアニメーション

アップルは自分のプラットフォームAppのユーザー体験を非常に重視しており、現在RNプラットフォームのアニメーションライブラリはiOS SDKが提供できる効果には全く及ばず、精華の簡略化バージョンにすぎないと言える.また、アップルの毎年のWWDCは、自社のアニメーションライブラリの更新を重視している.
いくつかのAnimatedコンポーネントでは、useNativeスイッチをオンにすることで、iOSプラットフォームの最下位のアニメーションライブラリで効果を実現し、よりスムーズな効果を得ることができます.
アニメイト:

現在はサポートのみAnimated.Text、Animated.Image、Animated.Viewなどいくつかの指定されたコンポーネントがあり、カスタマイズされたアニメーションコンポーネントが実現するのは面倒です.

アニメーションコンポーネントの具体的な状態ではなく、アニメーションの駆動として使用する必要があるAnimated Value直感的ではない.

動画全体のコードが切り裂かれ、遡及して読み直す手間がかかる.

Animated VS LayoutAnimated

LayoutAnimatedコンポーネントFrameベースの簡略化されたデータベースであり、CocoaのUIView animate blockと非常に類似している.AnimatedはValueに基づいて駆動され、複雑です.
いくつかのシーンでは、LayoutAnimatedはAnimatedよりも直接的で簡単です.
LayoutAnimatedのシンプルな実装:

startAnimation() {
    LayoutAnimation.configureNext({
        duration: 700, // 
        create: { //  
            type: LayoutAnimation.Types.spring,
            property: LayoutAnimation.Properties.scaleXY,// opacity、scaleXY
        },
        update: { //  
            type: LayoutAnimation.Types.spring,
        },
    });
    this.setState({width: this.state.width + 10, height: this.state.height + 10});
}

Animatedコアロジック

バインドと駆動の2つの語にまとめられます.
バインディングは、コンポーネントのプロパティとAnimated.Valueバインド、value値変化駆動コンポーネント再描画アニメーション.これは、オリジナルアニメーションでコンポーネント自体のプロパティを使用してアニメーションを駆動するのとは異なります.
駆動は、Animatedを制御することです.Valueの値は一定期間の関数変化であり,既成の曲線(etc:Easing)を用いてもよいし,他のvalue値にバインドしてマッピング(Animated.Event)を形成してもよい,Animatedの多くの機能は本質的にAnimated.Valueの異なる駆動方式.
コードも少し貼って、簡単なAnimatedを実現します:

constructor(props) {

    super(props);

    this.state = {
      //   Animated.Value  
      bgOpacity: new Animated.Value(0),
    };

    this.bgOpacityToValue = 1;
}

componentDidMount() {

    let animates = [
      //   Animated   Value  ， 
      Animated.spring(this.state.bgOpacity, {
        toValue: this.bgOpacityToValue,
      })
    ];

    this.state.bgOpacity.setValue(0);
    Animated.parallel(animates).start();
}

render() {

    return (

      
      
        //   Animated.View,   Animated.Value  
        
          
        
        
      
    );
}

マッピング、バインド、結合、キー、アニメーションカーブなど、他のアニメーションの高度な実装は、ドキュメントを参照できます.

Animated Event

最初はAnimated.Eventバインドに疑問を抱いていたが、アニメイトでは理解しにくい点の一つでもあり、公式のサンプルコードは以下の通りである.

 onScroll={Animated.event(
   [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
   {listener: (event) => console.log(event)}, // Optional async listener
 )}

ドキュメント自体はあまり説明されていません.ここでonScrollはScrollViewを構成するコールバック関数であるため、Animated.event()は、scrollによって呼び出され、現在のスクロールイベントeに転送されるメソッドを返します.
Animated.event()の最初のパラメータはバインドシーケンスです.Animatedをどのようにするかを規定します.Value()は指定されたソースにバインドされ、特殊な文法と見なすことができ、偽のコードで書かれています.

e.nativeEvent.contentOffset.x   this._scrollX

2番目のパラメータはconfigです.ここではイベントのリスニング関数を指定します.実はonScrollの通常のリスニング関数です.他のオプションの構成はドキュメントを参照してください.
だから、この拗ねた文法を訳すことができます.

 onScroll={(e) => {
    
    Animated.event(
        [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
        {listener: (event) => console.log(event)}, // Optional async listener
    )(e);
 }}