React Native Animatedを使用すると、オフセットをアニメートできますか？

Question

私はこのように、アニメーションのドラッグを作成し、機能をドロップしようとしています：http://moduscreate.com/animated_drag_and_drop_with_react_native/

私は、ユーザーがタッチを開始したとき、それはもはや自分の指の下に隠されているように、オブジェクトが上方に移動しないようにそれを変更したいです。この動きをアニメーション化したいのですが、アニメーション中のパンニングジェスチャも追跡したいと思っています。

今のところ、ユーザーが指を動かさない限り、アニメーションは動作しています。タッチが開始したとき、私は、オブジェクトアップをアニメーション化するために、このコードを使用しています：

onPanResponderStart: (e, gesture) => { 
    Animated.spring(
    this.state.pan, 
    { 
     ...animationConstants, 
     toValue: { x: 0, y: -70 }, 
    } 
).start((status) => { 
    // This part ensures that the offset and value are 
    // set correctly after the animation. 
    this.state.pan.y.setOffset(-70); 
    this.state.pan.y.setValue(0); 
    }); 
}, 

をしかし、すぐに、彼らは自分の指を動かすと、それはアニメーションをキャンセルし、トップにジャンプします。私はonPanResponderMoveために、このコードを使用しています：

onPanResponderMove: Animated.event([null, { 
    dx: this.state.pan.x, 
    dy: this.state.pan.y 
}]), 

私はアニメーションは、ユーザが自分の指を動かしている間も、継続したいです。

「値」ではなく「オフセット」をアニメーション化するためにコードを変更するにはどうすればよいですか？私はこの問題を解決するために、そしてtoValueを使用するオプションがある場合は、この問題を解決できると思います。しかし、私はそれを持っているとは思わない、と私はこれをエミュレートする必要があるか分からない。

Answer 1

私は何かを考え出しました。パフォーマンスについてはわかりませんが、うまくいくようです。

オフセットをアニメーション化するために別途Animated.Valueを設定しました。私はちょうどaddListenerを使用してコールバックを追加しました。これはsetOffsetを呼び出して値をアニメートします。

constructor(props){ 
    super(props); 

    this.state = { 
    pan: new Animated.ValueXY(), 
    offset: new Animated.Value(0) 
    }; 

    this.state.offset.addListener((value) => { 
    this.state.pan.y.setOffset(value.value); 
    }); 

    this.panResponder = PanResponder.create({ 
    onStartShouldSetPanResponder:() => true, 
    onPanResponderStart: (e, gesture) => { 
     Animated.spring(
     this.state.offset, 
     { toValue: -70 } 
    ).start(); 
    }, 
    onPanResponderMove: Animated.event([null, { 
     dx: this.state.pan.x, 
     dy: this.state.pan.y 
    }]), 
    onPanResponderRelease: (e, gesture) => { 
     Animated.spring(
     this.state.pan, 
     { 
      toValue: { x: 0, y: 0 } 
     } 
    ).start(); 

     Animated.spring(
     this.state.offset, 
     { toValue: 0 } 
    ).start(); 
    } 
    }); 
}