flutter 动画展开菜单_Flutter 强大的动画功能，从理论到实践教程，让你轻松get所有技能包...

AnimationController controller = new AnimationController(
    value:      // the current value of the animation, usually 0.0 (= default)
    lowerBound: // the lowest value of the animation, usually 0.0 (= default)
    upperBound: // the highest value of the animation, usually 1.0 (= default)
    duration:   // the total duration of the whole animation (scene)
    vsync:      // the ticker provider
    debugLabel: // a label to be used to identify the controller
            // during debug session
);

class _MyStateWidget extends State
        with SingleTickerProviderStateMixin {
    AnimationController _controller;

    @override
    void initState(){
      super.initState();
      _controller = new AnimationController(
        duration: const Duration(milliseconds: 1000), 
        vsync: this,
      );
    }

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

    ...
}

class _MyStateWidget extends State
        with SingleTickerProviderStateMixin {
    AnimationController _controller;

    @override
    void initState(){
      super.initState();
      _controller = new AnimationController(
        duration: const Duration(milliseconds: 1000), 
        vsync: this,
      );
      _controller.addListener((){
          setState((){});
      });
      _controller.forward();
    }

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

    @override
    Widget build(BuildContext context){
        final int percent = (_controller.value * 100.0).round();
        return new Scaffold(
            body: new Container(
                child: new Center(
                    child: new Text(\'$percent%\'),
                ),
            ),
        );
    }
}

Animation integerVariation;
Animation decimalVariation;
Animation offsetVariation;

Animation angleAnimation = new Tween(begin: 0.0, end: pi/2);

Animation angleAnimation = new Tween(begin: 0.0, end: pi/2).animate(_controller);

Animation angleAnimation = new Tween(begin: 0.0, end: pi/2).animate(
    new CurvedAnimation(
        parent: _controller,
        curve:  Curves.ease,
        reverseCurve: Curves.easeOut
    ));

__controller.forward().orCancel;
复制代码

///
/// Definition of the _controller with a whole duration of 10 seconds
///
AnimationController _controller = new AnimationController(
    duration: const Duration(seconds: 10), 
    vsync: this
);

///
/// First animation that moves the ball from the left to the center
///
Animation moveLeftToCenter = new Tween(
    begin: new Offset(0.0, screenHeight /2), 
    end: new Offset(screenWidth /2, screenHeight /2)
).animate(_controller);

///
/// Second animation that moves the ball from the center to the top
///
Animation moveCenterToTop = new Tween(
    begin: new Offset(screenWidth /2, screenHeight /2), 
    end: new Offset(screenWidth /2, 0.0)
).animate(_controller);

///
/// Third animation that will be used to change the opacity of the ball to make it disappear
///
Animation disappear = new Tween(
    begin: 1.0, 
    end: 0.0
).animate(_controller);

///
/// Definition of the _controller with a whole duration of 10 seconds
///
AnimationController _controller = new AnimationController(
    duration: const Duration(seconds: 10), 
    vsync: this
);

///
/// First animation that moves the ball from the left to the center
///
Animation moveLeftToCenter = new Tween(
    begin: new Offset(0.0, screenHeight /2), 
    end: new Offset(screenWidth /2, screenHeight /2)
    ).animate(
            new CurvedAnimation(
                parent: _controller,
                curve:  new Interval(
                    0.0,
                    0.20,
                    curve: Curves.linear,
                ),
            ),
        );

///
/// Second animation that moves the ball from the center to the top
///
Animation moveCenterToTop = new Tween(
    begin: new Offset(screenWidth /2, screenHeight /2), 
    end: new Offset(screenWidth /2, 0.0)
    ).animate(
            new CurvedAnimation(
                parent: _controller,
                curve:  new Interval(
                    0.20,
                    0.50,
                    curve: Curves.linear,
                ),
            ),
        );

///
/// Third animation that will be used to change the opacity of the ball to make it disappear
///
Animation disappear = new Tween(begin: 1.0, end: 0.0)
        .animate(
            new CurvedAnimation(
                parent: _controller,
                curve:  new Interval(
                    0.50,
                    1.0,
                    curve: Curves.linear,
                ),
            ),
        );

myAnimation.addStatusListener((AnimationStatus status){
       switch(status){
           case AnimationStatus.dismissed:
               ...
               break;

           case AnimationStatus.forward:
               ...
               break;

           case AnimationStatus.reverse:
               ...
               break;

           case AnimationStatus.completed:
               ...
               break;
       }
   });

myAnimation.addStatusListener((AnimationStatus status){
      switch(status){
          ///
          /// When the animation is at the beginning, we force the animation to play
          ///
          case AnimationStatus.dismissed:
              _controller.forward();
              break;

          ///
          /// When the animation is at the end, we force the animation to reverse
          ///
          case AnimationStatus.completed:
              _controller.reverse();
              break;
      }
  });

class MyPage extends StatefulWidget {
    @override
    _MyPageState createState() => new _MyPageState();
}

class _MyPageState extends State{
  @override
  Widget build(BuildContext context){
      return SafeArea(
        top: false,
        bottom: false,
        child: new Container(
          child: new Stack(
            alignment: Alignment.topLeft,
            children: [
              new Page(),
              new GuillotineMenu(),
            ],
          ),
        ),
      );
  }
}

class Page extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        return new Container(
            padding: const EdgeInsets.only(top: 90.0),
            color: Color(0xff222222),
        );
    }
}

