Question

我的RN项目中有一个scrollview具有固定长度，应该像parralax scroll行为一样。当我滚动并移动Y分量时，标题的X分量向右移动，因此当它位于顶部时，它距离左边缘56像素，为后箭头留下足够的位置。

但它是线性的。有没有办法让它呈指数级。最好的例子是WhatsApp联系人的parralax卷轴：

我现在怎么样=红线（线性）

我想如何=蓝线（线性与缓和，指数，无论它叫什么）

我完成了缩放动画，但线性动作就像是我眼中的刺，动画值的文档压倒性而且不清楚。

我已定义：

scrollY: new Animated.Value(0)

在州和我的scrollview中像这样：

   <ScrollView
      onScroll={Animated.event(
        [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
      )}

我的Animated.View内部看起来像这样：

      <Animated.View  
        style={[
          {marginTop: 30, alignSelf: 'flex-start' },
          {translateX: headerTranslateX}
        ]}]}>
        <Text>Title</Text>
      </Animated.View>

Aand插值：

const titleTranslateX = this.state.scrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE*0.6, HEADER_SCROLL_DISTANCE],
  outputRange: [0, 0, 56],
  extrapolate: 'clamp',
})

本质上是线性的（我尝试在inputRange和outputRange位设置10 +个关键点，但它变得混乱并且看起来不够自然）

关于如何达到预期效果的任何建议？

Answer 1

它在动画文档中关于缓动（函数插值）的唯一内容是：

插值

每个属性都可以先通过插值运行。插值将输入范围映射到输出范围，通常使用线性插值，但也支持缓动功能。默认情况下，它会将曲线外推到超出给定的范围，但您也可以将其限制为输出值。

它没有提到如何添加缓动功能。但是，在源代码中，您会找到：https://github.com/facebook/react-native/blob/e2ce98b7c6f4f2fc7011c214f9edc1301ff30572/Libraries/Animated/src/Interpolation.js#L27

export type InterpolationConfigType = {
  inputRange: Array<number>,
  /* $FlowFixMe(>=0.38.0 site=react_native_fb,react_native_oss) - Flow error
   * detected during the deployment of v0.38.0. To see the error, remove this
   * comment and run flow
   */
  outputRange: (Array<number> | Array<string>),
  easing?: ((input: number) => number),
  extrapolate?: ExtrapolateType,
  extrapolateLeft?: ExtrapolateType,
  extrapolateRight?: ExtrapolateType,
};

缓动函数默认为线性(t) => t，但您可以使其成为任何标准缓动函数。这是一个很好的列表：https://gist.github.com/gre/1650294

注意：如果您正在使用useNativeDriver: true，则无法使用。

希望这有助于减少波动！

React Native中类似函数的插值？

1 个答案:

插值