• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

Flutter组件之AnimatedOpacity

Flutter cps12345 8个月前 (01-23) 211次浏览 0个评论

AnimatedOpacity

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

var _opacity = 1.0;
AnimatedOpacity(
  opacity: _opacity,
  duration: Duration(seconds: 2),
  child: Container(
    height: 60,
    width: 150,
    color: Colors.blue,
  ),
)

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

RaisedButton(
  onPressed: (){
    setState(() {
      _opacity = 0;
    });
  },
)

效果如下:

Flutter组件之AnimatedOpacity

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

AnimatedOpacity(
  curve: Curves.easeIn,
  ...
)

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

AnimatedOpacity(
  onEnd: (){
    //动画执行结束回调
  },
  ...
)
喜欢 (0)

您必须 登录 才能发表评论!