在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹。
如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。
在Flutter中, AnimatedWidget可以理解为动画Animation的辅助类,可以理解为创建一个Widget自带动画效果,也可以理解为使用Widget来封装复杂的组合的自定义动画实现,当然这个过程中是不需要 setState的。
本页面实现 Demo 效果如下
程序入口
main() {
runApp(MaterialApp(
//不显示 debug标签
debugShowCheckedModeBanner: false,
//显示的首页面
home: DemoStreamBuilder(),
));
}
DemoStreamBuilder 主页面
class DemoAnimatedBuilder extends StatefulWidget {
@override
_DemoAnimatedBuilderState createState() => _DemoAnimatedBuilderState();
}
class _DemoAnimatedBuilderState extends State<DemoAnimatedBuilder>
with SingleTickerProviderStateMixin {
//动画控制器
AnimationController _animationController;
@override
void initState() {
super.initState();
//0.0 - 1.0
_animationController = new AnimationController(
vsync: this, duration: Duration(milliseconds: 1800));
}
@override
Widget build(BuildContext context) {
//返回
return Scaffold(
//按钮
floatingActionButton: FloatingActionButton(
//小图标
child: Icon(Icons.add),
//点击事件
onPressed: () {
_animationController.reset();
_animationController.forward();
},
),
appBar: AppBar(
title: Text("Animated"),
),
body: Container(
padding: EdgeInsets.all(30),
//线性布局
child: Column(
children: [
TransformAnimated(
animation: _animationController,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("测试数据"),
Text("测试数据"),
Text("测试数据"),
],
),
),
],
),
),
);
}
}
自定义AnimatedWidget 的实现 TransformAnimated 如下
class TransformAnimated extends AnimatedWidget {
Widget child;
TransformAnimated({this.child, Animation animation})
: super(listenable: animation);
@override
Widget build(BuildContext context) {
//获取动画控制监听
Animation<double> animation = listenable;
//自定义
return Container(
color: Colors.grey[200],
width: double.infinity,
margin: EdgeInsets.only(
left: 20,
right: 20,
top: 60 * animation.value / 2,
),
height: 260,
//向下平移
child: Transform.translate(
// 参数一 表示 在x轴方向的平移量
// 参数二 表示 在y轴方向的平移量
offset: Offset(0.0, 150 * animation.value),
//执行动画的子Widet
child: child,
),
);
}
}