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

【问题标题】：How to make a "Springy curve" in Flutter for a button scale effect?如何在 Flutter 中制作“弹性曲线”以获得按钮缩放效果？
【发布时间】：2018-09-14 18:03:37
【问题描述】：

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

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

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

非常感谢任何帮助！

【问题讨论】：

使用 CurvedAnimation 和 Curves.bounceOut 检查这个答案：stackoverflow.com/questions/55364049/…

标签： animation dart transition flutter curve

【解决方案1】：

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

然后，困难的部分是找出要使用的公式。我会使用类似curve calculator 的东西来获得公式。

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

另一种选择是一起使用现有曲线 - 因为它们都从 0 开始并以 1 结束，您可以在重载曲线方法中简单地将两条不同的曲线相乘。

我会看一下 ElasticIn 和 ElasticOut 的实现，以了解它们是如何进行数学运算的，但 dart 数学库应该有你需要的一切。

【讨论】：

谢谢！该网站是一个很好的资源，并且该公式有效！

【解决方案2】：

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

只要mycurve.transform(0) == 0 和mycurve.transform(1) == 1 你几乎可以做任何事情。

【讨论】：

感谢您的回复，但就我而言，我真的无法计算出重现弹簧效果背后的数学原理。我正在寻求一些帮助。
我们不能在这里给你一个公式。因为它是基于意见的。找到一个现有的并移植它。