Flutter动画效果插件phlox_animations的使用

Phlox Animations 是一个用于创建漂亮自定义动画的简单包。它支持同时对多个属性进行动画处理。

开始使用

添加依赖

在 pubspec.yaml 文件中添加 phlox_animations 依赖：

dependencies:
  phlox_animations: any

然后运行以下命令来获取和升级包：

flutter pub get
flutter pub upgrade

导入库

在 Dart 文件中导入库：

import 'package:phlox_animations/phlox_animations.dart';

示例代码

缩放动画 (Scale)

class Example1 extends StatelessWidget {
  const Example1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PhloxAnimations(
          duration: const Duration(seconds: 2),
          child: Container(
            height: 300,
            width: 300,
            decoration: BoxDecoration(
              color: Colors.blue.shade900,
              borderRadius: BorderRadius.circular(32)
            ),
          ),
          fromScale: 0,
          toScale: 2,
        ),
      ),
    );
  }
}

移动动画 (Move X)

class Example2 extends StatelessWidget {
  const Example2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PhloxAnimations(
          duration: const Duration(seconds: 2),
          child: Container(
            height: 310,
            width: 310,
            decoration: BoxDecoration(
              color: Colors.blue.shade900,
              borderRadius: BorderRadius.circular(32)
            ),
          ),
          fromX: -200,
          toX: 200,
        ),
      ),
    );
  }
}

移动XY带循环 (Move XY with Loop)

class Example3 extends StatelessWidget {
  const Example3({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PhloxAnimations(
          duration: const Duration(seconds: 2),
          child: Container(
            height: 250,
            width: 250,
            decoration: BoxDecoration(
              color: Colors.blue.shade900,
              borderRadius: BorderRadius.circular(32)
            ),
          ),
          fromX: -200,
          toX: 200,
          fromY: -200,
          toY: 200,
          loop: true,
        ),
      ),
    );
  }
}

使用控制器控制动画 (PhloxAnimationsController)

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

  @override
  State<Example4> createState() => _Example4State();
}

class _Example4State extends State<Example4> {
  PhloxAnimationsController controller = PhloxAnimationsController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (controller.animationStatus == AnimationStatus.dismissed ||
              controller.animationStatus == AnimationStatus.reverse) {
            controller.forward();
          } else if (controller.animationStatus == AnimationStatus.completed ||
              controller.animationStatus == AnimationStatus.forward) {
            controller.reverse();
          }
        },
      ),
      body: Center(
        child: PhloxAnimations(
          auto: false,
          controller: controller,
          duration: const Duration(seconds: 2),
          child: Container(
            height: 250,
            width: 250,
            decoration: BoxDecoration(
              color: Colors.blue.shade900,
              borderRadius: BorderRadius.circular(32)
            ),
          ),
          fromX: -100,
          toX: 100,
          toY: 200,
          fromY: -200,
          toDegrees: 90,
        ),
      ),
    );
  }
}

自定义动画 (Custom Animations)

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

  @override
  State<Example5> createState() => _Example5State();
}

class _Example5State extends State<Example5> {
  PhloxAnimationsController controller = PhloxAnimationsController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PhloxAnimations.custom(
          auto: false,
          controller: controller,
          duration: const Duration(seconds: 2),
          fromColor: Colors.redAccent,
          toColor: Colors.lightBlueAccent,
          builder: (animations) {
            return Transform.translate(
              offset: Offset(animations.moveX!, animations.moveY!),
              child: Transform.rotate(
                angle: controller.degreeToRadian(animations.rotate!),
                child: Transform.scale(
                  scale: animations.scale,
                  child: MaterialButton(
                    onPressed: () {
                      if (controller.animationStatus == AnimationStatus.dismissed ||
                          controller.animationStatus == AnimationStatus.reverse) {
                        controller.forward();
                      } else if (controller.animationStatus == AnimationStatus.completed ||
                          controller.animationStatus == AnimationStatus.forward) {
                        controller.reverse();
                      }
                    },
                    color: animations.color,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(animations.radius!)
                    ),
                    child: const Text("Animate me"),
                  ),
                ),
              ),
            );
          },
          fromX: -100,
          toX: 100,
          toY: 100,
          fromY: -100,
          toScale: 3,
          fromRadius: 8,
          toRadius: 24,
        ),
      ),
    );
  }
}

曲线动画 (Curves)

可以通过设置曲线来改变动画的效果，例如：

class ExampleCurves extends StatelessWidget {
  const ExampleCurves({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(32),
        child: Row(
          children: [
            PhloxAnimations(
              toX: 400,
              moveXCurve: Curves.easeInQuart, // curve
              toDegrees: 700,
              duration: const Duration(seconds: 3),
              child: Image.network(
                "https://pngimg.com/uploads/football/football_PNG28467.png",
                width: 100,
                height: 100,
              ),
            )
          ],
        ),
      ),
    );
  }
}

以上是关于 phlox_animations 插件的基本使用方法和示例代码，更多详细信息可以参考 Phlox Animations GitHub 和 官方文档。