Re: [csswg-drafts] [web-animations-1] Additive transform animations easily invoke undesirable matrix interpolation

Thanks. (:

I don't think the interpolation behaviour can be tweaked to deal with `none` because the `none` disappears after composition. `add(rotate(45deg), none) == rotate(45deg)`

Perhaps the reasons for doing composition before interpolation is to deal with neutral keyframes and add+replace keyframes. I think a new operation will need to be added to handle that case, one that takes an interpolable CSS value and produces a "noop" equivalent.
Examples:
length: `5px` -> `0`
transform: `rotate(45deg) translateX(10%)` -> `rotate(0deg) translateX(0)`
shadow: `10px 20px 30px 40px blue inset, 50px 60px 70px 80px green` -> `0 0 0 0 transparent inset, 0 0 0 0 transparent`

Let's say we have the animation `[{transform: 'scale(5)'}]` at 50% progress ontop of an underlying value of `rotate(90deg)`.
To find the final animated value:
1.   Compute the neutral keyframe value by getting the noop equivalent of the second keyframe: `scale(1)`
2.   Interpolate `scale(1)` -> `scale(5)` by 50%: `scale(3)`
3.   Find the noop equivalent of the underlying value: `rotate(0deg)`
4.   Interpolate the underlying value to its noop equivalent by 50%:  `rotate(45deg)`
5.   Composite the interpolated underlying value and keyframe values together: `rotate(45deg) scale(3)`

Pseudocode:
```
U = underlying value
A = keyframe A
B = keyframe B
P = interpolation progress
final value = add(
    interpolate(
        isAdditive(A) ? U : noop(U),
        isAdditive(B) ? U : noop(U),
        P),
    interpolate(
        isNeutral(A) ? noop(B) : A,
        isNeutral(B) ? noop(A) : B,
        P))
```


-- 
GitHub Notification of comment by alancutter
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2204#issuecomment-358912270 using your GitHub account

Received on Friday, 19 January 2018 09:29:42 UTC