Flutter回顾#1:动画:

0 阅读1分钟

截屏2026-03-17 17.20.59.png

隐式动画

单Widget

flutter全自动控制单个Widgte变化,不需要开发者关心,常用于控件动画效果。

AnimatedContainer

Contianer对应动画组件是AnimatedContainer,热重载之后会看到代码改动之后的变化动画。注意,Containercolordecoration属性只能二选一,因为本身后者这就是前者的实现原理。

body: Center(
        child: AnimatedContainer(
          duration: Duration(milliseconds: 100),
          width: 300,
          height: _height,
          decoration: BoxDecoration(
            gradient: LinearGradient(        //渐变组件
              begin: Alignment.bottomCenter, //渐变起始色位置
                end: Alignment.topCenter,    //渐变终止色位置
                stops: [0.1,0.3],            //渐变出现的区间
                colors: [Colors.red, Colors.white]), //起始色和终止色
            boxShadow: [BoxShadow(
                spreadRadius: 20, //边框颜色粗细度
                blurRadius: 20)], //边框模糊粗细度
            borderRadius: BorderRadius.circular(150) //边框圆角半径
          ),
          child: Center(child: Text("HI", style: TextStyle(fontSize: 50))),
        ),
      ),
截屏2026-03-17 18.29.12.png

多Widget

AnimatedSwitcher

在多个Widget之间实现动画,常见的父Widget切换子Widget类型时,AnimatedSwitcher可以实现平滑过渡的动画效果,但要注意,AnimatedSwitcher只能让他的直接child切换类型(或者Key变化)时产生动画效果,结构上隔一代不会有效果,同类型同key也不会有效果。不同类型直接生效,同类型先看key,不一样的话也会生效。

child: AnimatedSwitcher(
  duration: Duration(milliseconds: 3000),
  child: _height > 400 ? Container(color: Colors.blue, width: 200, height: 200,)
      : CircularProgressIndicator()
),
Mar-17-2026 22-14-51.gif

动画效果实际上由AnimatedSwitchertransitionBuilder来控制的,默认不指定会自动实现了FadeTransition,从而有了渐隐效果。RotationTransitionScaleTransition等等,多个transitionBuilder可以嵌套组合实现复杂的多重效果。

child: AnimatedSwitcher(
            transitionBuilder: (child,animation){
              return FadeTransition(
                opacity: animation,
                child: ScaleTransition(scale: animation,
                  child: child,
                ),
              );
            },
              duration: Duration(milliseconds: 3000),
              child: Text(key: ValueKey(_height),"$_height",style: TextStyle(fontSize: 50),)
          ),
Mar-17-2026 22-39-28.gif