题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。
** | 你可能需要 |
---|---|
CSDN | 网易云课堂教程 |
掘金 | EDU学院教程 |
知乎 | Flutter系列文章 |
在Flutter 中实现透明度渐变效果的方式可通过以下
本文章将实现通过 Opacity 组件来 实现透明度渐变动画效果,实现效果如下
在Flutter 中 Opacity 组件用来设置子 Widget 的透明度,Opacity 的属性 opacity 是用来配置透明度的,取值范围为 0.0~1.0 ,0.0 为完全透明 ,1.0这不透明 , 基本使用代码如下:
Opacity buildOpacity() {
return Opacity(
///当前的透明度
opacity: 0.8,
///子Widget
child: Container(
height: 220.0,
width: 220.0,
color: Colors.blue,
),
);
}
在这里通过 Opacity 组件实现透明度过渡的思路是来源于动态修改 opacity 值而达到的变化
动画效果,所以这里结合了一个 AnimationController 来控制变化曲线使用,代码如下:
class AnimatedOpacityPage2 extends StatefulWidget {
@override
_AnimatedOpacityPageState createState() => _AnimatedOpacityPageState();
}
class _AnimatedOpacityPageState extends State<AnimatedOpacityPage2> with TickerProviderStateMixin {
///当前页面显示组件的透明度
double opacityLevel = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("透明度动画"),
),
///线性布局将透明组件与滑块上下排列
body: Column(
///子组件顶部对齐
mainAxisAlignment: MainAxisAlignment.start,
children: [
///构建透明组件
Opacity(
///当前的透明度
opacity: opacityLevel,
///子Widget
child: Container(
height: 220.0,
width: 220.0,
color: Colors.blue,
),
),
],
),
);
}
}
在这里声明了一个 AnimationController 来动态的控制 透明度动态变化规律,一般在 initState 初始化函数中进行创建,代码如下):
//动画控制器
AnimationController controller;
@override
void initState() {
super.initState();
///在这里 controller 的值在2秒内从0过渡到1
controller = AnimationController(
///duration 为正向执行动画的时间
duration: Duration(seconds: 2),
///反向执行动画的时间
reverseDuration: Duration(milliseconds: 3000),
///controller的变化的最小值
lowerBound: 0.0,
///controller变化的最大值
upperBound: 1.0,
///绑定页面的Ticker
vsync: this);
///添加动画实时更新监听
controller.addListener(() {
///获取AnimationController执行的值
opacityLevel = controller.value;
setState(() {});
});
}
... ... 省略
}
然后在点击按钮时开始动画 如下:
RaisedButton(
child: Text('正向开启动画'),
onPressed: () {
///重置动画
controller.reset();
///向前执行
controller.forward();
},
),
通过 forward 正向开启动画 ,是从 0.0 ~ 1.0 的过程,是由不透明变为透明的过渡,然后再由1.0~0.0 是由不透明变为透明的过渡 ,反向执行一下就可以,代码如下:
RaisedButton(
child: Text('反向开启动画'),
onPressed: () {
///反向前执行
controller.reverse();
},
)
完毕