class GuillotineMenu extends StatefulWidget {
    @override
    _GuillotineMenuState createState() => new _GuillotineMenuState();
}

class _GuillotineMenuState extends State {

    @overrride
    Widget build(BuildContext context){
        return new Container(
            color: Color(0xff333333),
        );
    }
}

class _GuillotineMenuState extends State {
   double rotationAngle = 0.0;

    @override
    Widget build(BuildContext context){
        MediaQueryData mediaQueryData = MediaQuery.of(context);
        double screenWidth = mediaQueryData.size.width;
        double screenHeight = mediaQueryData.size.height;

        return new Transform.rotate(
                angle: rotationAngle,
                origin: new Offset(24.0, 56.0),
                alignment: Alignment.topLeft,
                child: Material(
                    color: Colors.transparent,
                    child: Container(
                    width: screenWidth,
                    height: screenHeight,
                    color: Color(0xFF333333),
                    child: new Stack(
                        children: [
                            _buildMenuTitle(),
                            _buildMenuIcon(),
                            _buildMenuContent(),
                        ],
                    ),
                ),
            ),
        );
    }

    ///
    /// Menu Title
    ///
    Widget _buildMenuTitle(){
        return new Positioned(
            top: 32.0,
            left: 40.0,
            width: screenWidth,
            height: 24.0,
            child: new Transform.rotate(
                alignment: Alignment.topLeft,
                origin: Offset.zero,
                angle: pi / 2.0,
                child: new Center(
                child: new Container(
                    width: double.infinity,
                    height: double.infinity,
                    child: new Opacity(
                    opacity: 1.0,
                    child: new Text(\'ACTIVITY\',
                        textAlign: TextAlign.center,
                        style: new TextStyle(
                            color: Colors.white,
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                            letterSpacing: 2.0,
                        )),
                    ),
                ),
            )),
        );
    }

    ///
    /// Menu Icon
    /// 
    Widget _buildMenuIcon(){
        return new Positioned(
            top: 32.0,
            left: 4.0,
            child: new IconButton(
                icon: const Icon(
                    Icons.menu,
                    color: Colors.white,
                ),
                onPressed: (){},
            ),
        );
    }

