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

套件詳情v1.1.0

ripple_backdrop_animate_route

具有路由背景的波紋動畫。這將創建一個透明頁面,並帶有波紋背景動畫來動畫化組件。您可以放置任何組件並自定義效果。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
40
喜歡數
41
Pub 分數
140

安裝套件

flutter pub add ripple_backdrop_animate_route

套件介紹

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

RippleBackdropAnimateRoute 是一個 Flutter 套件,可在導航不同路由時提供視覺上吸引人的漣漪動畫與背景效果。它會建立一個透明覆蓋層並帶有動態漣漪動畫,讓開發者能自訂路由轉換的視覺影響。此套件支援路由內的任何組件,並在樣式與行為上提供彈性。適合現代、互動式介面,透過跨多個平台的順暢動畫導航效果提升使用者體驗。

適用情境

  • 互動式應用導航
  • 自訂路由過渡
  • 增強的使用者引導
  • 點擊的視覺反饋
  • 現代使用者介面設計
  • 動畫啟動畫面

主要特色

  • 帶有背景的波紋動畫
  • 可自定義的組件位置
  • 透明路由覆蓋
  • 跨平台支援
  • 與現有路由的輕鬆整合
  • 可設定的動畫參數

適合對象

  • 尋求動畫路由轉換的開發者
  • 注重設計的 Flutter 應用
  • 具互動式導航的應用程式
  • UI/UX 增強專案
  • Flutter 初學者探索動畫

使用建議

  • 可能影響低階裝置的效能
  • 需要仔細自訂以獲得最佳使用者體驗
  • 除了基本用法之外,文件內容有限
  • 不適合簡單的靜態導航流程
  • 如果過度使用,動畫可能會分散使用者的注意力

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

ripple_backdrop_animate_route

pub package GitHub stars GitHub forks GitHub license GitHub issues FlutterCandies

A ripple animation with backdrop of route.

Screenshot:

Getting Started

Example Usage
import 'package:ripple_backdrop_animate_route/ripple_backdrop_animate_route.dart';

///...

RippleBackdropAnimatePage.show(
  context: context,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      Text('This is ripple backdrop animate page.'),
    ],
  ),
  childFade: true,
  duration: 300,
  blurRadius: 20,
  bottomButton: Icon(Icons.visibility),
  bottomHeight: 60,
  bottomButtonRotate: false,
);
Parameters
Name Description Default
child Child for page. -
childFade When enabled, [child] will fade in when animation is going and fade out when popping. false
duration Animation's duration, including [Navigator.push], [Navigator.pop]. 300
blurRadius Blur radius for [BackdropFilter]. 20.0
bottomButton [Widget] for bottom of the page. -
bottomHeight The height which [bottomButton] will occupy. kBottomNavigationBarHeight
bottomButtonRotate When enabled, [bottomButton] will rotate when to animation is going. true
bottomButtonRotateDegree The degree which [bottomButton] will rotate. 45.0

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。