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

spring 封面
套件詳情v2.0.2

spring

一個簡單且強大的預建動畫套件,可加速應用開發並簡化開發流程。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
848
喜歡數
254
Pub 分數
130

安裝套件

flutter pub add spring

套件介紹

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

Spring 是一個輕量級的預建動畫套件,專為 Flutter 所設計,可簡化並加速應用開發,提供即用型動畫。它兼具簡潔與強大,讓開發者能以最少的程式碼實現流暢、響應迅速的過渡效果。該套件支援 Android、iOS、Web、macOS、Windows 及 Linux 等多個平台,適用於跨平台專案。透過直覺的 API,Spring 能提升使用者介面的互動性與視覺吸引力,無需深入的動畫專業知識。

適用情境

  • 快速UI原型設計
  • 互動式按鈕效果
  • 平滑的螢幕轉場
  • 載入狀態動畫
  • 引導畫面

主要特色

  • 預建構的動畫預設
  • 跨平台相容性
  • 最小設定
  • 高度可自訂
  • 內建緩動曲線
  • 輕量級效能

適合對象

  • 初學者 Flutter 開發者
  • 快速應用開發
  • 以UI為主的應用程式
  • 注重設計的專案
  • 重視速度的團隊

使用建議

  • 超出預設之外的自訂功能有限
  • 可能會稍微增加套件大小
  • 最適合簡單到中等的動畫
  • 不適合複雜的自定義動畫邏輯
  • 需要了解基本的動畫原理

原始 README

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

Spring Logo

A simple & powerfull pre-built animation kit.

🔨 Installation

dependencies:
     spring: ^2.0.2

simple_fade

🎥 Spring Animations

⚙ Import
import 'package:spring/spring.dart';

🕹️ Usage

Spring.slide(
     slideType: SlideType.slide_in_right,
     child: FlutterLogo(),
),

🕹️ Advanced Usage

import 'package:flutter/material.dart';
import 'package:spring/spring.dart';
import 'package:test123/blue_card.dart';
import 'package:test123/red_card.dart';

class SpringExample extends StatelessWidget {
  final SpringController springController =
      SpringController(initialAnim: Motion.play);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Spring.slide(
          springController: springController,
          slideType: SlideType.slide_in_right,
          delay: Duration(milliseconds: 500),
          animDuration: Duration(milliseconds: 1000),
          curve: Curves.easeInExpo,
          extend: 30,
          withFade: true,
          animStatus: (AnimStatus status) {
            print(status);
          },
          child: GestureDetector(
              onTap: () {
                springController.play(motion: Motion.reverse);
              },
              child: FlutterLogo()),
        ),
      ),
    );
  }
}

🎮 SpringController

SpringController allow you to control the animations without setting the setState.

//initial anim = Motion.play
final SpringController springController =
     SpringController(); 
// you can set the initial anim using initialAnim param..
final SpringController springController =
      SpringController(initialAnim: Motion.pause,);
Controlling the animations
GestureDetector(
          onTap: () {
            springController.play(
                motion: Motion.reverse,
                animDuration: Duration(milliseconds: 300),
                curve: Curves.bounceIn,
                delay: Duration(milliseconds: 900));
          },
          child: Spring.slide(
              springController: springController,
              slideType: SlideType.slide_in_right,
              delay: Duration(milliseconds: 500),
              animDuration: Duration(milliseconds: 1000),
              curve: Curves.easeInExpo,
              extend: 30,
              withFade: true,
              animStatus: (AnimStatus status) {
                print(status);
              },
              child: FlutterLogo()),
        ),

🔈 Animation Status

You can listen for animation Staus via animStatus callBack which returns AnimStatus enum.

  • AnimStatus.forward
  • AnimStatus.completed
  • AnimStatus.reverse
  • AnimStatus.dismissed
Spring.rotate(
     springController: springController,
     animStatus: (AnimStatus status) {
          print(status);
     },
     child: FlutterLogo()),

🐞 Bugs/Requests

If you encounter any problems please open an issue. If you feel the library is missing a feature, please raise a ticket on Github and we'll look into it. Pull request are welcome.

🙏 Thanks

📃 License

MIT License

所屬分類

依賴

依賴清單 4 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。