Scirra / Construct-feature-requests

A place to submit feature requests and suggestions for Construct.
https://www.construct.net
11 stars 1 forks source link

custom ease editor support import a string like CSS linear() #345

Open XHXIAIEIN opened 1 month ago

XHXIAIEIN commented 1 month ago

Reviewed guidelines

Checked for duplicate suggestions

Summary

I have parameters based on CSS linear() from other places(https://codepen.io/jh3y/pen/MWdrGGj), and I really hope the ease editor can let me quickly paste it in and create a curve.

Possible workarounds or alternatives

I still can't quite get the hang of using the ease editor because it's more "troublesome" than I thought. I have a hard time mastering the curve of dragging animation points, and I always end up making the lines messy. Although I can edit each point manually and then adjust the coordinates on the toolbar above, I think this is very cumbersome because I have to repeat it many times.

Proposed solution

support a parameter input box to import the parameters of CSS linear()

linear(1, -0.5, 0)
cubic-bezier(0.25, 0.1, 0.25, 1)
linear(
    0 0%, 0.0014 11.11%, 0.0071 19.24%,
    0.0188 26.6%, 0.037 33.33%,
    0.0634 39.87%, 0.0978 46.07%,
    0.1407 52.02%, 0.1925 57.74%,
    0.2559 63.49%, 0.3295 69.07%,
    0.4135 74.5%, 0.5083 79.81%, 0.6141 85%,
    0.7312 90.09%, 1 100%
    );

Why is this idea important?

This will be very helpful for both C3 and CA, allowing us to create better animation effects

Additional remarks

No response

CrackHub commented 1 week ago

More Enhancements

Ref: https://gsap.com/docs/v3/Eases/CustomEase/

  1. Support smooth segment edit points.

1

  1. Built-in eases. We can select ease in editor. We can easily edit them currently we need to create everything from the beginning. For Example: We can select bounce.out ease in "Ease Editor" and it will create points for us. And we can edit them easily.

2

  1. CSS codes to Construct Ease Editor Converter. Maybe we can use this codes for create eases in Construct. (Example codes in gif 2)