题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。
在Flutter 中实现透明度渐变效果的方式可通过以下
本文章将实现通过 AnimatedOpacity 实现透明度渐变效果,实现效果如下
如上图所示效果,其实使用 AnimatedOpacity 组件就可简单的实现,代码如下:
///当前页面显示组件的透明度
double opacityLevel = 1.0;
///构建透明动画组件[AnimatedOpacity]
AnimatedOpacity buildAnimatedOpacity() {
return AnimatedOpacity(
///透明度
opacity: opacityLevel,
///过渡时间
duration: Duration(milliseconds: 2000),
///动画插值器
curve: Curves.linear,
///动画过渡完毕的回调
onEnd: () {},
///子Widget
child: Container(
color: Colors.red,
),
);
}
使用 AnimatedOpacity 组件时,当配置的 opacityLevel 透明度属性发生变化并且调用了 setState方法后,AnimatedOpacity 组件会通过 透明度渐变的方式 将子 Widget 在配置的 Duration 时间内动态的过渡 ,如 由 1.0 变为 0.0 ,AnimatedOpacity 修饰的 子 Widget 的透明度会由 1.0 在配置的 Duration 时间内 慢慢的过渡到 0.0 ,而不是一下子就过渡到了 0.0 ,呈现出一个视觉上透明渐变的效果。
AnimatedOpacity 是一个轻量级的实现渐变动画效果的组件,实际应用场景如视频播放页面,点击视频页面渐变方式显示 暂停按钮,然后延时一会再以渐变的方式隐藏。
上述图片中的完整代码如下所示:
///透明渐变动画效果实现
class AnimatedOpacityPage extends StatefulWidget {
@override
_AnimatedOpacityPageState createState() => _AnimatedOpacityPageState();
}
class _AnimatedOpacityPageState extends State<AnimatedOpacityPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("透明度动画"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
height: 120.0,
width: 120.0,
///背景
color: Colors.blue[50],
child: buildAnimatedOpacity(),
),
RaisedButton(
child: Text('修改透明度'),
onPressed: () {
setState(() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0);
},
),
],
),
);
}
///当前页面显示组件的透明度
double opacityLevel = 1.0;
///构建透明动画组件[AnimatedOpacity]
AnimatedOpacity buildAnimatedOpacity() {
return AnimatedOpacity(
///透明度
opacity: opacityLevel,
///过渡时间
duration: Duration(milliseconds: 2000),
///动画插值器
curve: Curves.linear,
///动画过渡完毕的回调
onEnd: () {},
///子Widget
child: Container(
color: Colors.red,
),
);
}
}
完毕
如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。