-
Notifications
You must be signed in to change notification settings - Fork 657
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-easing] "smooth" (C1-continuous) easing between keyframes #6696
Comments
There is a lot of discussion about this in #229 |
Well, kinda. I've re-skimmed the thread and don't see anything about automatic continuous easing, but there are indeed some useful concepts discussed in there. Hermite splines, in particular, seem to be potentially relevant. |
There's quite a bit there if you expand the comments, like the |
To follow up, what I meant was that if you have three segments in your animation, and you supply an easing for the first and third, you could use Potentially you could chain If it lacked a preceding or following, those would just put the control point at 0,0 and 1,1; it lacked both, it could just act like |
In today's CSSWG meeting, @svgeesus brought up the problem that interpolation between keyframes today is exclusively pair-wise. At the transition point from one pair to another, the animation curve will often be discontinuous, causing a potentially jarring velocity change. Authors can manually adjust for this to a degree by writing cubic-bezier() curves, but it's non-trivial and they have to readjust them every time they tweak the animation.
Based on the discussion between Chris, myself, and @flackr, I suggest we add an easing keyword
smooth
, which automatically computes an interpolation that is C1-continuous with neighboring pairs. It's been a while since I've been in the literature for this, but I think this can be done with a single bezier segment, so long as the neighboring segments are also bezier (and they are, or can be pretended to be in the case of step). (IIRC, you set the first control point to be the reflection of the preceding curve's second control point, and the second to be the reflection of the following curve's first control point?) Others will probably know the details better than me.SVG tried to add a curve type that does this via Catmull-Rom curves, see Shepers' blog post.
The text was updated successfully, but these errors were encountered: