Flutter中如何实现容器从正方形到平行四边形的动画过渡？

要实现矩形容器到平行四边形的平滑过渡，核心是利用**Transform的斜切变换（skew）**配合Flutter动画系统完成，具体实现方案如下：

实现思路 #

目标平行四边形本质是对矩形做水平方向的斜切（skewX）变换。我们通过AnimationController控制斜切角度的变化，让容器从0斜切度（矩形）过渡到指定斜切度（平行四边形），点击按钮时触发动画的正向/反向播放，实现形状切换。

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const SkewAnimationDemo());

class SkewAnimationDemo extends StatefulWidget {
  const SkewAnimationDemo({super.key});

  @override
  State<SkewAnimationDemo> createState() => _SkewAnimationDemoState();
}

class _SkewAnimationDemoState extends State<SkewAnimationDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _skewAnimation;
  bool _isParallelogram = false;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，设置过渡时长
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );

    // 创建斜切动画，从0过渡到-0.2（负数值对应向左斜切，可按需调整）
    _skewAnimation = Tween<double>(begin: 0, end: -0.2).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  // 切换形状动画
  void _toggleShape() {
    setState(() {
      _isParallelogram = !_isParallelogram;
    });
    _isParallelogram ? _controller.forward() : _controller.reverse();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('形状过渡动画')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 用AnimatedBuilder监听动画值，实时更新Transform
              AnimatedBuilder(
                animation: _skewAnimation,
                builder: (context, child) {
                  return Transform(
                    transform: Matrix4.skewX(_skewAnimation.value),
                    origin: const Offset(0, 0), // 以左上角为变换原点
                    child: Container(
                      width: 200,
                      height: 120,
                      color: Colors.blueAccent,
                      alignment: Alignment.center,
                      child: const Text(
                        '测试容器',
                        style: TextStyle(color: Colors.white, fontSize: 18),
                      ),
                    ),
                  );
                },
              ),
              const SizedBox(height: 40),
              ElevatedButton(
                onPressed: _toggleShape,
                child: Text(_isParallelogram ? '变回矩形' : '切换为平行四边形'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键细节说明 #

• 斜切角度调整：Tween的end值可按需修改，正数对应向右斜切，负数对应向左斜切，数值越大斜切程度越明显。
• 动画节奏控制：Curves.easeInOut让动画首尾更平缓，也可替换为Curves.linear等其他曲线改变动画节奏。
• 变换原点：设置origin为左上角，确保斜切变换的基准点符合预期，避免容器位置偏移。

内容的提问来源于stack exchange，提问作者Mussadaq Ahmad Jamil