Paint Routines + Timer Callback Animations

[Sawer]

Hello everyone.
I've created this thread to learn more about paint routines and the timer callback. (tired of using png's and I really love interactive animations).
Was just wondering how can I implement certain animations like: Linear - Ease in - Ease out - Cubic brazier? Just like CSS Animation properties (Web Development).
Is it possible to have these kind of functions already setup in a library or api? @Christoph-Hart @d-healey @ulrik
If not, how can I start simple and create the functions from scratch?

Thanks.

[d.healey]

@Sawer I have a snippet for a simple panel animation on Patreon, making a library sounds like a good idea, I might give it a go!

[Sawer]

@d-healey Thanks. Would be really cool to have that. Anyway I already have that snippet, probably by reviewing it again I can get new insights. Thanks

[d.healey]

@Sawer Here's a simple namespace that can be used to animate any property of a panel.

If you want to animate more than one property at the same time they must both have the same number of animations - because they share the same timer. For example if you animate the x position from 10 to 100 that is 90 animations, so if you also want to animate the y position the end position also needs to be 90 from the start position. There are ways we could work around this but it gets messy and I'm trying to keep this simple.

namespace Animate
{
	inline function increase(property, end, step)
	{
		this.set(property, this.get(property) + step);

		if (this.get(property) >= end)
			this.stopTimer();
	}
	
	inline function decrease(property, end, step)
	{
		this.set(property, this.get(property) - step);
		
		if (this.get(property) <= end)
			this.stopTimer();
	}
}

HiseSnippet 972.3ocsV0saaaCElxILnRcsXEXO.B4JYT2.6tltAr0sz3jTXrkTg4tfc05XnniHhDofHUZLFxiyd+108lsCEorTRbRZM17EF57+24GdHiKkTlRIKQd9uadAC48E3oyE5zwoDt.MYOj2iwGRTZVYnk0tyKHJEKA44s1aLL77WGU+6u+wcIYDAk0xBgNVxorelmy0sbi24m3YYGPRXuim2Q6WryDpTLVlIq.7rFdHpfPOibJ6HhQsdXj2F6mv0xxoZhlo.c1UlLeZp7CBq9GyU7SxXFhQnofirrQiS4YIwM4pBg7VOtMyWyl4eE9PdBeA+1JvWVKHr0ht0.ud2EjF8Y.IuNPZcKjdBdJsjWnakXvyCwSDPCYFAJ0cghUWTu+ZM7XIngPuUN4L1Ak.wBKhd4vgCBg+5+cAABnvpfhLK70BdNj.A+YfOWjwErvYUBplKEgbAsjQTrnhRYAqTOePHSjLHDFJJ5G3CV3qS4psTLcGUpYcZGV8Cep0DHt997YgQKQke3UFeCdswmZYgYHoLBLy+x.+aBuD1+Qv6YMvy2+1A32eO.7xf.XFVoCOmTFFSDrrQguJroc.9ZrLuPJ.hnMsh2zTPreZvXsyFSxxNAl8iZxxn90cF.S6Vo0RwHiqNljUwh5a.iq8s0hd0lWr4fvmuMzpGY5z9rLEqidKJZV8bp4GboALsIfKX2ZF3jWmBWuuHENoFSKkYQzF6F.9FPdcJ0j3ZRoM0i11f2KAGdOgzTrbtdQ455wD7TG7bjTydqqTBMpvqKZ1rkJy4qLSOdIhcc+a2vHQU9IrxtYsQQ3P9U2brwm1lCpsrzQQoXhfqeaAyQefLKwrQv78M2yfb0U3qecxdDMwr5wwK1NmyMvwaO14vta6hHe7dL0YvrNrFdQy.frtV5iZVSYZlHND5GfsMVzEcWuOukXxNefmnSQdXuTODJkwOM0bEwFer4liNgAaCyicgw1iqiiO10v6FneuSf9iK1QQNmMQDWxfAFyZRzM2yBa3kIUYD8UW6ateyI.5nWYWqYepPw0y6d+2mwcACuy6B9Tg3SvwbMMc4Xr2RvHzq++.itaPeDd+YyXTcK.WGevuspWWdOg+WjUZt3zCI5RNz7wGUkOEd3.kAQW.ydJyrUOyfjkdng1TAlBKvqI9G3mS3HCsmS3nFgnbBsT9dp8br4N5GTyAvjn9II9vai.5vQn5y1fc3gaMDkCOW38TpI8eFbDb4177UvludEr4EqfMauB17xUvluYEr4auSaLuT60UZYt83.vHd+5kbdd6KHvjU8TH5eAf0HQ4

