RelativePositionedTransition

RelativePositionedTransition

绝对定位的动画实现，它需要一个特定的动画来将child的位置从动画的生命周期的起始位置移到结束位置。必须用在Stack子组件中。通常与RectTween一起使用。

• 构造函数

const RelativePositionedTransition({
    super.key,
    required Animation<Rect?> rect,
    required this.size,
    required this.child,
  }) 

例子:

import 'package:flutter/material.dart';

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

  @override
  State<RelativePositionedTransitionPage> createState() => _RelativePositionedTransitionPageState();
}

class _RelativePositionedTransitionPageState extends State<RelativePositionedTransitionPage>
with SingleTickerProviderStateMixin{
  late AnimationController _controller;
  late RectTween _rectTween;
  late CurvedAnimation _curvedAnimation;
  @override
  void initState() {
    // TODO: implement initState
    _controller = AnimationController(
      duration: const Duration(seconds: 5),
      vsync: this
    )..repeat(reverse: true);
     _curvedAnimation = CurvedAnimation(parent: _controller, curve: Curves.ease);
    _controller.forward();
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    //获取设备高度
    double height = MediaQuery.of(context).size.height;
    //PositionedTransition 控制器
    _rectTween = RectTween(
      begin: Rect.fromLTRB(0, height, 0, 0),
      end: const Rect.fromLTRB(0, 0, 0, 0),
    );
    return Scaffold(
      appBar: AppBar(title: const Text('RelativePositionedTransition'),),
      body: Center(
        child: Stack(
          children: [
            RelativePositionedTransition(
              rect: _rectTween.animate(_curvedAnimation),
              size: const Size(0,0),
              child: Container(
                color: Colors.red,
              )
            )
          ],
        ),
      ),
    );
  }
}

效果：