はネイティブリアクト：アニメーションビューを作成する指でドラッグして直接スライド

Question

所望の効果：

私はスムーズにスライドView（左または右）の基本的なアニメーションを作成したい私のドラッグペースと同期（例えば、キャンバスメニューを表示したり表示したりする）

現在、すべてのジェスチャーを処理する親コンポーネントにAnimated.springを使用しています。次に、transform、translateXを子コンポーネントに使用して、Viewを左右にスライドさせます。例について

：

Root.js（ジェスチャーを処理する親コンポーネント）

_handlePanResponderMove(e: Object, gestureState: Object) { 
    let dx = gestureState.moveX - this.state.swipeStart; 
    Animated.spring(
    this.state.slideValue, 
    { 
     toValue: newValue, 
     velocity: gestureState.vx, 
     tension: 2, 
     friction: 8, 
    }).start(); 
} 

Navigation.js（スライド子コンポーネント）

render(){ 
    <Animated.View style={[styles.navigation,{transform: [{translateX: this.props.slideValue}]}]}> 
     <View > 
     </View> 
    </Animated.View> 
} 

問題：

滑りやすい指の動きに代えて、滑らかな動きではなく、アニメーションでのスティッキー/ラグ動作があります。

これまで私の推論：私の限られたアニメーションの経験から

からAnimated.spring,Animated.easeとAnimated.timingは本当によく私が後だ均等ペース滑り運動を記述していない - しかし、私は私は1つを使用している必要がありますと仮定それらのネイティブパフォーマンスを最適化し得るために （そうでない場合、私はちょうどViewの位置を把握するために.setState(slideValue)を使用して、私の指の現在の場所でいくつかの計算を行うと思います。）

質問：

最適化されたReact-Native Animatedライブラリを使用して、このタイプの円滑なスライドアニメーションを記述するための好ましい方法は何でしょうか？私が試した何

：

1）Animated.timingを使用して線形に低durationとeasingを設定するには、（私が何をすべきかで私の最高の推測）

Animated.timing(
    this.state.navSlideValue, 
    { 
     toValue: newValue, 
     duration: 10, 
     easing: Easing.linear 

    }).start(); 

2）上に移動しますtension on Animated.spring

Animated.spring(
    this.state.navSlideValue, 
    { 
     toValue: newValue, 
     velocity: (gestureState.vx), 
     tension: 300, 
     friction: 30, 
    }).start(); 

Answer 1

プリセット機能timing、springは、指定されたイージングでアニメーションを指定された値に実行するのに便利です。 Animated値をイベントに関連付ける場合は、代わりにAnimated.eventを使用できます。

PanResponder.create({ 
    // on each move event, set slideValue to gestureState.dx -- the 
    // first value `null` ignores the first `event` argument 
    onPanResponderMove: Animated.event([ 
    null, {dx: this.state.slideValue} 
    ]) 

    // ...rest of your panResponder handlers 
});