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并没有真正描述我所追求的同样节奏的滑动 - 但我想我需要使用一个他们获得优化的原生性能（否则我只使用.setState(slideValue)并用我手指的当前位置做一些数学来计算View的位置。）

问题：

使用优化的React-Native动画库描述此类平滑滑动动画的首选方法是什么？

我尝试了什么：

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();

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
});

React Native：创建一个直接用手指拖动滑动的动画视图

1 个答案: