animated_cross_fade.dart 13.9 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5 6
// @dart = 2.8

7 8 9 10 11
import 'package:flutter/rendering.dart';

import 'animated_size.dart';
import 'basic.dart';
import 'framework.dart';
12
import 'ticker_provider.dart';
13 14
import 'transitions.dart';

15 16 17
// Examples can assume:
// bool _first;

18
/// Specifies which of two children to show. See [AnimatedCrossFade].
19 20 21
///
/// The child that is shown will fade in, while the other will fade out.
enum CrossFadeState {
22 23
  /// Show the first child ([AnimatedCrossFade.firstChild]) and hide the second
  /// ([AnimatedCrossFade.secondChild]]).
24
  showFirst,
25

26 27 28
  /// Show the second child ([AnimatedCrossFade.secondChild]) and hide the first
  /// ([AnimatedCrossFade.firstChild]).
  showSecond,
29 30
}

31 32 33 34 35 36 37 38 39 40 41 42
/// Signature for the [AnimatedCrossFade.layoutBuilder] callback.
///
/// The `topChild` is the child fading in, which is normally drawn on top. The
/// `bottomChild` is the child fading out, normally drawn on the bottom.
///
/// For good performance, the returned widget tree should contain both the
/// `topChild` and the `bottomChild`; the depth of the tree, and the types of
/// the widgets in the tree, from the returned widget to each of the children
/// should be the same; and where there is a widget with multiple children, the
/// top child and the bottom child should be keyed using the provided
/// `topChildKey` and `bottomChildKey` keys respectively.
///
43
/// {@tool snippet}
44 45 46
///
/// ```dart
/// Widget defaultLayoutBuilder(Widget topChild, Key topChildKey, Widget bottomChild, Key bottomChildKey) {
47
///   return Stack(
48 49
///     fit: StackFit.loose,
///     children: <Widget>[
50
///       Positioned(
51 52 53 54 55 56
///         key: bottomChildKey,
///         left: 0.0,
///         top: 0.0,
///         right: 0.0,
///         child: bottomChild,
///       ),
57
///       Positioned(
58 59 60 61 62 63 64
///         key: topChildKey,
///         child: topChild,
///       )
///     ],
///   );
/// }
/// ```
65
/// {@end-tool}
66
typedef AnimatedCrossFadeBuilder = Widget Function(Widget topChild, Key topChildKey, Widget bottomChild, Key bottomChildKey);
67

68 69 70
/// A widget that cross-fades between two given children and animates itself
/// between their sizes.
///
71 72
/// {@youtube 560 315 https://www.youtube.com/watch?v=PGK2UUAyE54}
///
73 74
/// The animation is controlled through the [crossFadeState] parameter.
/// [firstCurve] and [secondCurve] represent the opacity curves of the two
75 76
/// children. The [firstCurve] is inverted, i.e. it fades out when providing a
/// growing curve like [Curves.linear]. The [sizeCurve] is the curve used to
77 78
/// animate between the size of the fading-out child and the size of the
/// fading-in child.
79 80 81 82 83
///
/// This widget is intended to be used to fade a pair of widgets with the same
/// width. In the case where the two children have different heights, the
/// animation crops overflowing children during the animation by aligning their
/// top edge, which means that the bottom will be clipped.
84
///
85 86 87 88
/// The animation is automatically triggered when an existing
/// [AnimatedCrossFade] is rebuilt with a different value for the
/// [crossFadeState] property.
///
89
/// {@tool snippet}
90 91
///
/// This code fades between two representations of the Flutter logo. It depends
92
/// on a boolean field `_first`; when `_first` is true, the first logo is shown,
93 94 95
/// otherwise the second logo is shown. When the field changes state, the
/// [AnimatedCrossFade] widget cross-fades between the two forms of the logo
/// over three seconds.
96 97
///
/// ```dart
98
/// AnimatedCrossFade(
99 100 101
///   duration: const Duration(seconds: 3),
///   firstChild: const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0),
///   secondChild: const FlutterLogo(style: FlutterLogoStyle.stacked, size: 100.0),
102
///   crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
103 104
/// )
/// ```
105
/// {@end-tool}
106 107 108
///
/// See also:
///
Ian Hickson's avatar
Ian Hickson committed
109 110 111
///  * [AnimatedOpacity], which fades between nothing and a single child.
///  * [AnimatedSwitcher], which switches out a child for a new one with a
///    customizable transition, supporting multiple cross-fades at once.
112 113
///  * [AnimatedSize], the lower-level widget which [AnimatedCrossFade] uses to
///    automatically change size.
114
class AnimatedCrossFade extends StatefulWidget {
115
  /// Creates a cross-fade animation widget.
116 117 118 119
  ///
  /// The [duration] of the animation is the same for all components (fade in,
  /// fade out, and size), and you can pass [Interval]s instead of [Curve]s in
  /// order to have finer control, e.g., creating an overlap between the fades.
120 121
  ///
  /// All the arguments other than [key] must be non-null.
122
  const AnimatedCrossFade({
123
    Key key,
124 125
    @required this.firstChild,
    @required this.secondChild,
126 127 128 129
    this.firstCurve = Curves.linear,
    this.secondCurve = Curves.linear,
    this.sizeCurve = Curves.linear,
    this.alignment = Alignment.topCenter,
130
    @required this.crossFadeState,
131
    @required this.duration,
132
    this.reverseDuration,
133
    this.layoutBuilder = defaultLayoutBuilder,
134 135 136
  }) : assert(firstChild != null),
       assert(secondChild != null),
       assert(firstCurve != null),
137 138
       assert(secondCurve != null),
       assert(sizeCurve != null),
139 140 141 142
       assert(alignment != null),
       assert(crossFadeState != null),
       assert(duration != null),
       assert(layoutBuilder != null),
143
       super(key: key);
144

Ian Hickson's avatar
Ian Hickson committed
145 146 147
  /// The child that is visible when [crossFadeState] is
  /// [CrossFadeState.showFirst]. It fades out when transitioning
  /// [crossFadeState] from [CrossFadeState.showFirst] to
148
  /// [CrossFadeState.showSecond] and vice versa.
149 150
  final Widget firstChild;

Ian Hickson's avatar
Ian Hickson committed
151 152 153
  /// The child that is visible when [crossFadeState] is
  /// [CrossFadeState.showSecond]. It fades in when transitioning
  /// [crossFadeState] from [CrossFadeState.showFirst] to
154
  /// [CrossFadeState.showSecond] and vice versa.
155 156
  final Widget secondChild;

157
  /// The child that will be shown when the animation has completed.
158 159 160 161 162
  final CrossFadeState crossFadeState;

