Flutter动画路径构建插件animated_path_builder的使用

动画路径

AnimatedPath 是一个用于创建路径动画的小部件。

展示

特性

• 支持路径列表
• 可以通过 header 自定义效果
• 可以通过 fps 提高性能

开始使用

首先，你需要在项目中导入 animated_path_builder 包：

import 'package:animated_path_builder/animated_path.dart';

使用方法

创建路径

首先，你需要创建一个路径列表。然后创建一个 AnimationController 来控制动画。

这是一个极简示例：

// 创建一个路径
List<Path> createPath(Size size) {
  // 这里实现具体的路径逻辑
  // 返回一个路径列表
}

// 创建一个 AnimationController
final animation = AnimationController(
  vsync: this,
  duration: Duration(seconds: 2),
);

// 使用 AnimatedPath 小部件
AnimatedPath(
  paths: (size) => createPath(size),
  animation: animation,
  color: Colors.black,
)

添加头部效果

你可以添加一个头部效果来增强动画效果：

AnimatedPath(
  paths: (size) => createPath(size),
  header: HeaderEffect(),
  animation: animation,
  color: Colors.black,
)

控制性能

如果由于复杂的路径导致性能问题，你可以通过设置 fps 来控制帧率：

AnimatedPath(
  paths: (size) => createPath(size),
  animation: animation,
  color: Colors.black,
  fps: 60,
)

完整示例

以下是一个完整的示例代码，展示了如何使用 AnimatedPath 构建一个简单的动画路径应用。

import 'package:example/draw_board_page.dart';
import 'package:example/lissajous_page.dart';
import 'package:example/mahou_page.dart';
import 'package:flutter/material.dart';

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

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

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

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            listTile(title: 'Draw Board', target: const DrawBoardPage()),
            listTile(title: 'Lissajous', target: const LissajousPage()),
            listTile(title: 'Effect', target: const MaHouPage())
          ],
        ),
      ),
    );
  }

  Widget listTile({
    required String title,
    required Widget target,
  }) {
    return ListTile(
      title: Text(title),
      trailing: const Icon(Icons.chevron_right),
      onTap: () {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (_) => target,
          ),
        );
      },
    );
  }
}