如何在 Flutter 中制作“弹性曲线”以获得按钮缩放效果？

Question

我正在尝试制作令人愉悦的“弹簧”效果来缩放按钮和其他组件。 特别是我想在创建和显示视图时缩放它们，并且我想在用户点击按钮时缩小它们，如果用户释放按钮，我希望它们使用spring 效果。

Facebook 库“rebound”是一个完美的例子，在这里查看他们的演示： https://facebook.github.io/rebound/ 。

我尝试了所有内置曲线，如bounceIn/Out 和elasticIn/Out，但它们的弹性不够（弹性有点弹性）。

非常感谢任何帮助！

Answer 1

正如@Remi所说，您可以使用Curve类并重写transform方法。

然后，困难的部分是找出要使用的公式。 我会玩这种曲线计算器之类的东西来获得公式。

即-(e^(-x/a) * cos(xw)) + 1 ， a = 0.15 ， w = 19.4 。

另一种选择是将现有曲线一起使用-由于它们都始于0且始于1，因此您可以在重载曲线方法中简单地将两个不同的曲线相乘。

我将看一下ElasticIn和ElasticOut的实现来弄清楚它们是如何进行数学运算的，但是dart数学库应该具有您需要的一切。

Answer 2

您可以通过覆盖transform创建自己的Curve 。

只要mycurve.transform(0) == 0和mycurve.transform(1) == 1您就可以做很多事情。

Answer 3

迟到总比不到好：

您可能会发现 package https://pub.dev/packages/sprung很有用。