React-Native动画：Spring Speed

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)

。

- scgough

---

从文档中可以看出：弹簧：简单的单弹簧物理模型，与折纸匹配。摩擦力：控制“弹性”/超调。默认值为7。张力：控制速度。默认值为40。张力不是控制速度的吗？ - Nader Dabit

@NaderDabit 我确实看了一下，但是我所做的更改似乎并没有显著影响速度。我会重新审视一下。谢谢。 - scgough

Answer 1

Facebook在官方文档中指出，使用Animated.spring时必须选择两组参数之一：

1) 弹性和速度（默认值为8和12）

或者

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

因此，如果您想加快过程，最好的选择是尝试调整弹性和速度参数。

---

来自文档：

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

- Stan Dezaid