SMIL:CSS Animation: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(New page: = Current status = There's an existing [http://hg.mozilla.org/users/dholbert_mozilla.com/index.cgi/smil-patches/file/e40748053af3/smil_css smil_css patch] in the smil-patches [http://hg.mo...)
 
m (SVG:SMIL+CSS moved to SMIL:CSS Animation: Moving SMIL pages (all 5) that we currently have on the wiki to their own section separate from SVG, since that seems like a good idea in the long run.)
 
(12 intermediate revisions by one other user not shown)
Line 1: Line 1:
= Current status =
= Current status =
There's an existing [http://hg.mozilla.org/users/dholbert_mozilla.com/index.cgi/smil-patches/file/e40748053af3/smil_css smil_css patch] in the smil-patches [http://hg.mozilla.org/users/dholbert_mozilla.com/index.cgi/smil-patches patch-queue].  This patch...
There's an existing [http://hg.mozilla.org/users/dholbert_mozilla.com/smil-patches/file/tip/smil_css smil_css patch] in dholbert's [http://hg.mozilla.org/users/dholbert_mozilla.com/index.cgi/smil-patches smil-patches patch-queue].  This patch applies on top of the other patches in the queue, and it makes use of a simple [http://hg.mozilla.org/users/dholbert_mozilla.com/smil-patches/file/tip/getoverridestyle.patch "<code>getOverrideStyle</code>" implementation] in order to set styles.
* applies on top of the other patches in the queue, and makes use of a basic GetOverrideStyle implementation.
* can only currently animate CSS properties of type nsCSSValue. (not nsCSSValuePair / nsCSSValueRect / etc)
* can only currently interpolate between fixed-length units. (inch, mm, pt, etc).  (Need to tie in with PresContext / font-metrics to interpolate/interconvert between display-pixels / em-units / ex-units.)


= Overview of Strategy =
The smil_css patch is not complete yet -- it currently has these limitations:
(dholbert) I'll fill this in soon with a summary of the strategy used in the above patch.
* It can only animate CSS properties of type <code>nsCSSValue</code>. (not <code>nsCSSValuePair</code> / <code>nsCSSValueRect</code> / 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 [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>.
 
Here's an overview of the steps required to animate a specific CSS property on a specific element, using <code>getOverrideStyle()</code>, during a SMIL animation sample:
# Call <code>getOverrideStyle()</code> on the element, and from this, clear any existing value 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)
# 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>.
 
=== Implementing <code>getOverrideStyle()</code> ===
Note that Gecko doesn't currently implement <code>getOverrideStyle()</code>.  Here's a basic outline of how this function could be implemented (& is implemeted in the patch linked above):
* Add a new <code>nsRefPtr<nsDOMCSSDeclaration> mOverrideStyle</code> member variable on each <code>nsStyledElement</code>, to be used as a backing store for that element's override style.
* I've based the implementation of this largely on the content style rule in SVG.  (See <code>mContentStyleRule</code> 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] )
* The override style is queryable (& editable) via a new method <code>nsIContent::GetOverrideStyle</code>.  By default, this method has an empty implementation, but <code>nsStyledElement</code> overrides this method to return its <code>mOverrideStyle</code>.
* The override style rule is read (& applied) in HTMLCSSStyleSheetImpl::RulesMatching, right after we read the inline style rule.
* See [http://hg.mozilla.org/users/dholbert_mozilla.com/smil-patches/file/tip/getoverridestyle.patch patch] for more details (it's fairly small)

Latest revision as of 13:46, 20 March 2009

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().

Here's an overview of the steps required to animate a specific CSS property on a specific element, using getOverrideStyle(), during a SMIL animation sample:

  1. Call getOverrideStyle() on the element, and from this, clear any existing value 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 this function could be implemented (& is implemeted in the patch linked above):

  • Add a new nsRefPtr<nsDOMCSSDeclaration> mOverrideStyle member variable on each nsStyledElement, to be used as a backing store for that element's override style.
  • I've based the implementation of this largely on the content style rule in SVG. (See mContentStyleRule in nsSVGElement.h and nsSVGElement.cpp )
  • The override style is queryable (& editable) via a new method nsIContent::GetOverrideStyle. By default, this method has an empty implementation, but nsStyledElement overrides this method to return its mOverrideStyle.
  • The override style rule is read (& applied) in HTMLCSSStyleSheetImpl::RulesMatching, right after we read the inline style rule.
  • See patch for more details (it's fairly small)
Retrieved from "https://wiki.mozilla.org/index.php?title=SMIL:CSS_Animation&oldid=135071"