React Native：创建一个通过手指拖动直接滑动的动画视图答案

【问题标题】：React Native: Creating an Animated View that slides directly with finger dragReact Native：创建一个通过手指拖动直接滑动的动画视图
【发布时间】：2016-11-06 19:25:51
【问题描述】：

想要的效果：

我想创建一个平滑滑动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 并不能很好地描述我所追求的同样节奏的滑动 - 但我想我需要使用其中一个来获得优化的原生表现（否则我只会使用.setState(slideValue) 并用我手指的当前位置做一些数学运算来计算View 的位置。）

问题：

使用优化的 React-Native Animated 库来描述这种类型的平滑滑动动画的首选方式是什么？

我尝试过的：

1) 使用Animated.timing 并设置duration 低和easing 为线性（我最好的猜测我应该做什么）

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

    }).start();

2) 在 Animated.spring 上向上移动 tension

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

【问题讨论】：

标签： animation react-native

【解决方案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
});

【讨论】：