14
edits
CSS Transitions: Difference between revisions
→Comparison with SMIL animations
| Line 66: | Line 66: | ||
** Because of this, it's not feasible for CSS animations to be treated the same way that SMIL animations are treated (e.g. all animation definitions are added to a list of animations when a document is loaded/parsed). If we did that for CSS transitions, we could end up with thousands of elements in the animation list, and most of them would probably never be used. | ** Because of this, it's not feasible for CSS animations to be treated the same way that SMIL animations are treated (e.g. all animation definitions are added to a list of animations when a document is loaded/parsed). If we did that for CSS transitions, we could end up with thousands of elements in the animation list, and most of them would probably never be used. | ||
** The approach we'll most likely need to use for CSS transitions is to detect a change in a property that has a transition applied to it. At that point, we can dynamically create an animation that maps to a single element and property, and add it to the animation list. Then when the animation is finished, we should remove it from the animation list. | ** The approach we'll most likely need to use for CSS transitions is to detect a change in a property that has a transition applied to it. At that point, we can dynamically create an animation that maps to a single element and property, and add it to the animation list. Then when the animation is finished, we should remove it from the animation list. | ||
== Differences in animation specifications == | |||
SMIL animation for CSS properties is mostly specified with pre-parsed values. | |||
* e.g. <animation from="100px" to="200px" .../> | |||
A simplified overview the current code flow for SMIL/CSS is something like this (for a from-to animation): | |||
* parse a string representing the 'from' value into a nsCSSValue and stuff it into a nsSMILValue | |||
* parse a string representing the 'to' value into a nsCSSValue and stuff it into a nsSMILValue | |||
* interpolate the current position between the from and to values and store it as a new nsCSSValue inside a nsSMILValue | |||
** requires some sort of general nsCSSValue interpolation framework (between different units, different types of units, etc) | |||
* Set the interpolated value as the 'override style' value | |||
** This essentially requires us to convert the nsCSSValue back to a string and call nsICSSDeclaration->SetPropertyValue(propId, string), which then re-parses the string into a nsCSSValue, etc... | |||
On the other hand, for CSS Transitions, the animation is only initiated if the computed style of an element changes and the animation is between the previous computed style and the new computed style. So if I was to use the existing SMIL/CSS framework to do the animation, I would need some general way to convert an arbitrary property's computed style value into a string (or we could add new API that would allow me to bypass the string portion and just convert directly from computed style to nsCSSValue/nsSMILValue) | |||
* However, even if such a general facility existed to convert from computed style back into an nsCSSValue, it seems like we would be doing quite a bit of extra work parsing, reparsing, converting, etc. | |||
* in the CSS transition case, it would be nice if we could interpolate the computed styles directly and then somehow set that computed style more directly rather than going through all of the intermediate parsing / conversion | |||
= Interaction with SMIL Animations in SVG content = | = Interaction with SMIL Animations in SVG content = | ||