Bootstrap

Flutter:SlideTransition位移动画,Interval动画延迟

配置vsync,需要实现一下with SingleTickerProviderStateMixin
class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{
  // 定义 AnimationController
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化 AnimationController
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync:this, // 让程序和手机的刷新频率统一
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('标题'),
      ),
      body: Center(
        child: Column(
          children: [
            SlideTransition(
              // 方块的宽度100,设置x轴y轴位移 0.5:也就是x轴向右移动50,同时向下移动50
              position: _controller.drive(Tween(begin: Offset(0, 0),end: Offset(0.5, 0.5))),
              child: Container(
                alignment: Alignment.center,
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
            ElevatedButton(onPressed: (){
              _controller.repeat(reverse: true); // repeat(reverse: true) 是否循环播放
            }, child: const Text('重复')),
            ElevatedButton(onPressed: (){
              _controller.stop();
            }, child: const Text('停止')),
            ElevatedButton(onPressed: (){
              _controller.forward();
            }, child: const Text('移动')),
            ElevatedButton(onPressed: (){
              _controller.reverse();
            }, child: const Text('返回')),
            ElevatedButton(onPressed: (){
              _controller.reset();
            }, child: const Text('重置')),
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

第二种写法

初始化时,动画时长设置为10秒
duration: const Duration(milliseconds: 10000),

position:
	Tween(begin: Offset(0, 0), end: Offset(0.5, 0.5))
	.chain(CurveTween(curve: Curves.bounceInOut)) // 配置动画效果
	.chain(CurveTween(curve: Interval(0.3, 0.6))) // 当前时间点30%开始(也就是第三秒开始移动)运动到60%结束(第6秒结束)
	.animate(_controller),
;