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

套件詳情v1.2.0

cool_background_animation

一個用於令人驚艷且可自訂背景動畫的Flutter套件。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
68
喜歡數
40
Pub 分數
150

安裝套件

flutter pub add cool_background_animation

套件介紹

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

一個 Flutter 套件,讓開發者能夠為其應用程式加入視覺震撼且高度可自訂的背景動畫。支援漸層、著色器與動態效果,透過流暢、吸引人的視覺效果提升使用者介面。此套件設計用於輕鬆整合,並提供多種預設動畫類型,同時允許透過設定選項進行完全自訂。適合追求精緻、動畫背景的現代應用設計。

適用情境

  • 增強應用啟動畫面
  • 建立沉浸式登入頁面
  • 為儀表板增添視覺魅力
  • 透過動態背景提升使用者參與度
  • 設計主題化的行動或Web應用

主要特色

  • 可自定義的動畫樣式
  • 對漸變和著色器的支援
  • 跨平台相容性
  • 透過簡單組件實現輕鬆整合
  • 可設定的速度與強度
  • 響應式設計支援

適合對象

  • 尋求視覺衝擊力的UI/UX設計師
  • 開發現代 Flutter 應用的開發者
  • 需要動畫背景的專案
  • 創意數位體驗
  • 針對年輕或重視設計的受眾應用

使用建議

  • 可能影響低階裝置的效能
  • 需要仔細優化以降低電池耗損
  • 某些區域的文件內容有限
  • 動畫複雜度可能會增加建構時間
  • 不適合極簡或以內容為導向的版面

原始 README

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

🌈 Cool Background Animation 🌌

Cool Background Animation Demo

Cool Background Animation is a Flutter package designed to add stunning, customizable animated background effects to your apps. Perfect for enhancing visual appeal with minimal effort, this package ensures your projects stand out with eye-catching animations.


✨ Features

  • 🚀 Easy Integration: Quickly integrate into any Flutter project.
  • 🎨 Customizable: Adjust animation properties like speed, colors, and patterns.
  • ⚡ Optimized Performance: Lightweight and highly efficient for smooth animations.

🛠️ Getting Started

Add the package to your project by including it in your pubspec.yaml file:

dependencies:
  cool_background_animation: 1.1.0

Run the following command to fetch the package:

flutter pub get

📚 Example Usage

Here's how you can use Cool Background Animation in your Flutter app:

import 'package:cool_background_animation/cool_background_animation.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StarFallingBackground(
        speed: 2.0,
        colors: [Colors.blue, Colors.purple],
        patterns: Patterns.starfall,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RainbowBackground(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MatrixRainAnimation(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CelebrationAnimation(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BubbleBackground(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MultipleBalloons(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:  AnimatedBackgroundSymbols(
        symbolColor: Colors.green,
        symbolSize: 34.0,
        customSymbols: '!@#\$%^&*()_+',
        spawnInterval: Duration(milliseconds: 200),
    initialSymbolCount: 20,
    fontFamily: 'YourFontFamily',

    ));
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:
        InfiniteSpiralMotionAnimation(
          size: 300,
          colors: [Colors.blue, Colors.purple, Colors.pink],
          colorBlendMode: ColorBlendMode.rainbow,
          enableParticles: true,
          enable3DEffect: true,
          enableShimmer: true,
          enableGradientBorder: true,
          enablePulsingBorder: true,
          enableShadow: true,
          rotationX: 0.2,
          rotationY: 0.1,
          direction: AnimationDirection.all,
        ));
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:
        StarryBackground(
          numberOfStars: 200,
          starConfig: StarConfig(
            minSize: 1.0,
            maxSize: 4.0,
            starColor: Colors.amber,
            movementSpeed: 2.0,
            enableTwinkling: true,
          ),
          backgroundGradient: LinearGradient(
            colors: [Colors.red, Colors.blue.shade900],
          ),
          enableShootingStars: true,
          shootingStarInterval: Duration(seconds: 3),
        ));
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GradientMeshBackground(
        config: GradientMeshConfig(
          colors: [
            Color(0xFF667EEA),
            Color(0xFF764BA2),
            Color(0xFFF093FB),
            Color(0xFF4FACFE),
          ],
          animationSpeed: 1.0,
          enableBlur: true,
          enablePulsing: true,
        ),
        child: Center(
          child: Text(
            'Beautiful Gradient Mesh',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

🧩 Feedback and Contributions

We'd love to hear your thoughts! If you encounter any issues, have feature requests, or would like to contribute, please visit our GitHub Repository.


📄 License

This package is distributed under the MIT License. See the LICENSE file for details.

Happy Animating! 🚀✨

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。