1

I'm trying to make a pleasing "spring" effect to scale a button and other components. In particular I want to scale them in when the view is created and shown, and I want to scale them down when a user taps a button, and if the user releases the button, I want them to scale back up to normal size with the spring effect.

The Facebook library "rebound" is a perfect example, see their demo here: https://facebook.github.io/rebound/.

I tried all the built in curves like bounceIn/Out and elasticIn/Out but they weren't springy enough (elastic is kind of springy).

Any help greatly appreciated!

J McAfferty
  • 13
  • 4
  • check this answer using CurvedAnimation and Curves.bounceOut: https://stackoverflow.com/questions/55364049/how-do-you-add-a-curves-class-animation-to-animationcontroller-in-flutter – AlexZvl Jul 06 '19 at 18:01

3 Answers3

2

As @Remi said, you can use the Curve class and override the transform method.

The difficult part is then figuring out the formula to use. I'd play around with something like this curve calculator to get a formula.

i.e. -(e^(-x/a) * cos(xw)) + 1 with a = 0.15 and w = 19.4.

Another alternative is to use existing curves together - since they all start at 0 and end at 1, you can simply multiply two different curves together in your overloaded curve method.

I'd take a look at the implementation of ElasticIn and ElasticOut to figure out how they did the math, but the dart math library should have everything you need.

rmtmckenzie
  • 37,718
  • 9
  • 112
  • 99
1

You can create your own Curve by overriding transform.

As long a mycurve.transform(0) == 0 and mycurve.transform(1) == 1 you can do pretty much anything.

Rémi Rousselet
  • 256,336
  • 79
  • 519
  • 432
  • Thanks for the response, but in my case I really can't work out the math behind reproducing the spring effect. I was looking for some help with that. – J McAfferty Apr 05 '18 at 04:02
  • We can't give you a formula here. As it's opinion-based. Find an existing one and port it. – Rémi Rousselet Apr 05 '18 at 04:06
1

Better late than never:

you may find the package https://pub.dev/packages/sprung useful.

Defarine
  • 681
  • 8
  • 19