The spinner's two concurrent animations, transcribed rather than invented.
A spinner is the only Fluent component whose motion is a looping keyframe
animation instead of a state transition, so it cannot go through
FluentAnimatedStyle. It gets a raw AnimationController instead — and
therefore has to honour MediaQuery.disableAnimationsOf itself, which
FluentSpinner does as upstream does under prefers-reduced-motion: the
ring keeps turning at reducedRotation's slower pace while the tail stops
and paints FluentSpinnerPose.reduced's fading arc.
Both animations run for the same 1.5s, which is why one controller drives both.
Where the numbers come from
rotation and tail are the animations of @fluentui/react-spinner
9.8.6's useSpinnerBaseClassName and useSpinnerTailBaseClassName
(useSpinnerStyles.styles.ts). Figma's .SpinnerBase set appears to
encode the tail keyframes as its <size> 01/02/03 variants, but each is
identical to its base size — so the Figma file records the keyframes'
existence and nothing else.
Properties
- hashCode → int
-
The hash code for this object.
no setterinherited
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
Methods
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
toString(
) → String -
A string representation of this object.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited
Constants
- reducedRotation → const FluentMotionSpec
- rotation under reduced motion: upstream stretches it to 1.8s rather than stopping it, and freezes the tail instead.
- restingTailSweep → const double
- The tail as Figma draws it standing still: a quarter arc starting at 3 o'clock.
- rotation → const FluentMotionSpec
- The whole ring turning once. Linear, so the rotation reads as constant.
- tail → const FluentMotionSpec
- The tail growing and travelling along the track.
-
tailKeyframes
→ const List<
FluentSpinnerTailKeyframe> - The three keyframes of tail, at 0%, 50% and 100% of the cycle.