DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Polish the menu animation

Browse Source 
- Delay the close of the menu by the appropriate amount.
 - Fade the menu items for equal amounts of time.
 - Contract the height of the menu just after each item fade.

R=mpcomplete@chromium.org, mpcomplete@google.com

Review URL: https://codereview.chromium.org/1223113004 .
This commit is contained in:
Adam Barth 2015-07-14 13:56:34 -07:00
parent ef34605122
commit 0a0c36a4df
2 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
sdk/lib/animation/animation_performance.dart
View File

@ -54,11 +54,16 @@ class AnimatedType<T extends dynamic> extends AnimatedVariable {
class AnimatedList extends AnimatedVariable {
List<AnimatedVariable> variables;
AnimatedList(this.variables);
Interval interval;
AnimatedList(this.variables, { this.interval });
void setFraction(double t) {
double adjustedTime = interval == null ? t : interval.adjustTime(t);
for (AnimatedVariable variable in variables)
variable.setFraction(t);
variable.setFraction(adjustedTime);
}
String toString() => 'AnimatedList([$variables])';
}

24
sdk/lib/widgets/popup_menu.dart
View File

@ -14,9 +14,8 @@ import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/popup_menu_item.dart';
import 'package:sky/widgets/scrollable_viewport.dart';
const Duration _kMenuOpenDuration = const Duration(milliseconds: 300);
const Duration _kMenuCloseDuration = const Duration(milliseconds: 200);
const Duration _kMenuCloseDelay = const Duration(milliseconds: 100);
const Duration _kMenuDuration = const Duration(milliseconds: 300);
double _kMenuCloseIntervalEnd = 2.0 / 3.0;
const double _kMenuWidthStep = 56.0;
const double _kMenuMargin = 16.0; // 24.0 on tablet
const double _kMenuMinWidth = 2.0 * _kMenuWidthStep;
@ -50,10 +49,12 @@ class PopupMenu extends AnimatedComponent {
AnimatedType<double> _width;
AnimatedType<double> _height;
List<AnimatedType<double>> _itemOpacities;
AnimatedList _animationList;
AnimationPerformance _performance;
void initState() {
_performance = new AnimationPerformance()
..duration = _kMenuDuration
..addListener(_checkForStateChanged);
_updateAnimationVariables();
watch(_performance);
@ -82,10 +83,10 @@ class PopupMenu extends AnimatedComponent {
}
void _updateAnimationVariables() {
double unit = 1.0 / (items.length + 1);
double unit = 1.0 / (items.length + 1.5); // 1.0 for the width and 0.5 for the last item's fade.
_opacity = new AnimatedType<double>(0.0, end: 1.0);
_width = new AnimatedType<double>(0.0, end: 1.0, interval: new Interval(0.0, unit));
_height = new AnimatedType<double>(0.0, end: 1.0, interval: new Interval(0.0, 0.5));
_height = new AnimatedType<double>(0.0, end: 1.0, interval: new Interval(0.0, unit * items.length));
_itemOpacities = new List<AnimatedType<double>>();
for (int i = 0; i < items.length; ++i) {
double start = (i + 1) * unit;
@ -98,7 +99,8 @@ class PopupMenu extends AnimatedComponent {
..add(_width)
..add(_height)
..addAll(_itemOpacities);
_performance.variable = new AnimatedList(variables);
_animationList = new AnimatedList(variables);
_performance.variable = _animationList;
}
void _updateBoxPainter() {
@ -119,15 +121,13 @@ class PopupMenu extends AnimatedComponent {
}
void _open() {
_performance
..duration = _kMenuOpenDuration
..play();
_animationList.interval = null;
_performance.play();
}
void _close() {
_performance
..duration = _kMenuCloseDuration
..reverse();
_animationList.interval = new Interval(0.0, _kMenuCloseIntervalEnd);
_performance.reverse();
}
BoxPainter _painter;