animation - 颤动动画
问题描述
一旦用户单击按钮,如何淡出第一个小部件,并动画第二个小部件从底部出现,并替换第一个小部件?
并单击第二个按钮,使第二个小部件下降而第一个小部件淡入?
解决方案
您可以使用第一个小部件的 AnimatedOpacity 和第二个小部件的 AnimatedPositioned 来做到这一点。这里有一个例子:
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
double _firstWidgetOpacity = 1.0;
double _secondWidgetBottomPosition = -200.0;
animate() {
setState(() {
if (_firstWidgetOpacity == 1.0) {
_firstWidgetOpacity = 0.0;
_secondWidgetBottomPosition = MediaQuery.of(context).size.height / 2 - 140.0;
} else {
_firstWidgetOpacity = 1.0;
_secondWidgetBottomPosition = -200.0;
}
});
}
@override
void initState() {
super.initState();
print((560 / 60).floor());
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: animate,
label: Text('Animate'),
),
body: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: AnimatedOpacity(
duration: Duration(milliseconds: 350),
opacity: _firstWidgetOpacity,
curve: Curves.easeIn,
child: Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
child: Center(
child: Text('First widget'),
),
),
),
),
AnimatedPositioned(
duration: Duration(milliseconds: 350),
curve: Curves.elasticIn,
bottom: _secondWidgetBottomPosition,
left: 0.0,
right: 0.0,
child: Center(
child: Container(
width: 200.0,
height: 200.0,
color: Colors.orange,
child: Center(
child: Text('Second widget'),
),
),
),
),
],
),
);
}
}
您可以使用持续时间和曲线来获得所需的结果。
推荐阅读
- sql-server - 获取 Datagridview 组合框中所选项目的 ID 并显示取决于 Selectedvalue 的表单
- python - 如何反向批量标准化
- android - android 是否加密通过 HttpConnection Post 或 Retrofit 等库发送的 https 标头?
- javascript - C3JS 条形图,带有颜色的特定顺序
- angular - Angular 7 EventSource 无限期地获取流
- jquery - XNAT JSON 获取项目 ID 列表以填充下拉列表以供选择
- python - 是否可以创建数组数组的 numpy.memmap?
- haskell - 似乎不能在实例声明中使用带有类型变量的类型表达式和需要显式类型的函数
- python - Django表单中两个日期字段之间的区别
- javascript - 如何使用 Jest 测试此功能?