微信交流群

老孟公众号

# AnimatedOpacity

AnimatedOpacity是一个隐式的动画组件,它可以使子组件变的透明,用法如下:

var _opacity = 1.0;
AnimatedOpacity(
  opacity: _opacity,
  duration: Duration(seconds: 2),
  child: Container(
    height: 60,
    width: 150,
    color: Colors.blue,
  ),
)
1
2
3
4
5
6
7
8
9
10

duration参数是动画执行的时间,opacity参数是透明值,值的范围是0.0-1.0。如果仅仅是构建这样一个组件是不会有动画效果,需要让opacity参数发生变化,点击按钮设置新的opacity值:

RaisedButton(
  onPressed: (){
    setState(() {
      _opacity = 0;
    });
  },
)
1
2
3
4
5
6
7

效果如下:

通过curve参数设置动画执行的曲线,默认直线执行,系统提供了很多中动画执行曲线,比如加速、减速、弹簧等,用法如下:

AnimatedOpacity(
  curve: Curves.easeIn,
  ...
)
1
2
3
4

如果想要在动画执行结束时处理一些事情,可以在onEnd回调中处理,用法如下:

AnimatedOpacity(
  onEnd: (){
    //动画执行结束回调
  },
  ...
)
1
2
3
4
5
6