visual-docs icon indicating copy to clipboard operation
visual-docs copied to clipboard

convert cubicBezier & steps easings

Open cameralibre opened this issue 5 years ago • 2 comments

Anime.js provides multiple types of easings.

Some types of anime.js easings are now being converted to CSS ( #2 ):

  • [x] linear ➡️ linear
  • [x] Penner's equations (easeInQuad, easeOutCirc, easeInOutQuart etc) ➡️ cubic-bezier() equivalents

Some types of easing will not work in CSS, so I can't support them:

❎️ easeInElastic, easeOutBounce etc ❎️ spring equations ❎️ custom easing functions

Some types should be quite straightforward to convert, as they are based upon CSS themselves:

  • [ ] cubicBezier() ➡️ cubic-bezier()
  • [ ] steps() ➡️ steps()

cameralibre avatar Nov 26 '20 02:11 cameralibre

Some types should be quite straightforward to convert, as they are based upon CSS themselves:

  • [ ] cubicBezier()➡️ cubic-bezier()

Actually this is not straightforward at all, or at least, I can't use the same lookup table approach - there is a small, finite number of Penner's easings, so each one will create a unique fingerprint when run on two values (0.2 & 0.7), and I can be sure that all are covered by hardcoding them in the script.

cubic-bezier() however, has a theoretically infinite number of variations, and I don't think that just two data points will describe the whole curve.

cameralibre avatar Jan 20 '21 00:01 cameralibre

It might be worth exploring bezier.js to see if it can get control points from given points on a curve

cameralibre avatar Feb 02 '21 20:02 cameralibre