Flutter Animated动画(2.7)

今天是冬至,大家记得吃饺子哦~

十几年光阴，转瞬即逝。那时我们义气风发，正值花季年龄，敢想、敢做、有脾气、有个性。虽处于所谓最黑暗的人生阶段，却难以阻挡彼此内心火热的情感。一部好剧，只有认真观赏，才能知晓万物间的联系。一个好人，只用时间证明，就能透视出其内心的善良。

今日效果图:

AnimatedContainer效果:

效果图(1.1):

AnimatedOpactiy效果:

效果图(1.2):

AnimatedAlign效果:

效果图(1.3):

AnimatedContainer

常用于通过改变x和y值的动画

加粗是必传参数

AnimatedContainer参数	类型	说明
duration	Duration	动画持续时间
width	double	宽度
height	double	高度
curve	Curve	简单理解为: 可以使动画过渡更平滑
decoration	BoxDecoration	装饰器,常用于设置圆角等
padding	EdgeInsets	child内边距
alignment	Alignment	child对齐方式
child	Widget	子Wiidget

代码事例:

  double _width = 50;
  double _height = 50;
  Color _color = new Color(int.parse("0XFF090B30"));
  double radius = 20;

 Widget initAnimatedContainer() {
    return AnimatedContainer(
      padding: EdgeInsets.only(left: 30, top: 40),
      alignment: Alignment.center,
      // 定义动画需要多长时间
      duration: Duration(milliseconds: 1000),
      // 提供一个可选的曲线，使动画感觉更流畅。
      curve: Curves.fastOutSlowIn,
      //长度宽度使用变量  实现组件缩放动画
      width: _width,
      height: _height,
      child: Text(
        "AnimatedContainer动画",
        style: TextStyle(color: Colors.white, fontSize: 10),
      ),
      decoration: BoxDecoration(
        //颜色 圆角度使用变量
        color: _color,
        border: Border.all(color: Colors.black, width: 2),
        borderRadius: BorderRadius.circular(radius),
      ),
    );
  }

AnimatedContainer按钮代码:

initButton("AnimatedContainer按钮")

initButton(String s) {
    return ElevatedButton(
      onPressed: () {
          // AnimatedContainer
          buildAnimatedContainer();
      },
      child: Text(s),
    );
  }
  
 List<String> _list = [
    "0XFF3F48CC",
    "0XFF00A2E8",
    "0XFF090B30",
    "0XFFED1C24",
    "0XFF31B157",
    "0XFFA349A4"
  ];
  Random random = new Random();
  
void buildAnimatedContainer() {
    _width += 50;
    _height += 100;
    radius += 10;
    _color = new Color(int.parse(_list[random.nextInt(_list.length)]));
    if (_width > 300) {
      _width = 50;
    }
    if (_height > 200) {
      _height = 50;
    }
    if (radius > 50) {
      radius = 10;
    }
    setState(() {});
  }

分析:

当点击AnimatedContainer按钮时, 通过改变x,y的距离,让他发生变化,color,和radius也是同样的道理.

效果图(1.4):

AnimatedOpactiy

常用于改变child透明度的动画

加粗是必传参数

AnimatedOpcatiy参数	类型	说明
duration	Duration	动画持续时间
opacity	double	透明度(1不透明 0透明)
child	Widget	子Wiidget
curve	Curve	简单理解为: 可以使动画过渡更平滑

AnimatedOpacity代码:

  Widget initAnimatedOpactiy() {
    return AnimatedOpacity(
      duration: new Duration(seconds: 2),
      opacity: isOpacity ? 1 : 0,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.lightGreenAccent,
        child: Text("AnimatedOpcatiy",style: TextStyle(color: Colors.black,fontSize: 10),),
      ),
    );
  }

AnimatedOpactiy按钮代码:

initButton("AnimatedOpacity按钮")

 initButton(String s, int type) {
    return ElevatedButton(
      onPressed: () {
          buildAnimatedOpacity();
      },
      child: Text(s),
    );
  }
  
 bool isOpacity = false;
 
 void buildAnimatedOpacity() {
    setState(() {
      isOpacity = !isOpacity;
    });
  }

分析:

点击按钮时通过取isOpacity的反值,然后在AnimatedOpacity的opacity参数中设置值,达到改变透明度的效果

效果图(1.5):

AnimatedAlign

常用于移动动画

加粗是必传参数

AnimatedAlign参数	类型	说明
alignment	Alignment	child对齐方式 x和y的取值范围(-1至1)
duration	Duration	动画持续时间
child	Widget	子Widget
curve	Curve	简单理解为: 可以使动画过渡更平滑

AnimatedAlign代码:

  double _x = 0;
  double _y = 0;

 Widget initAnimatedAlign() {
    return Container(
      height: 300,
      color: Colors.red,
      child: AnimatedAlign(
        duration: new Duration(seconds: 2),
        alignment: Alignment(_x, _y),
        child: Container(
          width: 100,
          height: 100,
          color: Colors.cyan,
        ),
      ),
    );
  }

AnimatedAlign按钮代码:

initButton("AnimatedAlign按钮"),

initButton(String s, int type) {
    return ElevatedButton(
      onPressed: () {
          buildAnimatedAlign();
      },
      child: Text(s),
    );
  }

 void buildAnimatedAlign() {
    _x == 0 ? _x = -1 : _x = 0;
    _y == 0 ? _y = -1 : _y = 0;

    setState(() {});
  }

Alignment中x取值:(取值范围(-1 值 1))

• x = -1左对齐
• x = 0居中对齐
• x = 1右对齐

Alignment中y取值:(取值范围(-1 值 1))

• y = -1 上对齐
• y = 0 居中对齐
• y = 1 下对齐
  

由此可得:

• 左上角对齐 :x = -1 , y = -1

• 右上角对齐: x = 1 , y = -1

• 左下角对齐: x = -1 ,y = 1

• 右下角对齐:x = 1 ,y = 1

• 居中对齐: x = 0, y = 0

效果图(1.6):

完整代码

上一章:Flutter Hero动画(2.6)

下一章:Flutter 自定义AppBar,轮子Banner(3.1)

原创不易,您的点赞就是对我最大的支持,留下您的点赞吧~

下面是我的公众号,平时会发一些andorid和 flutter 的小知识等,主要用来记录工作开发中的一些小知识,有喜欢的朋友可以扫描二维码咋们互相进步~