【Flutter 实战】动画序列、共享动画、路由动画

移动开发 作者: 2024-08-24 21:25:01
老孟导读:此篇文章是 Flutter 动画系列文章第四篇,本文介绍动画序列、共享动画、路由动画。 动画序列 Flutter中组合动画使用Interval,Interval继承自Curve,用法如下:
Animation _sizeAnimation = Tween(begin: 100.0,end: 300.0).animate(CurvedAnimation(
    parent: _animationController,curve: Interval(0.5,1.0)));
class AnimationDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AnimationDemo();
}

class _AnimationDemo extends State<AnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _colorAnimation;
  Animation _sizeAnimation;

  @override
  void initState() {
    _animationController =
        AnimationController(duration: Duration(seconds: 5),vsync: this)
    ..addListener((){setState(() {
      
    });});

    _colorAnimation = ColorTween(begin: Colors.red,end: Colors.blue).animate(
        CurvedAnimation(
            parent: _animationController,curve: Interval(0.0,0.5)));

    _sizeAnimation = Tween(begin: 100.0,end: 300.0).animate(CurvedAnimation(
        parent: _animationController,1.0)));

    //开始动画
    _animationController.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,children: <Widget>[
          Container(
              height: _sizeAnimation.value,width: _sizeAnimation.value,color: _colorAnimation.value),],),);
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}
_animation = TweenSequence([
  TweenSequenceItem(
      tween: Tween(begin: 100.0,end: 200.0)
          .chain(CurveTween(curve: Curves.easeIn)),weight: 40),TweenSequenceItem(tween: ConstantTween<double>(200.0),weight: 20),TweenSequenceItem(tween: Tween(begin: 200.0,end: 300.0),]).animate(_animationController);
class HeroDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HeroDemo();
}

class _HeroDemo extends State<HeroDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,crossAxisSpacing: 5,mainAxisSpacing: 3),children: List.generate(10,(index) {
          if (index == 6) {
            return InkWell(
              onTap: () {
                Navigator.push(
                    context,new MaterialPageRoute(
                        builder: (context) => new _Hero1Demo()));
              },child: Hero(
                tag: 'hero',child: Container(
                  child: Image.asset(
                    'images/bird.png',fit: BoxFit.fitWidth,);
          }
          return Container(
            color: Colors.red,);
        }),);
  }
}
class _Hero1Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),body: Container(
          alignment: Alignment.topCenter,child: Hero(
            tag: 'hero',child: Container(
              child: Image.asset(
                'images/bird.png',)),);
  }
}
Navigator.push(context,MaterialPageRoute(builder: (context) {
  return _TwoPage();
}));
Navigator.pop(context);
class NavigationAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),body: Center(
        child: OutlineButton(
          child: Text('跳转'),onPressed: () {
            Navigator.push(context,CupertinoPageRoute(builder: (context) {
              return _TwoPage();
            }));
          },);
  }
}

class _TwoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),body: Container(
        color: Colors.blue,);
  }
}
Widget _defaultTransitionsBuilder(BuildContext context,Animation<double> animation,Animation<double> secondaryAnimation,Widget child) {
  return child;
}
Navigator.push(
    context,PageRouteBuilder(pageBuilder: (
      BuildContext context,) {
      return _TwoPage();
    },transitionsBuilder: (BuildContext context,Widget child) {
      return SlideTransition(
        position: Tween(begin: Offset(-1,0),end: Offset(0,0))
            .animate(animation),child: child,);
    }));
class LeftToRightPageRoute extends PageRouteBuilder {
  final Widget newPage;

  LeftToRightPageRoute(this.newPage)
      : super(
          pageBuilder: (
            BuildContext context,) =>
              newPage,transitionsBuilder: (
            BuildContext context,Widget child,) =>
              SlideTransition(
            position: Tween(begin: Offset(-1,0))
                .animate(animation),);
}
Navigator.push(context,LeftToRightPageRoute(_TwoPage()));
class CustomPageRoute extends PageRouteBuilder {
  final Widget currentPage;
  final Widget newPage;

  CustomPageRoute(this.currentPage,this.newPage)
      : super(
          pageBuilder: (
            BuildContext context,) =>
              currentPage,) =>
              Stack(
            children: <Widget>[
              SlideTransition(
                position: new Tween<Offset>(
                  begin: const Offset(0,end: const Offset(0,-1),).animate(animation),child: currentPage,SlideTransition(
                position: new Tween<Offset>(
                  begin: const Offset(0,1),child: newPage,)
            ],);
}
Navigator.push(context,CustomPageRoute(this,_TwoPage()));

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68031.html