Flutter动画变换插件animated_transform的使用

animated_transform 是一个Flutter插件，它允许你动态地缩放、旋转、翻转和定位子组件，并且带有动画效果。你可以通过简单的属性设置来实现这些效果。

你可以在这里查看 Demo。

使用方法

要了解更多关于 animated_transform 的类和其他引用，请参阅 API Reference。

示例代码

下面是一个完整的示例代码，展示了如何使用 animated_transform 插件来创建一个可以旋转、缩放和翻转的 FlutterLogo。

import 'package:flutter/material.dart';
import 'package:animated_transform/animated_transform.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Transform Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Animated Transform Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _rotate = 0;
  double _scale = 1;
  bool _flipX = false;
  bool _flipY = false;

  void _increaseRotate() {
    setState(() {
      _rotate += 45;
    });
  }

  void _decreaseRotate() {
    setState(() {
      _rotate -= 45;
    });
  }

  void _increaseScale() {
    setState(() {
      _scale += .5;
    });
  }

  void _decreaseScale() {
    setState(() {
      _scale -= .5;
    });
  }

  void _toggleFlipX() {
    setState(() {
      _flipX = !_flipX;
    });
  }

  void _toggleFlipY() {
    setState(() {
      _flipY = !_flipY;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.black26,
                ),
              ),
              child: AnimatedTransform(
                rotate: _rotate,
                flipX: _flipX,
                flipY: _flipY,
                scale: _scale,
                child: const FlutterLogo(size: 100),
              ),
            ),
            const SizedBox(height: 30),
            Wrap(
              spacing: 5,
              children: [
                IconButton.outlined(
                  onPressed: _decreaseRotate,
                  icon: const Icon(Icons.rotate_left),
                ),
                IconButton.outlined(
                  onPressed: _decreaseScale,
                  icon: const Icon(Icons.keyboard_double_arrow_down),
                ),
                IconButton.outlined(
                  onPressed: _increaseScale,
                  icon: const Icon(Icons.keyboard_double_arrow_up),
                ),
                IconButton.outlined(
                  onPressed: _increaseRotate,
                  icon: const Icon(Icons.rotate_right),
                ),
              ],
            ),
            const SizedBox(height: 10),
            Wrap(
              spacing: 5,
              children: [
                IconButton.outlined(
                  onPressed: _toggleFlipX,
                  icon: const Icon(Icons.compare_arrows),
                ),
                RotatedBox(
                  quarterTurns: 1,
                  child: IconButton.outlined(
                    onPressed: _toggleFlipY,
                    icon: const Icon(Icons.compare_arrows),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

主要功能

• 旋转：通过 rotate 属性设置旋转角度。
• 缩放：通过 scale 属性设置缩放比例。
• 翻转：通过 flipX 和 flipY 属性分别设置沿X轴和Y轴的翻转。
• 动画效果：所有变换都会带有平滑的动画效果。

如何安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  animated_transform: ^latest_version

然后运行 flutter pub get 来安装依赖。

希望这个插件能帮助你更轻松地实现复杂的动画效果！如果你有任何问题或建议，请随时联系我。

如果你觉得这个包对你有帮助，欢迎赞助我，以便我能有更多时间来维护和改进这些包。

感谢支持！