SlideTransition

SlideTransition

平移动画，我们可以创建一个Animation<Offset>定义过渡。

• 构造函数

const SlideTransition({
    super.key,
    required Animation<Offset> position,//平移动画
    this.transformHitTests = true,//点击事件是否落在动画后的控件上
    this.textDirection,//动画执行的位置关系
    this.child,
  })

默认情况下，transformHitTests设置为true使小部件可以在当前在屏幕上绘制的位置单击。设置transformHitTests为false使小部件仅在原点位置可点击，通常在动画速度非常快且小部件在结束时返回其原点位置时使用。

例子：

import 'package:flutter/material.dart';

class SlideTransitionPage extends StatefulWidget {
  const SlideTransitionPage({Key? key}) : super(key: key);

  @override
  State<SlideTransitionPage> createState() => _SlideTransitionPageState();
}

class _SlideTransitionPageState extends State<SlideTransitionPage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _animation;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this
    )..repeat(reverse: true);
    final _curvedAnimation = CurvedAnimation(parent: _controller, curve: Curves.easeInCubic);
    _animation = Tween<Offset>(
      begin: const Offset(-0.5, 0.0),
      end: const Offset(1,2.0),
    ).animate(_curvedAnimation);
    _controller.forward();
  }
  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SlideTransition'),),
      body: Center(
        child: SlideTransition(
          position: _animation,
          textDirection: TextDirection.rtl,//移动方向
          transformHitTests: false,
          child: InkWell(
            onTap: (){
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('点击'))
              );
            },
            child: Container(
              color: Colors.blue,
              width: 100,
              height: 100,
            ),
          )
        ),
      )
    );
  }
}

效果: