Re: [css-transitions]: Lacking satisfying specification interrupted transitions

"L. David Baron"  schrieb im Newsbeitrag news:20150318060459.GA21119@pescadero.dbaron.org... 
On Tuesday 2015-03-17 15:09 +0100, Axel Dahmen wrote:
> Rather than trying to define a single correct behavior
> that works for everybody's needs, I think we should
> have some reasonable default in the spec that works
> for the most common cases (e.g., simple transitions
> between a :hover and non-:hover style), but then have
> a mechanism for authors who want to do particular
> other things to override that.  I think that override
> mechanism probably needs to involve script, and I'd
> hope that the work going on on Web Animations and in
> the houdini task force will be able to provide that.

I believe it’s important to provide authors with a predictable behaviour. They wouldn’t want to consider different scenarios for any kind of situations. Who would prefer complexity over simplicity? Why do you see this necessity?



> What matters is having UI that works the way people
> want it to. Things that look nice mathematically
> don't necessarily produce good results; I definitely
> found that while experimenting with the transition
> reversing behavior for Gecko.  And that, in turn,
> requires that people experiment with the behavior.

Did you visit the sample code? There you can check for yourself if a mathematically documented approach will work already right now? By visiting the sample you can check for yourself that my concept actually is providing a “UI that works the way people want it to”.

You could also watch the sample recording in the video, too, if you wouldn’t want to test for yourself.



> I think one of the big obstacles to this is that it
> requires a distance metric for all animatable value
> types.  For example, how far apart are 'yellow' and
> 'green', and how does that distance compare to the
>  distance between 'yellow' and 'blue'?  (It's actually
> not that hard for colors, but it's harder for
> transforms.)

Don’t all kind of transitions require a metric approach by nature of their behaviour? Even transitions like those applied background images are merely a blend transition. My suggestion is just about how to apply the easing function for interrupted transitions. It’s not re-defining transitions.



> Videos are actually rather hard to comment on; it's
> hard to reread sections, hard to skim one part and
> read another part carefully, etc.

Sure. That’s been my personal approach of providing an easily comprehensible workshop on my investigations. I’ve been using a visual medium to demonstrate a visual issue. My approach was to deliver information with no prerequisites required. Everything has been served in the video: problem description, background, analysis, sample, code, application, conclusion; easily to be consumed and comprehensively judged within 12 minutes.

Below please find the transcript of the algorithm analysis part I’ve extracted from the subtitles I have created. I believe that it will suffice the requirements, yet it’ll take considerably longer to comprehend the reasoning from written explanatory contents without watching the video. So yes, I fully agree with you, that - as a second step - this written information surely is required to being able to discuss my proposal after having consumed the video’s content and being convinced that it’s contents are worth discussing on.



> That said, doing this seems quite complicated, which
> means it's going to take a long time to get it all
> right, specified, and interoperably implemented.  We'd
> be better off making tools that give authors the
> ability to iterate quickly on varying animation
> behaviors than trying to put something perfect in the spec.

As I wrote above, my suggestion is just about amending the application of the easing function on interrupted transitions. That’s not complicated. It’s quite the contrary: It’s plain easy. Easy to implement, easy to comprehend, easy to utilize.

In my sample code I took an iterative approach, so everyone will be easily able to follow the code from the considerations beforehand. But using mid-level algebra the break-even point could also be calculated in a single step.



So, here’s the transcription from the explanatory part of the video:



Let’s start by examining a transition having a standard easing function applied:

When transition #2 interrupts transition #1 we’ve already reached a certain property value and transition speed at this point in time. So the task now is to have transition #2 not start at this point in time, but instead we need to update transition #2 in a way that it appears to already have progressed and have the current property value and transition speed at this point in time.

How do we achieve this?

To achieve this, we need to correlate both transitions’ speed at the point of time when the first transition gets interrupted.

Using standard cubic easing functions there are always two locations in a transition progress evaluating to the same speed. Any pair of equal transition speeds can always both be found in the acceleration and the deceleration phase of the transition. To determine whether we have to look in the acceleration phase or the deceleration phase of the second transition to match the current transition speed of the first transition we first need to calculate the average speed of the second transition.

If the current transition speed of the first, the interrupted, transition is slower than the average transition speed of the second, the adjoining, transition, then we need to accelerate. So we need to look in the acceleration phase of the second transition to find a matching speed point.

If, on the other hand, the current transition speed of the first, the interrupted, transition is faster than the average speed of the second, the adjoining, transition, then we need to decelerate. So we have to look in the deceleration phase of the second transition for a matching speed point.

Please note: If we’d be using inverse cubic transition easing functions, we’d also be required to reverse our search for the acceleration/deceleration phase. Because with these inverse cubic transition easing functions acceleration actually takes place in the latter half and deceleration takes place in the first half.

Using linear transitions these considerations don’t even apply because linear transitions never change speed over time.

So how do we get the second transition amended then?

To achieve this, we now need to calculate a new starting value and starting speed for the second, the adjoining transition for that it will have the current value and the current speed now, while it’s interrupting the first transition.

In theory, we’d now need to go back in time … We need to know: Where would the second, the adjoining, transition have to have started to have the same value and speed that the current, the interrupted, transition has right now?

We need to iterate through this calculation until we found a hypothetical value and speed of the second, adjoining transition that equals the current speed and value of the first, the interrupted, transition.



Axel