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)

快速开始、缓慢结束 

Flutter 动画容器 AnimatedContainer_第1张图片

Flutter 动画容器 AnimatedContainer_第2张图片 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)

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

Flutter 动画容器 AnimatedContainer_第3张图片

Flutter 动画容器 AnimatedContainer_第4张图片 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)

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

Flutter 动画容器 AnimatedContainer_第5张图片

Flutter 动画容器 AnimatedContainer_第6张图片 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)

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

Flutter 动画容器 AnimatedContainer_第7张图片

Flutter 动画容器 AnimatedContainer_第8张图片 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)

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

Flutter 动画容器 AnimatedContainer_第9张图片

Flutter 动画容器 AnimatedContainer_第10张图片 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)

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

Flutter 动画容器 AnimatedContainer_第11张图片

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轴旋转

Flutter 动画容器 AnimatedContainer_第12张图片

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轴旋转

Flutter 动画容器 AnimatedContainer_第13张图片

Flutter 动画容器 AnimatedContainer_第14张图片 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轴旋转 

Flutter 动画容器 AnimatedContainer_第15张图片

Flutter 动画容器 AnimatedContainer_第16张图片 Matrix4.rotationY

 

多个 AnimatedContainer 绕X轴旋转效果 

Matrix4.rotationX
var selected = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
            children: [
              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 {
  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: [
            Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Column(
                    children: [
                      _ac(Colors.purpleAccent),
                      _ac(Colors.green),
                      _ac(Colors.blue),
                      _ac(Colors.greenAccent),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: [
                      _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

你可能感兴趣的:(Flutter)