    ///
    /// Menu content
    ///
    Widget _buildMenuContent(){
        final List

class _GuillotineMenuState extends State
    with SingleTickerProviderStateMixin {

    AnimationController animationControllerMenu;
    Animation animationMenu;

    ///
    /// Menu Icon, onPress() handling
    ///
    _handleMenuOpenClose(){
        animationControllerMenu.forward();
    }

    @override
    void initState(){
        super.initState();

    ///
        /// Initialization of the animation controller
        ///
        animationControllerMenu = new AnimationController(
            duration: const Duration(milliseconds: 1000), 
            vsync: this
        )..addListener((){
            setState((){});
        });

    ///
        /// Initialization of the menu appearance animation
        ///
        _rotationAnimation = new Tween(
            begin: -pi/2.0, 
            end: 0.0
        ).animate(animationControllerMenu);
    }

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

    @override
    Widget build(BuildContext context){
        MediaQueryData mediaQueryData = MediaQuery.of(context);
        double screenWidth = mediaQueryData.size.width;
        double screenHeight = mediaQueryData.size.height;
        double angle = animationMenu.value;

        return new Transform.rotate(
            angle: angle,
            origin: new Offset(24.0, 56.0),
            alignment: Alignment.topLeft,
            child: Material(
                color: Colors.transparent,
                child: Container(
                    width: screenWidth,
                    height: screenHeight,
                    color: Color(0xFF333333),
                    child: new Stack(
                        children: [
                            _buildMenuTitle(),
                            _buildMenuIcon(),
                            _buildMenuContent(),
                        ],
                    ),
                ),
            ),
        );
    }

    ...
    ///
    /// Menu Icon
    /// 
    Widget _buildMenuIcon(){
        return new Positioned(
            top: 32.0,
            left: 4.0,
            child: new IconButton(
                icon: const Icon(
                    Icons.menu,
                    color: Colors.white,
                ),
                onPressed: _handleMenuOpenClose,
            ),
        );
    }
    ...
}

///
/// Menu animation status
///
enum _GuillotineAnimationStatus { closed, open, animating }

class _GuillotineMenuState extends State
    with SingleTickerProviderStateMixin {
    AnimationController animationControllerMenu;
    Animation animationMenu;
    _GuillotineAnimationStatus menuAnimationStatus = _GuillotineAnimationStatus.closed;

    _handleMenuOpenClose(){
        if (menuAnimationStatus == _GuillotineAnimationStatus.closed){
            animationControllerMenu.forward().orCancel;
        } else if (menuAnimationStatus == _GuillotineAnimationStatus.open) {
            animationControllerMenu.reverse().orCancel;
        }
    }

    @override
    void initState(){
        super.initState();

    ///
        /// Initialization of the animation controller
        ///
        animationControllerMenu = new AnimationController(
            duration: const Duration(milliseconds: 1000), 
            vsync: this
        )..addListener((){
            setState((){});
        })..addStatusListener((AnimationStatus status) {
            if (status == AnimationStatus.completed) {
        ///
        /// When the animation is at the end, the menu is open
        ///
              menuAnimationStatus = _GuillotineAnimationStatus.open;
            } else if (status == AnimationStatus.dismissed) {
        ///
        /// When the animation is at the beginning, the menu is closed
        ///
              menuAnimationStatus = _GuillotineAnimationStatus.closed;
            } else {
        ///
        /// Otherwise the animation is running
        ///
              menuAnimationStatus = _GuillotineAnimationStatus.animating;
            }
          });

    ...
    }
...
}

class _GuillotineMenuState extends State
    with SingleTickerProviderStateMixin {
...
    @override
    void initState(){
    ...
    ///
    /// Initialization of the menu appearance animation
    /// 
    animationMenu = new Tween(
        begin: -pi / 2.0, 
        end: 0.0
    ).animate(new CurvedAnimation(
        parent: animationControllerMenu,
        curve: Curves.bounceOut,
        reverseCurve: Curves.bounceIn,
    ));
    }
...
}

class _GuillotineMenuState extends State
    with SingleTickerProviderStateMixin {
  AnimationController animationControllerMenu;
  Animation animationMenu;
  Animation animationTitleFadeInOut;
  _GuillotineAnimationStatus menuAnimationStatus;

...
  @override
  void initState(){
    ...
    ///
    /// Initialization of the menu title fade out/in animation
    /// 
    animationTitleFadeInOut = new Tween(
        begin: 1.0, 
        end: 0.0
    ).animate(new CurvedAnimation(
        parent: animationControllerMenu,
        curve: new Interval(
            0.0,
            0.5,
            curve: Curves.ease,
        ),
    ));
  }
...
  ///
  /// Menu Title
  ///
  Widget _buildMenuTitle(){
    return new Positioned(
      top: 32.0,
      left: 40.0,
      width: screenWidth,
      height: 24.0,
      child: new Transform.rotate(
        alignment: Alignment.topLeft,
        origin: Offset.zero,
        angle: pi / 2.0,
        child: new Center(
          child: new Container(
            width: double.infinity,
            height: double.infinity,
              child: new Opacity(
                opacity: animationTitleFadeInOut.value,
                child: new Text(\'ACTIVITY\',
                    textAlign: TextAlign.center,
                    style: new TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        letterSpacing: 2.0,
                    )),
                ),
            ),
        )),
    );
  }
...
}