User:Shellylin/CSS Animations and Transitions
Goal and Purpose
One of the goal of Web Animations is to provide an unified animation interface, so that users can develop/control playbacks of css-animation, css-transition, svg-animation and video 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.