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

parallax_effect のカバー
パッケージ詳細v0.0.3

parallax_effect

すべてのプラットフォーム向けのパララックス効果アニメーション。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
17
いいね数
43
Pub ポイント
130

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

flutter pub add parallax_effect

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Android、iOS、Web、macOS、Windows、Linuxを含むすべてのプラットフォームで滑らかなパララックス効果アニメーションを可能にするFlutterパッケージです。異なる速度でレイヤーをアニメーション化することで、没入型の背景ビジュアルを作成でき、ユーザー参加度を高める動的な奥行き感覚を実現します。スプラッシュ画面、オンボーディングフロー、視覚的に豊かなインターフェースに最適で、カスタマイズ可能なスピード、方向、応答性をサポートしています。パフォーマンスを意識して構築されており、シンプルで直感的なAPIを使用して既存のFlutterプロジェクトにスムーズに統合できます。

用途

  • オンボーディング画面
  • スプラッシュスクリーン
  • 背景アニメーション
  • インタラクティブなUI要素
  • ビジュアルストーリーテリング

主な機能

  • クロスプラットフォーム対応
  • カスタマイズ可能なアニメーション速度
  • 応答性レイヤーの移動
  • シンプルな API インテグレーション
  • スムーズなパフォーマンス

適している対象

  • 視覚的な奥行きを求めるデザイナー
  • 魅力的なUIを構築する開発者
  • 没入型オンボーディングを持つアプリ
  • クリエイティブなデジタル体験
  • レイヤード背景を必要とするプロジェクト

注意事項

  • 低性能デバイスでのパフォーマンスに影響を与える可能性があります
  • 最適なUXを得るためには慎重な調整が必要です
  • 基本的なパララックス以外のカスタマイズは限られている
  • 複雑なインタラクティブシーンには適していません
  • 軽量なコンテンツと併用するのが最適です

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

A Parallax effect package, Package is useful for animations for items in foreground, or background scrolling effect.

Features

  • Parallax movement with different stackable layers.
  • Supports 3 dimensional rotation.

image not available

Getting started

  1. Use Parallax widget for Configurations:
    • height: widget parent height
    • width: widget parent width
    • enableDrag: enables on click/tap movement
    • item: children of type ParallaxItem
  2. Use ParallaxItem widget for Configurations:
    • factor: ParallaxFactor(x,y)
    • alignment: initial alignment of child
    • rotationFactor: ParallaxFactor(x,y) for rotation
    • child: child

Usage

TODO: Include short and useful examples for package users. Add longer examples to /example folder.

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

  @override
  State<ParallaxExample> createState() => _ParallaxState();
}

class _ParallaxState extends State<ParallaxExample>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Parallax(
        height: 400,
        width: 400,
        enableDrag: true,
        items: List.generate(5,(index)=>
        ParallaxItem(
            factor:ParallaxFactor(0.05*index,0.05*index),
            rotationFactor: ParallaxFactor(0,0.05*index),
            child: Container(
                height:50,
                width:50,
                color: Colors.green
            )
        )),
    );

カテゴリー

ソースリポジトリ

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

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