Add common easing curves as presets

[colelawrence]

I think we could enhance the experience of using beautiful animations by providing a couple more common ones in motion design out of the box.

Initial discussion on Mattermost

Context

During my time at Theatre.js, we saw that for full-time web motion designers and animators like ones at Active Theory used a few common easings that we can easily add to Slint. The co-founder of Active Theory suggested the following easings they commonly used, and we integrated those along-side feedback from our other clients into Theatre.js easing presets.

Different easings are better for different kinds of properties in general, but different design systems will have a variety of custom easings for different use cases. One example of easing design guidelines which could provide more context is available here: "5 steps for systematizing motion design (designsystems.com)".

Enhancement

I'd like to suggest providing default easings that feel a lot better out of the box for when you're quickly prototyping something in Slint or in SlintPad. Of course, you can add a "easings.slint" recipe, but that's much more cumbersome in the context of slintpad or for devs who just want it to "feel good" without thinking too hard.

I'd suggest adding

• Quadratic: ease-in-quad, ease-in-out-quad, ease-out-quad
• Cubic: ease-in-cubic, ease-in-out-cubic, ease-out-cubic
• Quartic: ease-in-quart, ease-in-out-quart, ease-out-quart
• Exponential: ease-in-expo, ease-in-out-expo, ease-out-expo
• Circular: ease-in-circ, ease-in-out-circ, ease-out-circ

Perhaps the order of the names could be cubic-*, quart-* etc, but I'd like to see how well this works with the LSP first since it might have best discoverability if you can write ease-in-| to get auto completes for the different ease-in- curves.

I want to add a demo of all these kinds of easing curves in Slint, but a couple animation bugs discussed in Mattermost have side-tracked me.

[ogoffart]

https://github.com/slint-ui/slint/issues/3783 is specifically asking for easeOutElastic https://easings.net/#easeOutElastic

[ogoffart]

If one would like to contribute new easing function, here are some instructions to get started.

One would need to define it in the Slint language by adding an espression to the EasingSpecific lookup object. https://github.com/slint-ui/slint/blob/master/internal/compiler/lookup.rs#L578 This should return an expression of type EasingCurve, or a builtin macro that will be returning that type. If this is a just an enum-like value without any parameter, that's just about adding something to the EasingCurve enum https://github.com/slint-ui/slint/blob/2f3a69f7dc8061827264bd439e88d77a8863abd9/internal/compiler/expression_tree.rs#L1475 Otherwise, if there is parameter, one need to add a macro. Grep for BuiltinMacroFunction::CubicBezier that does the "cubic-bezier()" function.

That's for the compile time. But one also need to do a runtime one For that one need to add something to the runtime EasingCurve enum https://github.com/slint-ui/slint/blob/2f3a69f7dc8061827264bd439e88d77a8863abd9/internal/core/animations.rs#L142 and implement the actual curve in https://github.com/slint-ui/slint/blob/2f3a69f7dc8061827264bd439e88d77a8863abd9/internal/core/animations.rs#L281

You will have to adapt the generator to convert from compile-time to runtime. You should get compile error for missing enum value in a match that can be easily fixed.

[FoundationKen]

Got all of the new easings working tonight. I will push up a PR in the morning.

[ogoffart]

Done in https://github.com/slint-ui/slint/pull/3812