  /// The duration of the whole orchestrated animation.
  final Duration duration;

163 164 165 166 167
  /// The duration of the whole orchestrated animation when running in reverse.
  ///
  /// If not supplied, this defaults to [duration].
  final Duration reverseDuration;

168
  /// The fade curve of the first child.
169 170
  ///
  /// Defaults to [Curves.linear].
171 172 173
  final Curve firstCurve;

  /// The fade curve of the second child.
174 175
  ///
  /// Defaults to [Curves.linear].
176 177 178
  final Curve secondCurve;

  /// The curve of the animation between the two children's sizes.
179 180
  ///
  /// Defaults to [Curves.linear].
181 182
  final Curve sizeCurve;

183 184
  /// How the children should be aligned while the size is animating.
  ///
185
  /// Defaults to [Alignment.topCenter].
186 187 188 189 190 191 192
  ///
  /// See also:
  ///
  ///  * [Alignment], a class with convenient constants typically used to
  ///    specify an [AlignmentGeometry].
  ///  * [AlignmentDirectional], like [Alignment] for specifying alignments
  ///    relative to text direction.
193
  final AlignmentGeometry alignment;
194

195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219
  /// A builder that positions the [firstChild] and [secondChild] widgets.
  ///
  /// The widget returned by this method is wrapped in an [AnimatedSize].
  ///
  /// By default, this uses [AnimatedCrossFade.defaultLayoutBuilder], which uses
  /// a [Stack] and aligns the `bottomChild` to the top of the stack while
  /// providing the `topChild` as the non-positioned child to fill the provided
  /// constraints. This works well when the [AnimatedCrossFade] is in a position
  /// to change size and when the children are not flexible. However, if the
  /// children are less fussy about their sizes (for example a
  /// [CircularProgressIndicator] inside a [Center]), or if the
  /// [AnimatedCrossFade] is being forced to a particular size, then it can
  /// result in the widgets jumping about when the cross-fade state is changed.
  final AnimatedCrossFadeBuilder layoutBuilder;

  /// The default layout algorithm used by [AnimatedCrossFade].
  ///
  /// The top child is placed in a stack that sizes itself to match the top
  /// child. The bottom child is positioned at the top of the same stack, sized
  /// to fit its width but without forcing the height. The stack is then
  /// clipped.
  ///
  /// This is the default value for [layoutBuilder]. It implements
  /// [AnimatedCrossFadeBuilder].
  static Widget defaultLayoutBuilder(Widget topChild, Key topChildKey, Widget bottomChild, Key bottomChildKey) {
220
    return Stack(
221
      clipBehavior: Clip.none,
222
      children: <Widget>[
223
        Positioned(
224 225 226 227 228 229
          key: bottomChildKey,
          left: 0.0,
          top: 0.0,
          right: 0.0,
          child: bottomChild,
        ),
230
        Positioned(
231 232
          key: topChildKey,
          child: topChild,
233
        ),
234 235 236 237
      ],
    );
  }

238
  @override
239
  _AnimatedCrossFadeState createState() => _AnimatedCrossFadeState();
240 241

  @override
242 243
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
244 245
    properties.add(EnumProperty<CrossFadeState>('crossFadeState', crossFadeState));
    properties.add(DiagnosticsProperty<AlignmentGeometry>('alignment', alignment, defaultValue: Alignment.topCenter));
246 247
    properties.add(IntProperty('duration', duration.inMilliseconds, unit: 'ms'));
    properties.add(IntProperty('reverseDuration', reverseDuration?.inMilliseconds, unit: 'ms', defaultValue: null));
248
  }
249 250
}

