react原生动画，Easing.bounce强制反弹仅两次

Question

Easing.bounce是否有可能只弹出2次？而不是3次；

Animated.timing(
    this.y_translate,
    {
        delay: 0,
        toValue: 1,
        easing: Easing.bounce,
        duration: 1000,
    }
 ).start();
 });

Answer 1

简短的回答是否定的。

长篇大论的答案是看看文档。

你会看到Easing.bounce是基于this mathematical definition的，它的弹跳发生了4次。您可以在example code中确切地看到它们是如何做到这一点的(请注意easeInBounce、easeOutBounce和easeInOutBounce函数)。如果您将其与Easing.bounce的React Native源代码中的内容进行比较，您将发现相同的数学计算。

因此，如果你想有一个双反弹的效果，你需要自己做数学计算。例如，您可以使用自己的bounce方法创建自己的Easing类。然后在动画中使用它来代替Easing.bounce。

// You can also extend Easing and just define a new method (or override)
// if you want access to Easing's other methods.
class MyEasing {
  /**
   * Provides a two bounce effect.
   */
  static bounce(t: number): number {
    /* Code Goes Here */
    return something;
  }
}

// ... in your code ...
Animated.timing(
    this.y_translate,
    {
        delay: 0,
        toValue: 1,
        easing: MyEasing.bounce,
        duration: 1000,
    }
 ).start();
 });

但是，您如何进行此计算超出了问题的范围，因此我将留给您来解决这个问题。