Flutter学习之路->颜色动画的隐式与显式实现方式

这里给出一个隐式动画做法和一个显示动画做法

1.隐式动画做法

import 'package:flutter/material.dart';

class ColorAnimation extends StatefulWidget {
  @override
  _ColorAnimationState createState() => _ColorAnimationState();
}

class _ColorAnimationState extends State<ColorAnimation> {
  Color _color = Colors.blue;

  void _changeColor() {
    setState(() {
      _color = _color == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Color Animation"),
      ),
      body: Center(
        child: GestureDetector(
          onTap: _changeColor,
          child: AnimatedContainer(
            alignment: Alignment.center,
            duration:const Duration(milliseconds: 500),
            width: 200.0,
            height: 200.0,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: BorderRadius.circular(100.0),
            ),child:const Text("点击改变颜色"),
          ),
        ),
      ),
    );
  }
}

2.显式动画做法

import 'package:flutter/material.dart';

class ColorEAnimation extends StatefulWidget {
  @override
  _ColorEAnimationState createState() => _ColorEAnimationState();
}

class _ColorEAnimationState extends State<ColorEAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<Color?> _colorTweenAnimation;
  Color _color = Colors.blue;

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

    _animationController =
    AnimationController(vsync: this, duration: Duration(seconds: 1))
      ..addListener(() {
        setState(() {});
      });

    _colorTweenAnimation = ColorTween(begin: Colors.blue, end: Colors.red)
        .animate(CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    ));
  }

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

  void _changeColor() {
    if (_animationController.status == AnimationStatus.completed) {
      _animationController.reverse();
    } else {
      _animationController.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Color Animation"),
      ),
      body: Center(
        child: GestureDetector(
          onTap: _changeColor,
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: _colorTweenAnimation.value,
              borderRadius: BorderRadius.circular(100),
            ),
          ),
        ),
      ),
    );
  }
}

要全套代码请加V:sunyan414361110 一起学习flutter鸭