firka/flutter
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding animation links for the *Transition widgets. (#20395)

Browse Source 
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.
This commit is contained in:
Greg Spencer
2018-08-12 16:01:39 -07:00
committed by GitHub
parent ef71d9d956
commit ba723b6038
1 changed files with 102 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
packages/flutter/lib/src/widgets/transitions.dart
View File

@@ -107,6 +107,19 @@ class _AnimatedState extends State<AnimatedWidget> {
/// [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<RelativeRect> {
/// Animated version of [Positioned] which takes a specific
/// [Animation<RelativeRect>] 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.