Implement #2655 - Add more easing formulas

[FoundationKen]

WIP: I'm adding an example page to show all the easings visually.

This adds support for all easings from https://easings.net

[CLAassistant]

All committers have signed the CLA.

[ogoffart]

Thanks a lot for your PR.

Documentation would be nice, a paragraph for different easing curves should be added in https://github.com/slint-ui/slint/blob/master/docs/reference/src/language/syntax/animations.md
(idea: It could even have an example that animates something with all easing curves.)

[ogoffart]

you will have to pass something like slint::cbindgen_private::EasingCurve::Tag::EaseInElastic in the constructor.

[FoundationKen]

Let me know if that looks good now.

[FoundationKen]

Thanks a lot for your PR.

Documentation would be nice, a paragraph for different easing curves should be added in https://github.com/slint-ui/slint/blob/master/docs/reference/src/language/syntax/animations.md (idea: It could even have an example that animates something with all easing curves.)

I added a list of all the types and a link to easings.net. I don't think these can be described in a paragraph, but let me know if you have another idea.

I haven't (yet) put anything dynamic in the help. Is there an example of embedding a slint demo in Markdown I can follow?

[ogoffart]

I haven't (yet) put anything dynamic in the help. Is there an example of embedding a slint demo in Markdown I can follow?

That's fine. The way to do it is just to have it in ```slint code fences like there is one earlier in that file, and it should render if the browser supports it. eg: https://slint.dev/releases/1.2.2/docs/slint/src/language/syntax/animations#animations
But I think the current animation page is good.

There are a few errors from CI:
The docs one is straightforward, just use the suggestion from the error
https://github.com/slint-ui/slint/actions/runs/6713806559/job/18246013206?pr=3812

error: this URL is not a hyperlink
   --> internal/core/animations.rs:156:37
    |
156 |     /// Easing curve as defined at: https://easings.net/#easeOutBounce
    |                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ help: use an automatic link instead: `<https://easings.net/#easeOutBounce>`
    |
    = note: bare URLs are not automatically turned into clickable links

The test you added is failing, I did not investigate why
https://github.com/slint-ui/slint/actions/runs/6713806559/job/18246009329?pr=3812

For the MCU cases, we need to import the Float trait as the error message says .
There is an example in some other modules. eg:

slint/internal/core/animations.rs

Lines 15 to 16 in 2176523

	#[cfg(not(feature = "std"))]
	use num_traits::Float;

And the C++ tests are also failling you have to construct the struct with its constructor

[ogoffart]

Actually, for C++, the best would be to get a constructor that initialize the tag:

slint/api/cpp/cbindgen.rs

Lines 601 to 605 in 2176523

	config.export.body.insert(
	"EasingCurve".to_owned(),
	" constexpr EasingCurve() : tag(Tag::Linear), cubic_bezier{{0,0,1,1}} {}
	constexpr explicit EasingCurve(EasingCurve::Tag tag, float a, float b, float c, float d) : tag(tag), cubic_bezier{{a,b,c,d}} {}".into()
	);

Replace with something like:

config.export.body.insert( 
         "EasingCurve".to_owned(), 
         "    constexpr explicit EasingCurve(EasingCurve::Tag tag = Tag::Linear , float a = 0, float b = 0, float c = 1, float d = 1) : tag(tag), cubic_bezier{{a,b,c,d}} {}".into() 
     ); 

[ogoffart]

Suggested change

	" constexpr explicit EasingCurve(EasingCurve::Tag tag = Tag::Linear , float a = 0, float b = 0, float c = 1, float d = 1) : tag(tag), cubic_bezier{{a,b,c,d}} {}".into()
	" constexpr EasingCurve(EasingCurve::Tag tag = Tag::Linear , float a = 0, float b = 0, float c = 1, float d = 1) : tag(tag), cubic_bezier{{a,b,c,d}} {}".into()

It shouldn't have been explicit, sorry to have mislead you.

[FoundationKen]

No worries...How can I test this locally? I'm not doing anything with CPP and Slint.

[ogoffart]

You can run the driver test like so.

cargo test -p  test-driver-cpp

But I'm not sure this test any of the new curves since they are not in the tests but in the gallery.
To build the gallery, you need cmake:

https://github.com/slint-ui/slint/blob/master/docs/building.md#c-api-build

[ogoffart]

Thanks a lot. This looks good to me.
It's missing a change log entry but we can add that separately.

Screenshot of the new gallery tab for the other reviewers:

[ogoffart]

This hardcoded color cause issues in dark mode, so i'll remove it.