Flutter [18] Getting animated

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.redAccent,
      ),
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation animation;
  Animation animationColor;
  CurvedAnimation curve;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      // value: 32.0,//动画初始的值
      // lowerBound: 32.0,//动画起始的值
      // upperBound: 100.0,//动画结束的值
      duration: Duration(milliseconds: 500), //持续时间
      vsync: this, //针对于谁的动画,渲染谁
    );
    curve =
        CurvedAnimation(parent: _controller, curve: Curves.ease); //时间曲线
    animation = Tween(begin: 70.0, end: 100.0).animate(curve); //设置了开始值结束结束值 在持续时间内 设定的值会从开始值增加到结束值
    animationColor = ColorTween(begin:Colors.red[900], end:  Colors.red)//开始颜色结束颜色
        .animate(curve); //设置开始颜色结束颜色
    //监听运行状态
    _controller.addStatusListener((AnimationStatus status) {
      print(status);
      if (status==AnimationStatus.dismissed) {
        _controller.forward();//开始
      } else if(status==AnimationStatus.completed){
        _controller.reverse();//倒着运行
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: Center(
          child: AnimatedHeart(
            animations: [
              animation,
              animationColor,
            ],
            controller: _controller,
          ),
        ));
  }
}

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: () {
        debugPrint(controller.status.toString());
        if (controller.status == AnimationStatus.dismissed) {
          controller.forward();
        }
      },
    );
  }
}

 

Published 72 original articles · won praise 5 · views 10000 +

Guess you like

Origin blog.csdn.net/weixin_39370093/article/details/104219010