`tween` simplify

[TodePond]

The tween function has lots of good functionality now. It has grown to be more complicated. Maybe we could try to simplify it down into smaller pieces. The one function does a few different things:

• An extremely simple tween (using launch and land options)
• Named eases from easings.net
• Manually provided easing functions

Here's a wishlist I would have:

• [ ] Can the easings.net functions be modifiable with the launch/land values too?
• [ ] If the above checkbox is possible, then we could get rid of the basic 'launch' and 'land' ease, and just make one of the easings.net the default.
• [ ] I wonder if the easings.net things could just be refined down to the ones that just ease in and out, so that the list is smaller. (as long as the above checkbox is possible).
• [x] I feel like all the in-built easings.net functions should be functions on the Tween object, like Tween.EASE_IN_CIRCULAR or something. Then the tween function would only do one thing: accept an ease function. No strings, or default launch/land behaviour.

Those are my loose + messy thoughts!

[Magnogen]

Ooo Tween.EASE_IN_CIRCULAR() is a good idea! I can add that pretty easily (bah dum tss).

Unfortunately though, all of the easings.net functions are hardcoded, and don't have any extra parameters that can be changed - unless you know what you're doing. (I most certainly wouldn't unless I played around with it more! 😅)

What do you mean by refining the easining to in and out? Ones like Tween.EASE_IN_CUBIC() and Tween.EASE_OUT_CIRCULAR(), but not Tween.EASE_IN_OUT_QUADRATIC()?

[Magnogen]

I've been playing around with some of the math, turns out it is possible to condense some of the equations (Quadratic, Cubic, Quartic & Quintic; with more functionality for between powers, and such)

You can see what I've done at https://www.desmos.com/calculator/1t3xehgaks

Change the slider p to change the overall power, and see how that changes the curves and animation.

I'm not really sure what that would be called, so it's just "p" atm, I'd welcome your thoughts :P

EDIT

I'm not sure that seperate launch and land values would work quite as well as what you have currently, as it'd result in something like this, and that can be a bit weird

https://user-images.githubusercontent.com/25611707/145552951-354290d0-5b12-4247-bb77-7d732f5e8b4a.mp4

[TodePond]

Cool! Really interesting! So perhaps it sounds like it would be great to have the in-built functions changed to properties on the Tween object to start with.

And then after that, some experimentation about being able to modify their shape could come later. It looks like you've been discovering some cool things already!

[TodePond]

That interactive demo looks great! Maybe p could be strength or something.

[TodePond]

I see what you mean about the issues of combining ease in and ease out. If it smartly blended between them smoothly that would be amazing, but maybe that's something to investigate at a later time!

[Magnogen]

Alright, that seems like some reasonable expectations!

Syntax?

Also, Tween currently works like so:

var obj = { property: 0 };
obj.tween('property', { from, to, over, launch, land });

How do you think the new system could work? Perhaps like:

obj.tween.ease_in_out('property', { from, to, over, strength }); // .ease_in() and .ease_out() could also be options

and other functions like:

obj.tween.ease_in_out_sine('property', { from, to, over }); // again with .ease_in() and .ease_out()
obj.tween.ease_in_out_exponential('property', { from, to, over });
obj.tween.ease_in_out_circular('property', { from, to, over });
// etc.

Or some other way?

[TodePond]

Hey! How about this?

obj.tween(”property", {from, to, strength, ease: Tween.EASE_IN_OUT_SINE})

[TodePond]

Or maybe even something along the lines of:

obj.tween("property", {from, to, easeIn: true, easeOut: false, ease: Tween.EASE_SINE})

[Magnogen]

Sure I can get started on that! Would Tween.EASE_SINE be a function?

[TodePond]

Yeah :) I think we would need to change the Habitat.Tween object so that it's a global, similar to how Stage is.

I'm not 100% set on any of this by the way, so please do feel free to try your own thoughts and ideas too!

[TodePond]

Oh wait, in the final example I gave, it would probably be an object that contained a few different functions as properties. But maybe in the first example I gave it would just be a function. Maybe that's a potential reason why the first example would be better and simpler 🤔

[Magnogen]

cOnFuSiOn

Okay I'll have a think and get back to you about some ideas that try to keep it simple. If you come up with something that stands out above the other options, let me know.

[TodePond]

Ignore my ramblings haha.

This would be a great target to aim for:

obj.tween(”property", {from, to, over, strength, ease: Tween.EASE_IN_OUT_SINE})

[Magnogen]

Hey, did you still want to include the launch and land parameters that you already have in place?

They're currently the only way to smoothly tween with different speeds for launching and landing, other and EASE_IN and EASE_OUT

[TodePond]

Ok I merged the changes! 31c58ad2cd33b194dcd77660bacf56aa8587e3fd

This seems good for now! I would like to experiment in the future with some other intuitive ways of making easings and stuff, but for the moment, this is very useful!