Flutter vitality插件的使用_vitality轻松地为您的应用程序背景添加生动的动画 的探索使用

简介

欢迎来到Vitality，这是一个动态的Flutter包，旨在轻松地为您的应用程序背景添加生动的动画。只需10行代码，您就可以通过添加随机移动的图标、圆形、矩形、图像等来为您的UI注入活力。让我们一起探索如何轻松提升应用程序的视觉吸引力。

示例展示

以下是一些示例，展示了Vitality库的多功能性：

使用方法

Vitality包的设计非常简单，集成也非常容易。请查看下面的示例，快速掌握其用法：

Vitality.randomly(
  background: Colors.black,
  maxOpacity: 0.8,
  minOpacity: 0.3,
  itemsCount: 80,
  enableXMovements: false,
  whenOutOfScreenMode: WhenOutOfScreenMode.Teleport,
  maxSpeed: 1.5,
  maxSize: 30,
  minSpeed: 0.5,
  randomItemsColors: [Colors.yellowAccent, Colors.white],
  randomItemsBehaviours: [
    ItemBehaviour(shape: ShapeType.Icon, icon: Icons.star),
    ItemBehaviour(shape: ShapeType.Icon, icon: Icons.star_border),
    ItemBehaviour(shape: ShapeType.StrokeCircle),
  ],
)

参数说明

• whenOutOfScreenMode：确定形状在屏幕边缘的行为，值包括：

  • none：不做任何操作，继续移出屏幕。
  • Reflect：反弹并返回相反方向。
  • Teleport：继续移动到屏幕的另一侧。

• randomItemsBehaviours：定义库可以生成的形状。从ShapeType枚举中选择（FilledCircle、StrokeCicle、FilledSquare、Icon、Image等）：

  • 对于Icon类型，传递一个IconData对象：

    ItemBehaviour(shape: ShapeType.Icon, icon: Icons.star)
    

  • 对于Image类型，传递一个dart:ui Image对象：

    ItemBehaviour(shape: ShapeType.Image, image: /*ui.Image() here*/)
    

加载图像示例

将路径转换为dart:ui Image对象：

import 'dart:ui' as ui;
import 'package:flutter/services.dart';

Future<ui.Image> loadImage(String assetPath) async {
  ByteData data = await rootBundle.load(assetPath);
  List<int> bytes = data.buffer.asUint8List();
  ui.Codec codec = await ui.instantiateImageCodec(Uint8List.fromList(bytes));
  ui.FrameInfo fi = await codec.getNextFrame();
  return fi.image;
}

将此函数集成到您的代码中：

FutureBuilder<ui.Image>(
  future: loadImage('assets/images/your_image.png'),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return Vitality.randomly(
        whenOutOfScreenMode: WhenOutOfScreenMode.Reflect,
        randomItemsColors: const [Colors.yellow],
        randomItemsBehaviours: [
          ItemBehaviour(
            shape: ShapeType.Image,
            image: snapshot.data!,
          )
        ],
      );
    }
    return const CircularProgressIndicator();
  },
),

完全自定义

如果您希望对动画进行更多自定义，Vitality提供了自定义模式，使用起来非常简单。在此模式下，您可以使用shapes参数指定要动画的确切形状、图标或图像。此外，您可以使用background参数控制背景。

自定义单个形状

要自定义单个形状，可以将Shape对象列表作为shapes参数传递。每个Shape对象包括以下属性：

• pos：形状的初始位置 [Offset]。
• dx：X轴上的速度 [double]。
• dy：Y轴上的速度 [double]。
• size：形状的大小 [double]。
• color：形状的颜色 [Color]。
• whenOutOfScreenMode：形状在屏幕边缘的行为 [WhenOutOfScreenMode]。
• behaviour：形状的结构 [ItemBehaviour]。

Vitality.custom(shapes: [
  Shape(
    pos: const Offset(30, 30),
    dx: 0.3,
    dy: 0,
    size: 160,
    color: Colors.yellow,
    whenOutOfScreenMode: WhenOutOfScreenMode.Reflect,
    behaviour: ItemBehaviour(shape: ShapeType.Icon, icon: Icons.sunny),
  ),
]),

自定义一组形状

对于更动态的组合，您可以使用ShapesGenerator类。该类允许您生成具有特定属性的形状，从而更容易地组合多个形状，使您能够轻松创建美丽的背景。参数包括：

• minWidth, minHeight：随机生成的最小宽度和高度 [double]。
• maxWidth, maxHeigh：随机生成的最大宽度和高度 [double]。
• enableXMovements, enableYMovements：形状是否会在X轴和Y轴上移动 [bool]。
• minSize, maxSize：形状的最小和最大尺寸值 [double]。
• minOpacity, maxOpacity：形状的最小和最大不透明度值（0到1之间的值） [double]。
• minSpeed, maxSpeed：形状的最小和最高速度值 [double]。
• behaviours：用于随机选择的ItemBehaviour列表。
• colors：用于随机选择的Color列表。
• whenOutOfScreenMode：当形状到达屏幕边缘时会发生什么 [WhenOutOfScreenMode]。

List<Shape> getClouds(Size size) {
  return ShapesGenerator.randomly(
    maxWidth: size.width,
    maxHeight: size.height / 3,
    enableYMovements: false,
    maxSize: 60,
    minSize: 50,
    maxOpacity: 0.9,
    minOpacity: 0.5,
    whenOutOfScreenMode: WhenOutOfScreenMode.Reflect,
    behaviours: [ItemBehaviour(shape: ShapeType.Icon, icon: Icons.cloud)],
    colors: const [Colors.white],
  ).getShapes(10);
}

List<Shape> getGroundShapes(Size size) {
  return ShapesGenerator.randomly(
    minHeight: size.height - 130,
    maxWidth: size.width,
    maxHeight: size.height,
    enableYMovements: false,
    maxSize: 190,
    minSize: 90,
    maxOpacity: 1,
    minOpacity: 0.5,
    whenOutOfScreenMode: WhenOutOfScreenMode.none,
    behaviours: [
      ItemBehaviour(shape: ShapeType.Icon, icon: Icons.circle)
    ],
    colors: const [Colors.green],
    maxSpeed: 0,
    minSpeed: 0
  ).getShapes(40);
}

[@override](/user/override)
Widget build(BuildContext context) {
  Size size = MediaQuery.of(context).size;
  return Vitality.custom(background: Colors.blue, shapes: [
    Shape(
      pos: const Offset(30, 30),
      dx: 0.3,
      dy: 0,
      size: 160,
      color: Colors.yellow,
      whenOutOfScreenMode: WhenOutOfScreenMode.Reflect,
      behaviour: ItemBehaviour(shape: ShapeType.Icon, icon: Icons.sunny),
    ),
    ...getClouds(size),
    ...getGroundShapes(size),
  ]);
}