SMIL:CSS Animation: Difference between revisions
Jump to navigation
Jump to search
Implementing
| 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] ) | ||
Revision as of 22:43, 30 October 2008
Current status
There's an existing smil_css patch in dholbert's smil-patches patch-queue. This patch applies on top of the other patches in the queue, and it makes use of a simple "GetOverrideStyle" implementation in order to set styles.
The smil_css patch is not complete yet -- it currently has these limitations:
- It can only animate CSS properties of type nsCSSValue. (not nsCSSValuePair / nsCSSValueRect / etc)
- 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
Animating CSS Style
As suggested in the documentation on the "SMIL Sandwich Model" in the smil-animation spec, I'm proposing that we use an implementation backed by getOverrideStyle().
- Steps to animate a CSS property on a specific element, using
getOverrideStyle(), during a SMIL animation sample:- Call
getOverrideStyle()on the element, and from this, remove any settings for the CSS property in question. (This ensures thatgetComputedStyle()won't reflect any animation effects, so it can be used as a 'base value' for animation in the next step) - Perform SMIL interpolation & compositing for the CSS property, using
getComputedStyle()as the base value. - Store the final composited value of the property in
getOverrideStyle().
- Call
Implementing getOverrideStyle()
Note that Gecko doesn't currently implement getOverrideStyle(). Here's a basic outline of how we'd implement this:
- Add a new
nsICSSStyleRulemember variable on eachnsStyledElement, 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 nsSVGElement.h and nsSVGElement.cpp )
- Add a new