在这段代码中,我尝试使用
SlideTransition
创建一个简单的递增数字,但它不能正常工作,我只能成功地使用ScaleTransition
。这意味着我想要使用SlideTransition
来增加数字。
所需创建的Gif示例:
请将second
部分视为动画。
class TestScreen extends StatefulWidget {
const TestScreen({super.key});
@override
State<TestScreen> createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> with SingleTickerProviderStateMixin {
int num = 0;
late final AnimationController _animationController = AnimationController(
duration: Duration(milliseconds: 750),
vsync: this)
..forward();
static final offset1 = Tween<Offset>(begin: Offset.zero, end: Offset(0, -1));
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AnimatedSwitcher(
duration: Duration(milliseconds: 1000),
transitionBuilder: (child, animation) => SlideTransition(
position: (offset1).animate(animation),
child: child,
),
child: Text(
key: ValueKey(num),
'$num',
style: TextStyle(color: Colors.black, fontSize: 64.0),
),
),
ElevatedButton(
onPressed: () {
setState(() {
num++;
});
},
child: Text('increment'),
),
],
),
),
);
}
}
transitionBuilder
传递了一个你应该使用的动画,请参见 https://gist.github.com/pskink/d1f591eca19359c09d38bf8cc35df4ca#file-clock-dart-L79 - pskinkAnimationController _animationController
来为您的小部件添加动画效果。 - pskinkAnimatedSwitcher
非常灵活,可以制作各种过渡效果 - 只需像我在代码片段中所做的那样使用transitionBuilder
即可。 - pskink