Question

我正在查看我的UI / UX的Animated库功能，我正试图设置动画序列的速度。

按下屏幕上的项目时会发生以下情况。它'弹出'项目。这发生在几秒钟的空间，但我想加快这个过程。我假设我可以在我的并行操作中添加Animated.timing...，但我没有随处可见：/

Animated.parallel([
    Animated.sequence([
      Animated.spring(
        this.state.enter,
        { toValue: 0.9, tension:40, friction: 2 }
      ),
      Animated.spring(
        this.state.enter,
        { toValue: 1, tension: 40, friction: 10 }
      )
    ])
  ]).start();

您知道this.state.enter = new Animated.Value(0.1)

Answer 1

Facebook在官方文档中指出，在使用Animated.spring时，您必须在两对参数之间进行选择：

1）Bounciness和Speed（默认值为8和12）

OR

2）张力和摩擦力（默认值为40和7）

因此，如果你想加快这个过程，那么最好的选择就是玩弄Bounciness和Speed。

来自doc：

var springConfig;
    if (config.bounciness !== undefined || config.speed !== undefined) {
      invariant(
        config.tension === undefined && config.friction === undefined,
        'You can only define bounciness/speed or tension/friction but not both',

此处有更多信息：https://github.com/facebook/react-native/blob/0.29-stable/Libraries/Animated/src/AnimatedImplementation.js

React-Native Animated：Spring Speed

1 个答案: