パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v0.0.2

animated_path

トリムパスアニメーションを作成するために使用されるFlutterパッケージです。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
342
いいね数
108
Pub ポイント
160

パッケージをインストール

flutter pub add 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

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。