SizeTransition

SizeTransition

SizeTransition 用于更改子组件的尺寸来实现动画。支持垂直方向或水平方向修改动画，同时尺寸更改的起始位置可以从顶部、中部、底部（垂直方向）或左侧、中间、右侧（水平方向）开始。

• 构造函数

const SizeTransition({
    super.key,
    this.axis = Axis.vertical,//更改组件高度或者宽度
    required Animation<double> sizeFactor,//控制组件尺寸变化的动画
    this.axisAlignment = 0.0,//子组件的对齐位置,默认为0.0，是从中间开始更改尺寸
    this.child,
  }) 

例子：

import 'package:flutter/material.dart';

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

  @override
  State<SizeTransitionPage> createState() => _SizeTransitionPageState();
}

class _SizeTransitionPageState extends State<SizeTransitionPage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  
  @override
  void initState() {
    // TODO: implement initState
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this
    )..repeat();

    _animation = CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
    super.initState();
  }
  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SizeTransition'),),
      body:Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizeTransition(
              sizeFactor: _animation,
              axis: Axis.horizontal,
              axisAlignment: 1.0,
              child: Image.asset('images/bird.png',width: 200,height: 200,),
            ),
            Container(
              alignment: Alignment.center,
              margin:const EdgeInsets.only(top: 50),
              width: double.infinity,
              child: SizeTransition(
                sizeFactor: _animation,
                axis: Axis.horizontal,
                axisAlignment: 0.0,
                child: Image.asset('images/logo.png',width: 400,height: 200,),
              ),
            )

          ],
        ),
      )
    );
  }
}

效果：