From ba723b603871fefa522e51f0d2572fad9469b213 Mon Sep 17 00:00:00 2001 From: Greg Spencer Date: Sun, 12 Aug 2018 16:01:39 -0700 Subject: [PATCH] Adding animation links for the *Transition widgets. (#20395) This adds the animation links for illustrations of the Transition widgets, as well as adding a cross-references to the other transition widgets in the "See also" for each of their docs. --- .../flutter/lib/src/widgets/transitions.dart | 111 ++++++++++++++++-- 1 file changed, 102 insertions(+), 9 deletions(-) diff --git a/packages/flutter/lib/src/widgets/transitions.dart b/packages/flutter/lib/src/widgets/transitions.dart index 047322846c..04b48c745a 100644 --- a/packages/flutter/lib/src/widgets/transitions.dart +++ b/packages/flutter/lib/src/widgets/transitions.dart @@ -107,6 +107,19 @@ class _AnimatedState extends State { /// [textDirection] is provided, then the offsets are applied in the reading /// direction, so in right-to-left text, positive x offsets move towards the /// left, and in left-to-right text, positive x offsets move towards the right. +/// +/// Here's an illustration of the [SlideTransition] widget, with it's [position] +/// animated by a [CurvedAnimation] set to [Curves.elasticIn]: +/// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/slide_transition.mp4} +/// +/// See also: +/// +/// * [AlignTransition], an animated version of an [Align] that animates its +/// [Align.alignment] property. +/// * [PositionedTransition], a widget that animates its child from a start +/// position to an end position over the lifetime of the animation. +/// * [RelativePositionedTransition], a widget that transitions its child's +/// position based on the value of a rectangle relative to a bounding box. class SlideTransition extends AnimatedWidget { /// Creates a fractional translation transition. /// @@ -166,7 +179,20 @@ class SlideTransition extends AnimatedWidget { } } -/// Animates the scale of transformed widget. +/// Animates the scale of a transformed widget. +/// +/// Here's an illustration of the [ScaleTransition] widget, with it's [alignment] +/// animated by a [CurvedAnimation] set to [Curves.fastOutSlowIn]: +/// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/scale_transition.mp4} +/// +/// See also: +/// +/// * [PositionedTransition], a widget that animates its child from a start +/// position to an end position over the lifetime of the animation. +/// * [RelativePositionedTransition], a widget that transitions its child's +/// position based on the value of a rectangle relative to a bounding box. +/// * [SizeTransition], a widget that animates its own size and clips and +/// aligns its child. class ScaleTransition extends AnimatedWidget { /// Creates a scale transition. /// @@ -211,6 +237,16 @@ class ScaleTransition extends AnimatedWidget { } /// Animates the rotation of a widget. +/// +/// Here's an illustration of the [RotationTransition] widget, with it's [turns] +/// animated by a [CurvedAnimation] set to [Curves.elasticOut]: +/// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/rotation_transition.mp4} +/// See also: +/// +/// * [ScaleTransition], a widget that animates the scale of a transformed +/// widget. +/// * [SizeTransition], a widget that animates its own size and clips and +/// aligns its child. class RotationTransition extends AnimatedWidget { /// Creates a rotation transition. /// @@ -244,7 +280,7 @@ class RotationTransition extends AnimatedWidget { } } -/// Animates its own size and clips and aligns the child. +/// Animates its own size and clips and aligns its child. /// /// [SizeTransition] acts as a [ClipRect] that animates either its width or its /// height, depending upon the value of [axis]. The alignment of the child along @@ -256,12 +292,20 @@ class RotationTransition extends AnimatedWidget { /// [SizeTransition] will not be able to change size, and will appear to do /// nothing. /// +/// Here's an illustration of the [SizeTransition] widget, with it's [sizeFactor] +/// animated by a [CurvedAnimation] set to [Curves.fastOutSlowIn]: +/// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/size_transition.mp4} +/// /// See also: /// -/// * [AnimatedCrossFade], for a widget that automatically animates between -/// the sizes of two children, fading between them. -/// * [ScaleTransition] for a widget that scales the size of the child instead -/// of clipping it. +/// * [AnimatedCrossFade], for a widget that automatically animates between +/// the sizes of two children, fading between them. +/// * [ScaleTransition], a widget that scales the size of the child instead of +/// clipping it. +/// * [PositionedTransition], a widget that animates its child from a start +/// position to an end position over the lifetime of the animation. +/// * [RelativePositionedTransition], a widget that transitions its child's +/// position based on the value of a rectangle relative to a bounding box. class SizeTransition extends AnimatedWidget { /// Creates a size transition. /// @@ -334,6 +378,10 @@ class SizeTransition extends AnimatedWidget { /// /// For a widget that automatically animates between the sizes of two children, /// fading between them, see [AnimatedCrossFade]. +/// +/// Here's an illustration of the [FadeTransition] widget, with it's [opacity] +/// animated by a [CurvedAnimation] set to [Curves.fastOutSlowIn]: +/// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/fade_transition.mp4} class FadeTransition extends SingleChildRenderObjectWidget { /// Creates an opacity transition. /// @@ -407,13 +455,26 @@ class RelativeRectTween extends Tween { /// Animated version of [Positioned] which takes a specific /// [Animation] to transition the child's position from a start -/// position to and end position over the lifetime of the animation. +/// position to an end position over the lifetime of the animation. /// /// Only works if it's the child of a [Stack]. /// +/// Here's an illustration of the [PositionedTransition] widget, with it's [rect] +/// animated by a [CurvedAnimation] set to [Curves.elasticInOut]: +/// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/positioned_transition.mp4} +/// /// See also: /// -/// * [RelativePositionedTransition]. +/// * [RelativePositionedTransition], a widget that transitions its child's +/// position based on the value of a rectangle relative to a bounding box. +/// * [SlideTransition], a widget that animates the position of a widget +/// relative to its normal position. +/// * [AlignTransition], an animated version of an [Align] that animates its +/// [Align.alignment] property. +/// * [ScaleTransition], a widget that animates the scale of a transformed +/// widget. +/// * [SizeTransition], a widget that animates its own size and clips and +/// aligns its child. class PositionedTransition extends AnimatedWidget { /// Creates a transition for [Positioned]. /// @@ -447,9 +508,22 @@ class PositionedTransition extends AnimatedWidget { /// /// Only works if it's the child of a [Stack]. /// +/// Here's an illustration of the [RelativePositionedTransition] widget, with it's [rect] +/// animated by a [CurvedAnimation] set to [Curves.elasticInOut]: +/// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/relative_positioned_transition.mp4} +/// /// See also: /// -/// * [PositionedTransition]. +/// * [PositionedTransition], a widget that animates its child from a start +/// position to an end position over the lifetime of the animation. +/// * [AlignTransition], an animated version of an [Align] that animates its +/// [Align.alignment] property. +/// * [ScaleTransition], a widget that animates the scale of a transformed +/// widget. +/// * [SizeTransition], a widget that animates its own size and clips and +/// aligns its child. +/// * [SlideTransition], a widget that animates the position of a widget +/// relative to its normal position. class RelativePositionedTransition extends AnimatedWidget { /// Create an animated version of [Positioned]. /// @@ -493,6 +567,10 @@ class RelativePositionedTransition extends AnimatedWidget { /// Animated version of a [DecoratedBox] that animates the different properties /// of its [Decoration]. /// +/// Here's an illustration of the [DecoratedBoxTransition] widget, with it's +/// [decoration] animated by a [CurvedAnimation] set to [Curves.decelerate]: +/// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/decorated_box_transition.mp4} +/// /// See also: /// /// * [DecoratedBox], which also draws a [Decoration] but is not animated. @@ -539,6 +617,21 @@ class DecoratedBoxTransition extends AnimatedWidget { } /// Animated version of an [Align] that animates its [Align.alignment] property. +/// +/// Here's an illustration of the [DecoratedBoxTransition] widget, with it's +/// [decoration] animated by a [CurvedAnimation] set to [Curves.decelerate]: +/// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/align_transition.mp4} +/// +/// See also: +/// +/// * [PositionedTransition], a widget that animates its child from a start +/// position to an end position over the lifetime of the animation. +/// * [RelativePositionedTransition], a widget that transitions its child's +/// position based on the value of a rectangle relative to a bounding box. +/// * [SizeTransition], a widget that animates its own size and clips and +/// aligns its child. +/// * [SlideTransition], a widget that animates the position of a widget +/// relative to its normal position. class AlignTransition extends AnimatedWidget { /// Creates an animated [Align] whose [AlignmentGeometry] animation updates /// the widget.