Flutter Animation 动画

Flutter动画实现有很多，勤奋的小伙伴可以去官网查看。本文不多做介绍，主要介绍几个常用的动画。

动画容器AnimatedContainer

AnimatedContainer提供了一个方便的方法来创建具有特定属性的插件：宽度，高度，背景颜色，填充，边框等。

//属性使用变量，当变量值改变时可以看到容器改变的动画。
AnimatedContainer(
  // 定义动画需要多长时间
  duration: Duration(seconds:1),
  // 提供一个可选的曲线，使动画感觉更流畅。
  curve: Curves.fastOutSlowIn,
  //长度宽度使用变量  实现组件缩放动画
  width: _width,
  height: _height,
  decoration: BoxDecoration(
    //颜色 圆角度使用变量
    color: _color,
    borderRadius: _borderRadius,
  ),
),

淡入淡出AnimatedOpacity

使用AnimatedOpacity插件可以很容易地进行不透明度动画。

//opacity 属性就是控制可见度 其值为  0 -- 1
AnimatedOpacity(
  duration: Duration(seconds: 1), 
  opacity: _visible ? 1.0 : 0.0,
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.blue,
  ),
),

平移动画AnimatedAlign

使用AnimatedAlign可快速构建组件平移动画

AnimatedAlign(
  // xy坐标 是决定组件再父容器中的位置。 修改坐标即可完成组件平移
  alignment: Alignment(_x,_y),
  duration: Duration(seconds: 1),
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.blue,
  ),
),

补间动画Tween

tween是介于两者之间的简称。在补间动画中，定义了开始点和结束点，以及时间线和定义转换时间和速度的曲线。该框架计算如何从开始点过渡到结束点。

tween使用AnimationController进行管理动画。使用CurvedAnimation将进展定义为非线性曲线。

默认情况下，AnimationController对象的范围从0.0到1.0。一般在规定时间内取出60(官网说60，我米8 亲测168)帧的时间点。

以下介绍几种常用的动画：

透明度渐变

//定义变量
AnimationController controller = AnimationController(duration: const Duration(seconds: 3), vsync: this);
Animation<double> opacity = Tween<double>(begin: 0.0,end: 1.0,).animate(controller)
    ..addListener(() {
        setState(() {
          //重绘
        });
      });


//使用变量完成动画
return Opacity(
      opacity: opacity.value,
      child: //
    );

翻转

//定义变量
AnimationController controller= AnimationController(duration: const Duration(seconds: 3), vsync: this);
Animation<double> rotate = Tween<double>(begin: 0,end: Math.pi * 2,).animate(controller)
    ..addListener(() {
      print(Math.pi);
        setState(() {
          // 重绘
        });
      });

//使用变量
return Container(
      // transform: Matrix4.identity()..rotateZ(rotate.value),
      transform: Matrix4.rotationZ(rotate.value),
      child: //
    );

位移

AnimationController controller = AnimationController(duration: const Duration(seconds: 3), vsync: this);
Animation<EdgeInsets> movement = Tween<EdgeInsets>(begin: EdgeInsets.only(top: 0.0), end: EdgeInsets.only(top: 300.0),).animate(controller )
    ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      });

//
return Container(
      padding: movement.value,
      child: //
    );

方形变圆

AnimationController controller = AnimationController(duration: const Duration(seconds: 3), vsync: this);
Animation<BorderRadius> radius = Tween<BorderRadius>(begin: BorderRadius.circular(0.0),end: BorderRadius.circular(150.0),).animate(controller)
    ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      });

//
return Container(
      decoration: new BoxDecoration(
            color: Colors.blue,
            border: new Border.all(
              //黑色 3像素边框
              color: Colors.black,
              width: 3.0,
            ),
            borderRadius: radius.value,
          ),
      child: //
    );

颜色渐变

AnimationController controller = AnimationController(duration: const Duration(seconds: 3), vsync: this);
Animation<Color> color = ColorTween(begin: Colors.blue,end: Colors.red,).animate(controller)
    ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      });

//
return Container(
      decoration: new BoxDecoration(
            color: color.value,
            border: new Border.all(
              //黑色 3像素边框
              color: Colors.black,
              width: 3.0,
            ),
          ),
      child: //
    );

高宽渐变

AnimationController controller = AnimationController(duration: const Duration(seconds: 3), vsync: this);
Animation<double> animation = Tween(begin: 0.0, end: 300.0).animate(controller )
    
    ..addListener(() {
      print(a++);
      setState(() {
        // the state that has changed here is the animation object’s value
      });
    });

//
return Container(
        margin: EdgeInsets.symmetric(vertical: 10.0),
        height: animation.value,
        width: animation.value,
        child: FlutterLogo(),
    );

组合

// 组合以上动画  定义一个build， 
  Widget _buildAni(BuildContext context, Widget child) {
    return new Container(
      //位移
      padding: movement.value,
      //翻转
      transform: Matrix4.identity()..rotateZ(rotate.value),
      child: new Opacity(//透明度渐变
        opacity: opacity.value,
        child: new Container(
          width: width.value,
          height: height.value,
          decoration: new BoxDecoration(
            color: color.value,
            border: new Border.all(
              //黑色 3像素边框
              color: Colors.black,
              width: 3.0,
            ),
            borderRadius: radius.value,
          ),
          child: FlutterLogo()
        ),
      ),
    );
  }

// 使用 builder方式加载
return AnimatedBuilder(animation: controller, builder: _buildAni);

效果图

 

完整代码

查看源码