flutter动画

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();
}
// Ticker 会在每一帧作出一个反应,比如去通知动画对象去计算当前帧的值
class _AnimationDemoHomeState extends State
  with TickerProviderStateMixin {
  // 控制 flutter 的动画使用 AnimationController
  AnimationController animationCtr;
  Animation animation;
  Animation animationColor;
  CurvedAnimation curve; // 曲线动画

  @override
  void initState() {
    super.initState();
    // duration:设置动画时长,vsync:主要作用就是放置屏幕外的动画消耗不必要的资源,值应该是 TickerProvider 类型
    animationCtr = AnimationController(
//      value: 30.0, // 设置初始值
//      lowerBound: 20.0, // 开始的值
//      upperBound: 100.0, // 结束的值
      duration: Duration(milliseconds: 3000),
      vsync: this
    );
    // 设置动画效果
    curve = CurvedAnimation(parent: animationCtr, curve: Curves.bounceOut);

    // 动画里面需要的范围的值可以用Tween来设置,可以设置大小也可以设置颜色
//    animation = Tween(begin: 30.0, end: 100.0).animate(animationCtr);
//    animationColor = ColorTween(begin: Colors.redAccent, end: Colors.red[900]).animate(animationCtr);
    // 曲线动画animate中传入curve
    animation = Tween(begin: 30.0, end: 100.0).animate(curve);
    animationColor = ColorTween(begin: Colors.redAccent, end: Colors.red[900]).animate(curve);

    // 监听控制器控制的动画
//    animationCtr.addListener(() {
////      print('${animationCtr.value}');
//      setState(() {
//
//      });
//    });
    // 监听动画的运行状态
    animationCtr.addStatusListener((AnimationStatus status) {
      print(status);
    });
    // 开始播放动画
//    animationCtr.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimationHeart(animations: [animation, animationColor], controller: animationCtr,),
    );
  }
}
// 动画值有变化就自动重建自己的小部件
class AnimationHeart extends AnimatedWidget {
  final List animations;
  final AnimationController controller;

  AnimationHeart({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();
          }
        }
    );
  }
}

你可能感兴趣的:(flutter动画)