Flutterwidget动画合集(1)

Flutter动画合集(1)

Flutter 可以很方便的实现比较炫酷的动画。
分为两个部分,动画widget和动画控制

动画widget

AnimatedContainer

在这个控件中可以方便的给它的width宽,height高,color背景色,padding内边距,margin外边距,transform位置添加动画,

宽高动画

//标记动画的状态
 bool status = true;
//宽高的变量
 double _height = 100.0;
 double _width = 100.0;
//通过改变宽高的值,响应动画处理,这个效果是控件的高度和宽度发生变化。如图1
 void _animating() {
    setState(() {
      if (status) {
        _height = 100.0;
        _width = 100.0;
      } else {
        _height = 200.0;
        _width = 200.0;
      }
      status = !status;
    });
  }
//这是处理点击事件的widget
GestureDetector(
              //响应点击事件
              onTap: _animating,
              child: AnimatedContainer(
              //当height或者width的值发生变化时,自动进行动画
                height: animationHeight,
                width: animationWidth,
                color: Colors.amber,
                duration: Duration(milliseconds: 300),
                child: Container(),
              ),
            ),
图1:响应宽高变化的动画

颜色动画

//背景颜色的变化
Color _color = Colors.amber;
void _animating() {
    setState(() {
    //直接改变颜色
      if (status) {
        _color = Colors.amber;
      } else {
        _color = Colors.blue;
      }
      status = !status;
    });
 }
  
     GestureDetector(
              onTap: _animating,
              child: Center(
                child: AnimatedContainer(
                  height: _height,
                  width: _width,
                  //加入了颜色的变化
                  color: _color,
                  duration: Duration(milliseconds: 300),
                  child: Container( ),
                ),
              ),
            ),
图2:颜色和宽高同时变化

padding 内边距

void _animating() {
    setState(() {
      if (status) {
        _padingValue = 40.0;
      } else {
        _padingValue = 30.0;
      }
      status = !status;
    });
  }
 GestureDetector(
              onTap: _animating,
              child: Center(
                child: AnimatedContainer(
                  height: _height,
                  width: _width,
                  color: _color,
                  //加入了内边距的变化
                  padding: EdgeInsets.all(_padingValue),
                  duration: Duration(milliseconds: 300),
                  child: Center(
                  //同时为了更好观察内边距的变化,我在内部加了一个宽度为80,颜色白色的小部件。注意观察它的宽度变化
                    child: Container(
                      width: 80,
                      color: Colors.white,
                      child: Text("内部"),
                    ),
                  ),
                ),
              ),
            ),

可以观察到由于padding的变化,内部的宽度也发生了变化。
图三:内边距的变化

margin外边距

 void _animating() {
    setState(() {
      if (status) {
        _marginValue = 0.0;
      } else {
        _marginValue = 30.0;
      }
      status = !status;
    });
  }
GestureDetector(
              onTap: _animating,
              child: Center(
              //为了观察margin的变化,我在AnimatedContainer上下各加了widget,观察他们之间的距离
                child: Column(
                  children: <Widget>[
                    Text("上"),
                    AnimatedContainer(
                      height: _height,
                      width: _width,
                      color: _color,
                      margin: EdgeInsets.all(_marginValue),
                      padding: EdgeInsets.all(_padingValue),
                      duration: Duration(milliseconds: 300),
                      child: Center(
                        child: Container(
                          width: 80,
                          color: Colors.white,
                          child: Text("内部"),
                        ),
                      ),
                    ),
                    Text("下"),
                  ],
                ),
              ),
            ),
图四:外边距的变化

子控件对齐

要注意,这个是作用到子控件上的。

  void _animating() {
    setState(() {
      if (status) {
      //中间对齐
        _alignment = Alignment.center;
      } else {
      //底部右侧
        _alignment = Alignment.bottomRight;
      }
      status = !status;
    });
  }
 GestureDetector(
              onTap: _animating,
              child: Center(
                child: AnimatedContainer(
                //控制内部的子控件的对齐方式
                  alignment: _alignment,
                  height: 300,
                  width: 300,
                  color: _color,
                  duration: Duration(milliseconds: 500),
                  child: Container(
                    width: 80,
                    color: Colors.white,
                    child: Text("内部"),
                  ),
                ),
              ),
            ),
            

内部的子控件由中间移动到右下角

AnimatedContainer_color_aligment

transform 变换

这个主要是用到了矩阵变换,比如移动位置,放大,缩小 等操作。这些操作也有专门的widget,以后会写出来。

void _animating() {
    setState(() {
      if (status) {
        _matrix4 = Matrix4.translationValues(0, 0, 0);
      } else {
        _matrix4 = Matrix4.translationValues(20, 50, 0);
      }
      status = !status;
    });
  }
 GestureDetector(
              onTap: _animating,
              child: Center(
                child: AnimatedContainer(
                  height: 150,
                  width: 150,
                  color: _color,
                  transform: _matrix4,
                  duration: Duration(milliseconds: 500),
                  child: Center(
                    child: Container(
                      width: 50,
                      height: 50,
                      color: Colors.deepOrange,
                    ),
                  ),
                ),
              ),
            ),

这里展示了位移的变化

AnimatedContainer_color_transfrom

decoration 装饰,比如背景色color(注意不能和外部的color同时设置,会报错),边框,等

GestureDetector(
              onTap: _animating,
              child: Center(
                child: AnimatedContainer(
                  height: 150,
                  width: 150,
                  //装饰器
                  decoration: BoxDecoration(
                      color: _color,
                      //边框的颜色和边框宽度变化
                      border: Border.all(
                          color: status ? Colors.cyanAccent : Colors.black,
                          width: status ? 20 : 10)),
                  duration: Duration(milliseconds: 500),
                  child: Center(
                    child: Container(
                      width: 50,
                      height: 50,
                      color: Colors.deepOrange,
                    ),
                  ),
                ),
              ),
            )
AnimatedContainer_decoration