Flutter界面动画插件ui_ball的使用

Flutter界面动画插件ui_ball的使用

欢迎来到ui_ball插件！该插件提供了多种免费且开源的加载器和旋转器，以增强您的Flutter项目。您可以根据需要选择合适的动画。

安装

要将ui_ball添加到您的项目中，请在pubspec.yaml文件中包含它：

dependencies:
  ui_ball: ^0.0.2

运行flutter pub get来安装该插件。

使用

在您的Dart文件中导入该包：

import 'package:ui_ball/ui_ball.dart';

示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用ui_ball插件的不同加载器和旋转器。

import 'package:flutter/material.dart';
import 'package:ui_ball/ui_ball.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: UiBall(),
    );
  }
}

class UiBall extends StatefulWidget {
  const UiBall({super.key});

  @override
  State<UiBall> createState() => _UiBallState();
}

class _UiBallState extends State<UiBall> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('UI BALL'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: [
            loader(
              const WobbleBar(
                width: 300.0,
                height: 10.0,
                movingBarColor: Colors.red,
                backgroundColor: Colors.blueGrey,
                duration: Duration(milliseconds: 1500),
                stroke: 10.0,
                movingBarWidth: 70.0,
              ),
              'WobbleBar '
            ),
            loader(
              const PulseLoader(
                color: Colors.red,
                size: 50.0,
                duration: Duration(seconds: 2),
              ),
              'PulseLoader '
            ),
            loader(
              const BouncingDot(
                dotColor: Colors.black,
                dotSize: 30.0,
                duration: Duration(seconds: 2),
              ),
              'BouncingDot '
            ),
            loader(
              const RotatingSquare(
                squareColor: Colors.red,
                squareSize: 50.0,
                duration: Duration(seconds: 2),
              ),
              'RotatingSquare '
            ),
            loader(
              const FadingDots(
                dotColor: Colors.red,
                dotSize: 30.0,
                duration: Duration(milliseconds: 1500),
              ),
              'FadingDots '
            ),
            loader(
              const FlipClock(
                color: Colors.red,
                size: 80.0,
                duration: Duration(seconds: 2),
              ),
              'FlipClock'
            ),
            loader(
              const RainbowSpinner(
                size: 100.0,
                duration: Duration(seconds: 2)
              ),
              'RainbowSpinner'
            ),
            loader(
              const OscillatingBars(
                color: Colors.red,
                barWidth: 20.0,
                duration: const Duration(seconds: 2),
              ),
              'OscillatingBars '
            ),
            loader(
              const SpinningTriangle(
                color: Colors.red,
                size: 100.0,
                duration: Duration(milliseconds: 1000),
              ),
              'SpinningTriangle '
            ),
            loader(
              const Ring1(
                color: Colors.blue,
                size: 50.0,
                duration: Duration(seconds: 2),
              ),
              'Ring1 '
            ),
            loader(
              const Spiral(
                color: Colors.red,
                size: 100.0,
                duration: const Duration(seconds: 2),
              ),
              'Spiral '
            ),
            loader(
              const FlowerBloom(
                color: Colors.pink,
                size: 100.0,
                duration: const Duration(seconds: 3),
              ),
              'FlowerBloom '
            )
          ],
        ),
      ),
    );
  }

  Widget loader(Widget child, String title) {
    return Expanded(
      child: Column(
        children: [
          const SizedBox(
            height: 8,
          ),
          child,
          const SizedBox(
            height: 12,
          ),
          Text(title),
          const SizedBox(
            height: 12,
          )
        ],
      ),
    );
  }
}

加载器和旋转器

以下是ui_ball插件中可用的一些加载器和旋转器示例：

WobbleBar

一个可以自定义颜色和大小的摆动条。

WobbleBar(
  width: 300.0,
  height: 10.0,
  movingBarColor: Colors.red,
  backgroundColor: Colors.blueGrey,
  duration: const Duration(milliseconds: 1500),
  stroke: 10.0,
  movingBarWidth: 70.0,
)

PulseLoader

一个可以自定义颜色和大小的脉冲加载器。

PulseLoader(
  color: Colors.red,
  size: 100.0,
  duration: Duration(seconds: 2),
)

BouncingDot

一个可以自定义颜色和大小的弹跳点。

BouncingDot(
  dotColor: Colors.black,
  dotSize: 30.0,
  duration: Duration(seconds: 2),
)

RotatingSquare

一个可以自定义颜色和大小的旋转方块。

RotatingSquare(
  squareColor: Colors.red,
  squareSize: 50.0,
  duration: Duration(seconds: 2),
)

