欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter Animation AnimatedBuilder

程序员文章站 2024-01-16 21:45:34
...

 

Flutter AnimatedBuilder

创建动画的widget

Key key,

@required Listenable animation,

@required this.builder,

this.child,

animation:Animationcontroller //动画

child 动画作用的view

builder:每次controller值改变都会回到builder 重新生成view


import 'package:flutter/material.dart';

main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/buildAnimation',
      routes: {
        '/':(context)=>AnimationDemo(),
        '/test':(context)=>TestAnimation(),
        '/buildAnimation':(context)=>BuildAnimation(),
      },
    );
  }
}

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

class BuildAnimation extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return BuildAnimationState();
  }
}

class BuildAnimationState extends State<BuildAnimation> with TickerProviderStateMixin{
  AnimationController animationController;
  var animation;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
        duration: Duration(seconds: 2),
        vsync: this);
    animation = Tween(begin: 20, end: 200).animate(animationController);
    animationController.forward();   //放到某个其他地方去启动, 会唤起Builder
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('builder'),),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Stack(
          children: <Widget>[
            AnimatedBuilder(
              animation: animation,
              builder: (context, Widget child){  //child 可以定义要动的东西....这里先暂时省略了.
                return Positioned(
                  left: animation.value/1.0,
                  top: animation.value/1.0,
                  child: Container(child: RaisedButton(
                  child: Text('abc'),onPressed: (){
                    print(animation.value);
                  }),),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}



///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
class TestAnimation extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return TestAnimationState();
  }
}

class TestAnimationState extends State<TestAnimation> with TickerProviderStateMixin{
  AnimationController animationController;
  Tween positionTween = Tween(begin: 20, end: 200);
  var animation;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
        vsync: this,
        duration: Duration(seconds: 1),
    );
     animation = positionTween.animate(animationController);

     animationController.addListener((){
       print(animationController.value);
     });
     animationController.addStatusListener((value){
       print('status: $value');
     });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('test'),),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.black12,
        child: TestAnimationDemo(animationController: animationController,animation:animation),
      ),
    );
  }
}

class TestAnimationDemo extends AnimatedWidget {
  AnimationController animationController;
  Animation animation;
  TestAnimationDemo({this.animationController, this.animation}):super(listenable:animationController);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: animation.value/1.0,
          top: animation.value/1.0,
          child: Container(
            child: IconButton(icon: Icon(Icons.forward), onPressed: (){
              animationController.forward();
            }),
          ),
        ),
      ],
    );
  }
}



/////////////////////////////////////////////////////////////////////////////////////////////////////////
class AnimationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('AnimationDemo'),
          elevation: 0.0,
        ),
        body: AnimationDemoHome());
  }
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////
class AnimationDemoHome extends StatefulWidget {
  @override
  _AnimationDemoHomeState createState() => _AnimationDemoHomeState();
}

class _AnimationDemoHomeState extends State<AnimationDemoHome>
    with TickerProviderStateMixin {
  AnimationController animationDemoController;
  Animation animation;
  Animation animationColor;
  CurvedAnimation curve;

  @override
  void initState() {
    super.initState();
    animationDemoController = AnimationController(
      // value: 32.0,
      // lowerBound: 32.0,
      // upperBound: 100.0,
      duration: Duration(milliseconds: 1000),
      vsync: this,
    );

    curve = CurvedAnimation(
        parent: animationDemoController, curve: Curves.bounceOut);

    animation = Tween(begin: 32.0, end: 100.0).animate(curve);
    animationColor =
        ColorTween(begin: Colors.red, end: Colors.red[900]).animate(curve);
    // animationDemoController.addListener(() {
    //   // print('${animationDemoController.value}');
    //   setState(() {});
    // });
    animationDemoController.addStatusListener((AnimationStatus status) {
      print(status);
    });
    // animationDemoController.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedHeart(
        animations: [
          animation,
          animationColor,
        ],
        controller: animationDemoController,
      ),
    );
  }
}


class AnimatedHeart extends AnimatedWidget {
  final List animations;
  final AnimationController controller;

  AnimatedHeart({
    this.animations,
    this.controller,
  }) : super(listenable: controller);

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.favorite),
      iconSize: animations[0].value,
      color: animations[1].value,
      onPressed: () {
        switch (controller.status) {
          case AnimationStatus.completed:
            controller.reverse();
            break;
          default:
            controller.forward();
        }
      },
    );
  }
}