animated_path

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

AnimatedPath 是一个专为 Flutter 设计的包，用于创建流畅的裁剪路径动画，使开发者能够逐步动画化路径的绘制。它非常适合用于线条绘制、加载指示器或自定义形状揭示等视觉效果。该包支持所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux。通过单个命令即可轻松集成，仅用少量代码即可为 UI 增添动态且引人入胜的动画。它利用 Flutter 的渲染引擎实现高性能和流畅的运动。

适合场景

创建动画线条图
设计加载指示器
构建交互式形状揭示
增强UI过渡效果
可视化数据流
动画自定义SVG路径

主要特点

平滑裁剪路径动画
跨平台支持
简单的 API 集成
高性能渲染
支持复杂的路径几何形状
可自定义的动画持续时间和曲线

适合对象

寻求动态视觉效果的UI/UX设计师
开发交互式仪表板的开发者
需要动画插图的应用
带有逐步图解的教育类应用
带有动画路径元素的游戏

使用建议

仅限基于路径的动画
需要理解 Path 类
可能会影响非常复杂路径的性能
不适用于非路径视觉效果
动画控制需要仔细的定时设置

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Animated Path

A Flutter package that is used to create trim path animation on given path.

Features

start point tween
end point tween
offset tween
Support non-continuous path

Showcase

Usage

AnimatedPath widget is used to animated path for given animation.

AnimatedPath(
    animation: animationController.view,
    path: Path()
    ..moveTo(100, 100)
    ..relativeLineTo(400, 0)
    ..relativeLineTo(0, 400)
    ..relativeLineTo(-400, 0)
    ..relativeLineTo(0, -400),
    paint: paint,
    start: Tween(begin: 0.0, end: 0.7),
    end: Tween(begin: 0.0, end: 1.0),
    offset: Tween(begin: 0.0, end: 0.3),
)

Provide initial and final value of start, end or offset for the path.

For e.g.

Tween(begin: 0.0, end: 1.0)

This will put the start of the path at (0.0 * pathLength) (initially) and at (1.0 * pathLength) when animation finishes path for values between 0 and 1 (inclusive) will be visible only However, one can provide values < 0 or > 1 for different animation sync effects.

Similarly, for end and offset.

Values for end is calculated based on tween provided should always be greater than start at any point of time, or path will not be visible.
offset value for given animation is added in both start and end valued for path.
For a constant value use ConstantTween.
Works for continuous and non-continuous path both.

Contributing

1. Fork it (<https://github.com/himanshugarg08/animated_path/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes (`git commit -am 'Add some fooBar'`)
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request

搜索插件、代码仓与 APP 分类

安装插件