如何制作一个弹性曲线"在Flutter中获得按钮效果?

时间:2018-04-05 03:05:15

标签: animation dart transition flutter curve

我想尝试一个令人愉悦的春天"效果缩放按钮和其他组件。特别是我想在创建和显示视图时缩放它们,并且我想在用户点击按钮时缩小它们,如果用户释放按钮,我希望它们缩小到正常大小弹簧效应。

Facebook图书馆"反弹"这是一个完美的例子,请在这里查看他们的演示:https://facebook.github.io/rebound/

我尝试了所有内置曲线,如bounceIn / Out和elasticIn / Out,但它们不够弹性(弹性有点弹性)。

任何帮助都非常感谢!

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

正如@Remi所说,你可以使用Curve类并覆盖转换方法。

困难的部分是找出要使用的公式。我会玩这样的curve calculator来获得一个公式。

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

。{/ 1}

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

我会看看ElasticIn和ElasticOut的实现,以弄清楚他们是如何进行数学运算的,但是飞镖数学库应该包含你需要的一切。