Flutter路径动画插件path_animation的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter路径动画插件path_animation的使用

标题

Flutter路径动画插件path_animation的使用

内容

A Flutter package, path animation - that is used to moving the widget on given path.

Screenshot

获取开始

Getting started #

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  path_animation: ^1.1.0

使用

Usage #

```dart import 'package:path_animation/widget/path_animation.dart';

PathAnimation( path: Path()…addOval(const Rect.fromLTWH(0, 0, 100, 100)), // Set the path. duration: const Duration(milliseconds: 2000), repeat: true, reverse: false, curve: Curves.decelerate, startAnimatedPercent: 0.25, drawPath: true, pathColor: Colors.red, pathWidth: 11, child: const Icon( // The Widget you want to animated to cross the path. Icons.flutter_dash, size: 30, ), ),


更多关于Flutter路径动画插件path_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter路径动画插件path_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何使用Flutter中的path_animation插件的示例代码。这个插件允许你沿着预定义的路径进行动画处理。以下是一个简单的示例,展示如何创建一个圆形路径动画。

首先,确保你已经在pubspec.yaml文件中添加了path_providerfluttertoast依赖(如果你需要显示一些提示信息)。不过,核心依赖是path_animation

dependencies:
  flutter:
    sdk: flutter
  path_provider: ^2.0.8
  fluttertoast: ^8.0.8
  path_animation: ^0.2.0  # 请确保使用最新版本

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

接下来是示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Path Animation Example'),
        ),
        body: Center(
          child: PathAnimationExample(),
        ),
      ),
    );
  }
}

class PathAnimationExample extends StatefulWidget {
  @override
  _PathAnimationExampleState createState() => _PathAnimationExampleState();
}

class _PathAnimationExampleState extends State<PathAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late PathAnimation _pathAnimation;
  late OffsetTween _tween;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    // 定义一个圆形路径
    final Path path = Path()
      ..addOval(Rect.fromLTWH(0, 0, 300, 300));

    // 创建 PathMetric 和 Tangent
    final PathMetric metric = path.computeMetrics().first;
    final Tangent? startTangent = metric.getTangentForOffset(0.0)!;
    final Tangent? endTangent = metric.getTangentForOffset(metric.length)!;

    // 创建 PathAnimation 和 OffsetTween
    _pathAnimation = PathAnimation(
      pathMetric: metric,
      orientation: PathOrientation.clockwise,
      duration: _controller.duration,
    );

    _tween = OffsetTween(
      begin: Offset.fromDirection(startTangent!.direction) * 150, // 起始点
      end: Offset.fromDirection(endTangent.direction) * 150, // 结束点
    )
      .animate(
        CurvedAnimation(
          parent: _controller,
          curve: Curves.easeInOut,
        ),
      )
      .chain(PathTween(path: path));

    // 监听动画值变化
    _tween.addListener(() {
      setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _tween,
      child: Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey.shade300, width: 2),
          shape: BoxShape.circle,
        ),
        child: Center(
          child: CustomPaint(
            size: Size(300, 300),
            painter: DotPainter(_tween.value),
          ),
        ),
      ),
      builder: (context, child) {
        return Transform.translate(
          offset: _tween.value,
          child: child,
        );
      },
    );
  }
}

class DotPainter extends CustomPainter {
  final Offset position;

  DotPainter(this.position);

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

    canvas.drawCircle(position, 10, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

在这个示例中,我们创建了一个沿圆形路径移动的动画点。主要步骤包括:

  1. 创建一个AnimationController来控制动画的持续时间和循环。
  2. 定义一个圆形路径。
  3. 使用PathMetricTangent来确定路径的起始和结束切线。
  4. 使用PathAnimationOffsetTween来创建动画。
  5. 使用AnimatedBuilderTransform.translate来更新动画位置。
  6. 使用CustomPaintCustomPainter来绘制移动的点。

这个示例展示了如何使用path_animation插件来创建一个简单的路径动画。你可以根据需要调整路径和动画属性来实现更复杂的动画效果。

回到顶部