251
class _AnimatedCrossFadeState extends State<AnimatedCrossFade> with TickerProviderStateMixin {
252 253 254 255
  AnimationController _controller;
  Animation<double> _firstAnimation;
  Animation<double> _secondAnimation;

256 257 258
  @override
  void initState() {
    super.initState();
259 260 261 262 263
    _controller = AnimationController(
      duration: widget.duration,
      reverseDuration: widget.reverseDuration,
      vsync: this,
    );
264
    if (widget.crossFadeState == CrossFadeState.showSecond)
265
      _controller.value = 1.0;
266 267
    _firstAnimation = _initAnimation(widget.firstCurve, true);
    _secondAnimation = _initAnimation(widget.secondCurve, false);
268
    _controller.addStatusListener((AnimationStatus status) {
269 270 271 272 273
      setState(() {
        // Trigger a rebuild because it depends on _isTransitioning, which
        // changes its value together with animation status.
      });
    });
274
  }
275

276 277 278 279 280
  Animation<double> _initAnimation(Curve curve, bool inverted) {
    Animation<double> result = _controller.drive(CurveTween(curve: curve));
    if (inverted)
      result = result.drive(Tween<double>(begin: 1.0, end: 0.0));
    return result;
281 282 283 284 285 286 287 288 289
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
290 291 292 293
  void didUpdateWidget(AnimatedCrossFade oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.duration != oldWidget.duration)
      _controller.duration = widget.duration;
294 295
    if (widget.reverseDuration != oldWidget.reverseDuration)
      _controller.reverseDuration = widget.reverseDuration;
296 297 298 299 300 301
    if (widget.firstCurve != oldWidget.firstCurve)
      _firstAnimation = _initAnimation(widget.firstCurve, true);
    if (widget.secondCurve != oldWidget.secondCurve)
      _secondAnimation = _initAnimation(widget.secondCurve, false);
    if (widget.crossFadeState != oldWidget.crossFadeState) {
      switch (widget.crossFadeState) {
302 303 304 305 306 307 308 309 310 311
        case CrossFadeState.showFirst:
          _controller.reverse();
          break;
        case CrossFadeState.showSecond:
          _controller.forward();
          break;
      }
    }
  }

312 313
  /// Whether we're in the middle of cross-fading this frame.
  bool get _isTransitioning => _controller.status == AnimationStatus.forward || _controller.status == AnimationStatus.reverse;
314

315 316
  @override
  Widget build(BuildContext context) {
317 318
    const Key kFirstChildKey = ValueKey<CrossFadeState>(CrossFadeState.showFirst);
    const Key kSecondChildKey = ValueKey<CrossFadeState>(CrossFadeState.showSecond);
319 320
    final bool transitioningForwards = _controller.status == AnimationStatus.completed ||
                                       _controller.status == AnimationStatus.forward;
321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342
    Key topKey;
    Widget topChild;
    Animation<double> topAnimation;
    Key bottomKey;
    Widget bottomChild;
    Animation<double> bottomAnimation;
    if (transitioningForwards) {
      topKey = kSecondChildKey;
      topChild = widget.secondChild;
      topAnimation = _secondAnimation;
      bottomKey = kFirstChildKey;
      bottomChild = widget.firstChild;
      bottomAnimation = _firstAnimation;
    } else {
      topKey = kFirstChildKey;
      topChild = widget.firstChild;
      topAnimation = _firstAnimation;
      bottomKey = kSecondChildKey;
      bottomChild = widget.secondChild;
      bottomAnimation = _secondAnimation;
    }

343
    bottomChild = TickerMode(
344 345
      key: bottomKey,
      enabled: _isTransitioning,
346
      child: ExcludeSemantics(
347
        excluding: true, // Always exclude the semantics of the widget that's fading out.
348
        child: FadeTransition(
349 350
          opacity: bottomAnimation,
          child: bottomChild,
351
        ),
352
      ),
353
    );
354
    topChild = TickerMode(
355 356
      key: topKey,
      enabled: true, // Top widget always has its animations enabled.
357
      child: ExcludeSemantics(
358
        excluding: false, // Always publish semantics for the widget that's fading in.
359
        child: FadeTransition(
360 361
          opacity: topAnimation,
          child: topChild,
362
        ),
363
      ),
364
    );
365 366
    return ClipRect(
      child: AnimatedSize(
367
        alignment: widget.alignment,
368
        duration: widget.duration,
369
        reverseDuration: widget.reverseDuration,
370
        curve: widget.sizeCurve,
371
        vsync: this,
372
        child: widget.layoutBuilder(topChild, topKey, bottomChild, bottomKey),
373
      ),
374 375
    );
  }
376 377

  @override
378
  void debugFillProperties(DiagnosticPropertiesBuilder description) {
379
    super.debugFillProperties(description);
380 381 382
    description.add(EnumProperty<CrossFadeState>('crossFadeState', widget.crossFadeState));
    description.add(DiagnosticsProperty<AnimationController>('controller', _controller, showName: false));
    description.add(DiagnosticsProperty<AlignmentGeometry>('alignment', widget.alignment, defaultValue: Alignment.topCenter));
383
  }
384
}