[Sawer]

@d-healey Super Cool thanks sooo much man. will dive on it later.

[Sawer]

So, I dived into a little "Ease in" animation.
Not perfect as I want but it's a start.
If anyone has any idea how to make the transition more smoother would be great to share.
As well as if by checking the code there's a way to make it more cleaner that's super cool as well.

HiseSnippet 937.3ocsVstaaaCElxIZHRcEaEnO.DEXEJadtRtWG55VRbhGL1RpQTWw.FJJXjnsHBEo.IUS8B56Vej1av1gh9h7lawfwpyOhOW9N5iGdNexiUxLpVKUHufWLqhh79b+zYBSwfBBSfFcLx6K7OTvJIFlTnGjlhNZVEQqo4HOuc9IaRdA6hZ97m+3QDNQjQW4BgdojkQ+EVIyrx63C9YFmOjjSeAqrU1O3fQYRw.IWVCDZG+XTEI6RxT5YDaZc7Qde1I4LiTkZHFpF4s6Qx7YoExqDt7eISytfSsFInTnPN2Ck7bKisdQCJX77wKN3ZDTkwqZC63ZC21+TVNao+UsiurI.dEh18CuNqSucVidIsoWbK5sAJ40hR65nzs7SyTrJypHV9bC+QBCUMg.s81TwkKpy0c7GHgLDldkjKoCUfwRDQ2ONta+338eZHz30F7aHJ7XhfxSvOCu.2TpYfrrRJ.in63BeG.RnMasgVA4F2tBTQN3p+i.mgtz6oolwPKzbtr1vDznI0hL6HUzz8CuNLLHL3d2qe7WEFvlfiZp42CEsW+X7WaK29gAWGFDzD3adFN4ogAuyBhx0T7RH+PaH36dWLdQkR1XY52Tlvfo8l.yiGx4Qwuc3vj91+fyG3WaO51wwH2+z8tpfYntfVPv4Q.iVmSyLDwTNM526G2E+cOrayitKNI9UcwMEK7c1VVq9gc1WMfv4W.C4qZHM8iv.SAS2SQqrMsH.YC5EfMDkCdTBb2s.JVJNSZnO2UC3AFh+mglLYiwr2zJImCEbSgcOpOBvHQc4ETUW31mWSWlHL5t99f+Gden85ZlavqUhRwHAy77Jp3CsDilOsBe6WGcLwPrKQy8A4UQUFlkBdGSeCnH4VoB7OlpuzHqZxc9HNxaOSSzatXgy10QLXsZOe2M.5ssk3l013JVtoXoi2qNnfxlVzR7icvERUNUkx9i0DJcdOmjyp0s8i92JAfFjLulSLqKLYUimG.tcVSMvtwKzLyr1p0+uoV8ekh2xeLyjUrYN1YCbDtC+Tvw4Z72z+jISfE2UDbW+g+1mFAcjS3a5oDihASO9mUWlBBJYT3oKfYJ61gWG6bryN1Za6.oftUiweAelGLwZ6MOXxhfnRRlR95L2No8sH603A3jn4EnA9mZswInl8T.mebuXTI7BsWmkYO9eKrZsYL82BL2eKv7fs.yC2BLOZKv73s.yS9nXr+VhCqMR2uuBtPOc7IMhWddmHHvjUyTH5uA8BAkuB

[clevername27]

Brilliant as always, @d-healey.