Improve the openning animation for PopupMenu

We're now doing all of the elements of the popup menu entrance animation from
the material design spec, but our timing and curves might not be exactly right
yet. I haven't started on the exit animation.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1017193004

examples/stocks-fn/lib/stock_app.dart

@@ -10,6 +10,7 @@ import 'package:sky/framework/components/icon.dart';
 import 'package:sky/framework/components/input.dart';
 import 'package:sky/framework/components/menu_divider.dart';
 import 'package:sky/framework/components/menu_item.dart';
+import 'package:sky/framework/components/popup_menu.dart';
 import 'package:sky/framework/fn.dart';
 import 'package:sky/framework/theme/typography.dart' as typography;
 import 'stock_data.dart';
@@ -18,7 +19,8 @@ import 'stock_menu.dart';
 
 class StocksApp extends App {
 
-  DrawerController _DrawerController = new DrawerController();
+  DrawerController _drawerController = new DrawerController();
+  PopupMenuController _menuController = new PopupMenuController();
 
   static Style _style = new Style('''
     display: flex;
@@ -56,7 +58,7 @@ class StocksApp extends App {
 
   void _handleMenuClick(_) {
     setState(() {
-      _isShowingMenu = !_isShowingMenu;
+      _menuController.open();
     });
   }
 
@@ -68,7 +70,7 @@ class StocksApp extends App {
 
   Node build() {
     var drawer = new Drawer(
-      controller: _DrawerController,
+      controller: _drawerController,
       level: 3,
       children: [
         new DrawerHeader(
@@ -112,7 +114,7 @@ class StocksApp extends App {
         new Icon(key: 'menu', style: _iconStyle,
             size: 24,
             type: 'navigation/menu_white')
-          ..events.listen('gesturetap', _DrawerController.toggle),
+          ..events.listen('gesturetap', _drawerController.toggle),
         new Container(
           style: _titleStyle,
           children: [title]
@@ -143,10 +145,13 @@ class StocksApp extends App {
       drawer
     ];
 
-    if (_isShowingMenu) {
-      children.add(new StockMenu()..events.listen('gesturetap', (_) {
+    if (_menuController.isOpen) {
+      children.add(new StockMenu(controller: _menuController)
+                   ..events.listen('gesturetap', (_) {
+        // TODO(abarth): We should close the menu when you tap away from the
+        // menu rather than when you tap on the menu.
         setState(() {
-          _isShowingMenu = false;
+          _menuController.close();
         });
       }));
     }

examples/stocks-fn/lib/stock_menu.dart

@@ -5,8 +5,6 @@
 import 'package:sky/framework/components/popup_menu.dart';
 import 'package:sky/framework/fn.dart';
 import 'package:sky/framework/theme/view-configuration.dart';
-import 'stock_arrow.dart';
-import 'stock_data.dart';
 
 class StockMenu extends Component {
   static final Style _style = new Style('''
@@ -14,13 +12,16 @@ class StockMenu extends Component {
     right: 8px;
     top: ${8 + kStatusBarHeight}px;''');
 
-  StockMenu({Object key}) : super(key: key);
+  PopupMenuController controller;
+
+  StockMenu({Object key, this.controller}) : super(key: key);
 
   Node build() {
     return new Container(
       style: _style,
       children: [
         new PopupMenu(
+          controller: controller,
           items: [
             [new Text('Add stock')],
             [new Text('Remove stock')],