React Native 中的函数式插值？

Question

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

但它是线性的。有没有办法让它呈指数增长。最好的例子是 WhatsApp 联系人的视差滚动：

观看标题“沙丘”

我现在如何拥有它 = 红线（线性）

我想如何 = 蓝线（线性与缓动，指数，不管它叫什么）

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

我已经定义：

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>

A和插值：

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

本质上是线性的（我尝试设置 10 个以上的关键点 ininputRange和outputRangebit 但它变得凌乱并且看起来不够自然）

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

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

缓动函数默认为 linear (t) => t，但您可以将其设为任何标准缓动函数。这是一个不错的列表：https : //gist.github.com/gre/1650294

注意：如果您使用useNativeDriver: true.

希望这有助于减少波涛汹涌！