Confirmed users
490
edits
SMIL:CSS Animation: Difference between revisions
Jump to navigation
Jump to search
→Overview of Proposed Strategy
| Line 6: | Line 6: | ||
* It can only currently interpolate between fixed-length units. (inch, mm, pt, etc). (unit-conversion code needs a reference to the PresContext & font-metrics to interpolate/interconvert between fixed-length units / display pixels / em-units / ex-units.) | * It can only currently interpolate between fixed-length units. (inch, mm, pt, etc). (unit-conversion code needs a reference to the PresContext & font-metrics to interpolate/interconvert between fixed-length units / display pixels / em-units / ex-units.) | ||
= Overview of Proposed Strategy = | == Overview of Proposed Strategy == | ||
=== Animating CSS Style === | |||
* | As suggested in the [http://www.w3.org/TR/smil-animation/#AnimationSandwichModel documentation on the "SMIL Sandwich Model"] in the smil-animation spec, I'm proposing that we use an implementation backed by <code>getOverrideStyle()</code>. | ||
*# | * Steps to animate a CSS property on a specific element, using <code>getOverrideStyle()</code>, during a SMIL animation sample: | ||
*# Perform SMIL interpolation | *# Call <code>getOverrideStyle()</code> on the element, and from this, remove any settings for the CSS property in question. (This ensures that <code>getComputedStyle()</code> won't reflect any animation effects, so it can be used as a 'base value' for animation in the next step) | ||
*# Store | *# Perform SMIL interpolation & compositing for the CSS property, using <code>getComputedStyle()</code> as the base value. | ||
*# Store the final composited value of the property in <code>getOverrideStyle()</code>. | |||
*# Add a new nsICSSStyleRule member variable on each nsStyledElement, which is used as a backing store for the override style. | |||
=== Implementing <code>getOverrideStyle()</code> === | |||
Note that Gecko doesn't currently implement <code>getOverrideStyle()</code>. Here's a basic outline of how we'd implement this: | |||
*# Add a new <code>nsICSSStyleRule</code> member variable on each <code>nsStyledElement</code>, which is used as a backing store for the override style. | |||
*# Internally, this should mostly behave like SVG's content style rule. (See mContentStyleRule in [http://mxr.mozilla.org/seamonkey/source/content/svg/content/src/nsSVGElement.h nsSVGElement.h] and [http://mxr.mozilla.org/seamonkey/source/content/svg/content/src/nsSVGElement.cpp nsSVGElement.cpp] ) | *# Internally, this should mostly behave like SVG's content style rule. (See mContentStyleRule in [http://mxr.mozilla.org/seamonkey/source/content/svg/content/src/nsSVGElement.h nsSVGElement.h] and [http://mxr.mozilla.org/seamonkey/source/content/svg/content/src/nsSVGElement.cpp nsSVGElement.cpp] ) | ||