搜尋套件、儲存庫與 APP 分類

parallax_effect 封面
套件詳情v0.0.3

parallax_effect

適用於所有平台的視差效果動畫。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
17
喜歡數
43
Pub 分數
130

安裝套件

flutter pub add parallax_effect

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個 Flutter 套件,可在所有平台實現流暢的視差效果動畫,包括 Android、iOS、Web、macOS、Windows 和 Linux。它允許開發者透過以不同速度動畫化圖層來創造沉浸式背景視覺效果,增強使用者參與度並提供動態深度感知。適用於啟動畫面、引導流程和視覺豐富的介面,此套件支援自訂速度、方向與回應性。專為效能設計,使用簡單直觀的 API 可輕鬆整合至現有的 Flutter 專案中。

適用情境

  • 引導畫面
  • 啟動畫面
  • 背景動畫
  • 互動式 UI 元素
  • 視覺敘事

主要特色

  • 跨平台支援
  • 可自訂的動畫速度
  • 響應式圖層移動
  • 簡單的 API 結合
  • 流暢的效能

適合對象

  • 尋求視覺深度的設計人員
  • 開發吸引人的使用者介面的開發者
  • 沉浸式引導體驗的應用程式
  • 創意數位體驗
  • 需要層疊背景的專案

使用建議

  • 可能影響低階裝置的效能
  • 需要仔細調整以獲得最佳使用者體驗
  • 除了基本的視差效果外,自訂選項有限
  • 不適用於複雜的互動場景
  • 最適合與輕量級內容一起使用

原始 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
            )
        )),
    );

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。