Flutter 动画容器 AnimatedContainer

死撑，不是坚持的唯一打开方式

Dead support is not the only way to insist on opening

Container 里的动画渐变效果

AnimatedContainer 动态改变宽度、高度、颜色

Cubic ease = Cubic(0.25, 0.1, 0.25, 1.0)

快速开始、缓慢结束 

Curves.case

  var selected = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GestureDetector(
          onTap: () {
            setState(() {
              selected = !selected;
            });
          },
          child: Center(
            child: AnimatedContainer(
              width: selected ? 200.0 : 100.0,
              height: selected ? 100.0 : 200.0,
              color: selected ? Colors.red : Colors.blue,
              duration: Duration(seconds: 2),
              curve: Curves.ease,
              child: Text(''),
            ),
          ),
        ),
      ),
    );
  }

 Cubic easeIn = Cubic(0.42, 0.0, 1.0, 1.0)

缓慢开始、快速结束曲线动画 

Curves.easeIn

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GestureDetector(
          onTap: () {
            setState(() {
              selected = !selected;
            });
          },
          child: Center(
            child: AnimatedContainer(
              width: selected ? 200.0 : 100.0,
              height: selected ? 100.0 : 200.0,
              color: selected ? Colors.red : Colors.blue,
              duration: Duration(seconds: 2),
              curve: Curves.easeIn,
              child: Text(''),
            ),
          ),
        ),
      ),
    );
  }

Cubic easeOut = Cubic(0.0, 0.0, 0.58, 1.0)

立方体动画曲线，开始快，结束慢

Curves.easeOut

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GestureDetector(
          onTap: () {
            setState(() {
              selected = !selected;
            });
          },
          child: Center(
            child: AnimatedContainer(
              width: selected ? 200.0 : 100.0,
              height: selected ? 100.0 : 200.0,
              color: selected ? Colors.red : Colors.blue,
              duration: Duration(seconds: 2),
              curve: Curves.easeOut,
              child: Text(''),
            ),
          ),
        ),
      ),
    );
  }

Cubic easeInOut = Cubic(0.42, 0.0, 0.58, 1.0)

开始缓慢，加速，然后缓慢结束的三次动画曲线

Curves.easeInOut

 AnimatedContainer(
              width: selected ? 200.0 : 100.0,
              height: selected ? 100.0 : 200.0,
              color: selected ? Colors.red : Colors.blue,
              duration: Duration(seconds: 2),
              curve: Curves.easeInOut,
              child: Text(''),
            ),

Cubic easeInExpo = Cubic(0.95, 0.05, 0.795, 0.035)

立方体动画曲线开始缓慢，结束迅速

Curves.easeInExpo

AnimatedContainer(
              width: selected ? 200.0 : 100.0,
              height: selected ? 100.0 : 200.0,
              color: selected ? Colors.red : Colors.blue,
              duration: Duration(seconds: 2),
              curve: Curves.easeInExpo,
              child: Text(''),
            ),

Cubic easeInCubic = Cubic(0.55, 0.055, 0.675, 0.19)

立方体动画曲线开始缓慢，结束迅速

Curves.easeInCubic

AnimatedContainer(
              width: selected ? 200.0 : 100.0,
              height: selected ? 100.0 : 200.0,
              color: selected ? Colors.red : Colors.blue,
              duration: Duration(seconds: 2),
              curve: Curves.easeInCubic,
              child: Text(''),
            ),

Matrix4.rotationZ(selected?50.0:0.0)

绕Z轴旋转

Matrix4.rotationZ

AnimatedContainer(
              width: 200.0,
              height: 100.0,
              color: selected ? Colors.red : Colors.blue,
              duration: Duration(seconds: 2),
              curve: Curves.easeInCubic,
              transform: Matrix4.rotationZ(selected ? -90.0 : 0.0),
              child: Text(''),
            ),

Matrix4.rotationX(selected ? 10.0 : 0.0)

 绕X轴旋转

Matrix4.rotationX

AnimatedContainer(
              width: 200.0,
              height: 100.0,
              color: selected ? Colors.red : Colors.blue,
              duration: Duration(seconds: 2),
              curve: Curves.easeInCubic,
              transform: Matrix4.rotationX(selected ? 10.0 : 0.0),
              child: Text(''),
            ),

Matrix4.rotationY(selected ? 10.0 : 0.0)

 绕Y轴旋转 

Matrix4.rotationY

多个 AnimatedContainer 绕X轴旋转效果 

Matrix4.rotationX

var selected = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
            children: <Widget>[
              AnimatedContainer(
                width: 200.0,
                height: 100.0,
                color: selected ? Colors.red : Colors.blue,
                duration: Duration(seconds: 1),
                curve: Curves.easeInCubic,
                alignment: Alignment.center,
                transform: Matrix4.rotationX(selected ? 10.0 : 0.0),
                child: Text('1'),
              ),
              AnimatedContainer(
                width: 200.0,
                height: 100.0,
                color: selected ? Colors.red : Colors.blue,
                duration: Duration(seconds: 2),
                alignment: Alignment.center,
                curve: Curves.easeInCubic,
                transform: Matrix4.rotationX(selected ? 10.0 : 0.0),
                child: Text('2'),
              ),
              AnimatedContainer(
                width: 200.0,
                height: 100.0,
                color: selected ? Colors.red : Colors.blue,
                duration: Duration(seconds: 3),
                curve: Curves.easeInCubic,
                alignment: Alignment.center,
                transform: Matrix4.rotationX(selected ? 10.0 : 0.0),
                child: Text('3'),
              ),
              AnimatedContainer(
                width: 200.0,
                height: 100.0,
                color: selected ? Colors.red : Colors.blue,
                duration: Duration(seconds: 4),
                alignment: Alignment.center,
                curve: Curves.easeInCubic,
                transform: Matrix4.rotationX(selected ? 10.0 : 0.0),
                child: Text('4'),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.play_arrow),
          onPressed: () {
            setState(() {
              selected = !selected;
            });
          },
        ),
      ),
    );
  }

多个AnimatedContainer组合动画式展开布局

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animation Container',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnimatedContainerApp(),
    );
  }
}

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  double _width = 0.0;
  double _height = 0.0;

  _ac(_cv) {
    return AnimatedContainer(
      color: _cv,
      width: _width,
      height: _height / 4,
      duration: Duration(seconds: 1),
      curve: Cubic(-1.0, 0.0, 0.0, 0.8),
    );
  }

   @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      _ac(Colors.purpleAccent),
                      _ac(Colors.green),
                      _ac(Colors.blue),
                      _ac(Colors.greenAccent),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      _ac(Colors.limeAccent),
                      _ac(Colors.white),
                      _ac(Colors.deepPurple),
                      _ac(Colors.grey),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.play_arrow),
          onPressed: () {
            print(_width.toString() + "_" + _height.toString());
            setState(() {
              _width = (_width > 0) ? 0.0 : MediaQuery.of(context).size.width;
              _height =
                  (_height > 0) ? 0.0 : MediaQuery.of(context).size.height;
            });
          },
        ),
      ),
    );
  }
}

参考

flutter布局-5-Matrix4矩阵变换

Flutter Widgets 之 AnimatedContainer