如何在 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很有用。