FadingDots

一个可以自定义颜色和大小的淡出点。

FadingDots(
  dotColor: Colors.red,
  dotSize: 30.0,
  duration: const Duration(milliseconds: 1500),
)

ExpandingCircle

一个可以自定义颜色和大小的扩展圆。

ExpandingCircle(
  color: Colors.red,
  size: 50.0,
  duration: Duration(seconds: 2),
)

FlipClock

一个可以自定义颜色和大小的翻转时钟动画。

FlipClock(
  color: Colors.red,
  size: 80.0,
  duration: Duration(seconds: 2),
)

RainbowSpinner

一个具有彩虹效果的旋转器。

RainbowSpinner(
  size: 100.0,
  duration: Duration(seconds: 2)
);

OscillatingBars

一组可以自定义颜色和宽度的振荡条。

OscillatingBars(
  color: Colors.red,
  barWidth: 20.0,
  duration: const Duration(seconds: 2),
)

SpinningTriangle

一个可以自定义颜色和大小的旋转三角形。

SpinningTriangle(
  color: Colors.red,
  size: 100.0,
  duration: Duration(milliseconds: 1000),
)

Ring1

一个可以自定义颜色和大小的环形动画。

Ring1(
  color: Colors.blue,
  size: 50.0,
  duration: Duration(seconds: 2),
)

Spiral

一个可以自定义颜色和大小的螺旋动画。

Spiral(
  color: Colors.red,
  size: 100.0,
  duration: const Duration(seconds: 2),
)

FlowerBloom

一个可以自定义颜色和大小的花朵绽放动画。

FlowerBloom(
  color: Colors.pink,
  size: 100.0,
  duration: const Duration(seconds: 3),
)

更多关于Flutter界面动画插件ui_ball的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter界面动画插件ui_ball的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用ui_ball插件来实现界面动画的示例代码。ui_ball插件通常用于创建和管理具有动画效果的球形UI元素。假设你已经将ui_ball添加到你的pubspec.yaml文件中，并运行了flutter pub get。

首先，确保你的pubspec.yaml包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  ui_ball: ^latest_version  # 请替换为实际的最新版本号

然后，在你的Flutter项目中，你可以使用以下代码来创建和动画化一个球形UI元素：

import 'package:flutter/material.dart';
import 'package:ui_ball/ui_ball.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('UI Ball Animation Example'),
        ),
        body: BallAnimationExample(),
      ),
    );
  }
}

class BallAnimationExample extends StatefulWidget {
  @override
  _BallAnimationExampleState createState() => _BallAnimationExampleState();
}

class _BallAnimationExampleState extends State<BallAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0, end: 300).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: BallWidget(
        animation: _animation,
        size: 50.0,
        color: Colors.blue,
        child: Icon(
          Icons.star,
          color: Colors.white,
          size: 30.0,
        ),
      ),
    );
  }
}

class BallWidget extends StatelessWidget {
  final Animation<double> animation;
  final double size;
  final Color color;
  final Widget child;

  BallWidget({
    required this.animation,
    required this.size,
    required this.color,
    required this.child,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      child: child,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(animation.value, 0),
          child: Container(
            width: size,
            height: size,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: color,
            ),
            child: Center(child: child),
          ),
        );
      },
    );
  }
}

代码解释

  1. 依赖添加：确保在pubspec.yaml文件中添加了ui_ball依赖（注意：实际使用中，ui_ball可能并不是一个真实存在的库，这里仅作为示例，你需要替换为实际可用的动画库或自定义动画逻辑）。

  2. 动画控制：

    • 使用AnimationController来控制动画的时长和重复行为。
    • 使用Tween来定义动画的起始和结束值（在这个例子中，我们模拟了一个水平位移）。

  3. 自定义BallWidget：

    • 创建一个BallWidget，它接受动画、大小、颜色和子组件作为参数。
    • 使用AnimatedBuilder来构建动画，它会在动画值变化时重新构建组件。
    • 使用Transform.translate来根据动画值移动球的位置。

  4. 在Scaffold中使用BallWidget：

    • 在Scaffold的body中放置BallAnimationExample组件。
    • BallAnimationExample组件管理动画状态并构建BallWidget。

注意

  • 示例中的BallWidget是一个自定义的组件，用于演示如何将动画应用于一个球形UI元素。
  • 如果ui_ball是一个真实存在的库，请查阅其官方文档以获取更详细的使用方法和特性。
  • 如果没有现成的ui_ball库，你可以使用Flutter的动画系统（如AnimatedBuilder、Tween和AnimationController）来创建自己的动画效果。
回到顶部