Flutter透明度渐变动画FadeTransition实现透明度渐变动画效果
原创Flutter透明度渐变动画FadeTransition实现透明度渐变动画效果
原创
早起的年轻人
修改于 2020-08-19 10:06:58
修改于 2020-08-19 10:06:58
题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。
在这里插入图片描述
在Flutter 中实现透明度渐变效果的方式可通过以下
本文章将实现通过 FadeTransition 实现透明度渐变动画效果，实现效果如下
在这里插入图片描述
如上图所示效果，使用 FadeTransition 组件就的实现代码如下：
///构建渐变动画[FadeTransition]
Widget buildSlideTransition() {
///实现透明渐变动画
return FadeTransition(
///过渡
opacity: controller,
//将要执行动画的子view
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
);
}使用 FadeTransition 组件时，opacity 配置的是FadeTransition组件的透明度，在这里
opacity 属性配置的是 Animation<double> 类型。
AnimationController 继承于 Animation<double>，所以在这里声明了一个 AnimationController 来动态的控制 透明度动态变化规律。
一般在 initState 初始化函数中进行创建，创建 AnimationController 时需要绑定一个 Ticker 来实现动画刷新帧监听，所以一般 with TickerProviderStateMixin，代码如下（代码清单1-2）：
///代码清单 1-2
class _FadeTransitionPageState extends State
with TickerProviderStateMixin {
//动画控制器
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);
}
... ... 省略
}然后在点击按钮时开始动画 如下：
RaisedButton(
child: Text('正向开启动画'),
onPressed: () {
///重置动画
controller.reset();
///向前执行
controller.forward();
},
),通过 forward 正向开启动画 ，是从 0.0 ~ 1.0 的过程，是由不透明变为透明的过渡，然后再由1.0~0.0 是由不透明变为透明的过渡 ，反向执行一下就可以，代码如下：
RaisedButton(
child: Text('反向开启动画'),
onPressed: () {
///反向前执行
controller.reverse();
},
)完毕
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
