SMIL:CSS Animation: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
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 ==
* 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 to use an implementation backed by getOverrideStyle()
=== Animating CSS Style ===
* Basic outline of how to animate CSS properties:
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>.
*# Clear the contents of getOverrideStyle() on each element, for each animated CSS property
* Steps to animate a CSS property on a specific element, using <code>getOverrideStyle()</code>, during a SMIL animation sample:
*# Perform SMIL interpolation / compositing for each animated CSS property, using getComputedStyle() as the base value.
*# 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 this property in the getOverrideStyle() stylesheet.
*# Perform SMIL interpolation & compositing for the CSS property, using <code>getComputedStyle()</code> as the base value.
* Note that we don't yet implement getOverrideStyle().  Here's a basic outline of how we'd implement getOverrideStyle():
*# 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:
    1. Call getOverrideStyle() on the element, and from this, remove any settings for the CSS property in question. (This ensures that getComputedStyle() won't reflect any animation effects, so it can be used as a 'base value' for animation in the next step)
    2. Perform SMIL interpolation & compositing for the CSS property, using getComputedStyle() as the base value.
    3. Store the final composited value of the property in getOverrideStyle().

Implementing getOverrideStyle()

Note that Gecko doesn't currently implement getOverrideStyle(). Here's a basic outline of how we'd implement this:

    1. Add a new nsICSSStyleRule member variable on each nsStyledElement, which is used as a backing store for the override style.
    2. Internally, this should mostly behave like SVG's content style rule. (See mContentStyleRule in nsSVGElement.h and nsSVGElement.cpp )