User:Shellylin/CSS Animations and Transitions

Goal and Purpose

Ideally, Web Animations is a higher level api that built on top of css animations, css transitions, svg, and video playback control.

One of the goal of Web Animations is to provide an unified interface for animations, so that users can create or control playbacks of css-animations, css-transitions, svg-animations and videos in a more consolidated way.

In our gecko code base, CSS-Animations/Transitions already share some code, and are duplicating some computing works here and there. As the first step towards implementing Web Animations, we want to unify some code use for animations and transitions.

Before that, here’s a brief overview in terms of the structure of animation manager.

Class Structure and Relationship

AnimationCommon.h

class CommonAnimationManager

• The base class of nsAnimationManager and nsTransitionManager.
• Hooks up with refresh driver and style rule processor.
• ExtractComputedValueForTransition()
  • Calls nsStyleAnimation::ExtractComputedValue(aProperty, aStyleContext, aComputedValue); to get the computed value for the given property(width, color...etc.) from the given style context.
  • This method is called whem building an animation segment, starting a transition, or a style context change for transition.
• Adds a CommonElementAnimationData with AddElementData().

class CommonElementAnimationData

• Keeps track of with dom::Element is animating/transitiioning.
• Stores the list of element properties.
• Keeps track of the number of animation 'mini-flushes' with mAnimationGeneration and UpdateAnimationGeneration().

class ComputedTimingFunction

• Init and compute the corresponding timing function.

class AnimValuesStyleRule

• A style rule that maps property-nsStyleAnimation::Value pairs.
• It is created in EnsureStyleRuleFor() if it is null.
• For cheking if it the style context has changed.

Overview of how they work

Both nsTransitionManager and nsAnimationManager are created at the initialization of nsPresContext (nsPresContext::Init).

An animation-element is added to the animation-manager when the frame is created, while a transition-element is added to the transition-manager only at the time it is trigger. The RestyleManager will try starting the transitions at every cycle of restyle.

Both animation-element and transition-element calculate their interpolated value with nsStyleAnimation::Interpolate(...), in the call to EnsureStyleRuleFor().

EnsureStyleRuleFor() is defined in both transition-element, animation-element, and animation-manager. They behave similarly but with different interface. For transitions, it is called by nsTransitionManager::RulesMatching from RestyleManager, or UpdateAllThrottledStyles() from RestyleManager if async animation is enabled. For animations, it is called by nsAnimationManager::FlushAnimations, which is called by the refresh driver of animation-manager.

nsTransitionManager.h

class nsTransitionManager

• Subclass of CommonAnimationManager.
• Deals with style context changed.
• Deals with throttled styles.
• UpdateAllThrottledStyles()
  • Only valid for OMTA.
• FlushTransitions()
  • Post mPresContext->PresShell()->RestyleForAnimation(et->mElement) for its transition-element.

struct ElementPropertyTransition

• Metadata of a transition-element.

class ElementTransitions

• Subclass of CommonElementAnimationData.
• EnsureStyleRuleFor()
  • Interpolate the style value.
• mPropertyTransitions holds an array of ElementPropertyTransition.

nsAnimationManager.h

class nsAnimationManager

• Subclass of CommonAnimationManager.
• EnsureStyleRuleFor(ElementAnimations* aET)
  • Calls the EnsureStyleruleFor() of this ElementAnimations.
  • Called by transition-manager.
• CheckAnimationRule()
  • Return the style rule that RulesMatching should add for aStyleContext. This might be different from what RulesMatching actually added during aStyleContext's construction because the element's animation-name may have changed.
  • Called by nsStyleSet::GetContext().
• FlushAnimations()
  • Calls the EnsureStyleRuleFor() of its animation-elements.

struct ElementAnimation

• Data about one animation (i.e., one of the values of 'animation-name') running on an element.

class ElementAnimations

• Subclass of CommonElementAnimationData.
• EnsureStyleRuleFor()
  • Interpolate the style value.
• mAnimations holds an array of ElementAnimation.

What Next

Figure out which part can be unified for Web Animations.

• How we store animation data and properties?
• The implementation of computing timing function?