Flutter浮动动画插件floating_animation的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter浮动动画插件floating_animation的使用

1. 插件简介

floating_animation 是一个可自定义的Flutter插件，用于创建动态浮动形状作为背景。支持多种形状（如圆形、矩形、三角形、心形等），并允许配置颜色、大小、速度、方向、生成频率和透明度等属性。该插件还支持无缝状态变化，可以在程序运行中动态更改形状属性而不中断动画。

以下是该插件的一些示例效果：

  • 带渐变背景的圆形： Floating circles

  • 带渐变背景的心形： Floating hearts

  • 带渐变背景的下雨效果： Recording2024-12-11165702-ezgif com-video-to-gif-converter

2. 主要特性

  • 多种形状类型：支持圆形、矩形、三角形、心形等。
  • 可自定义颜色：为每种形状类型定义独特的颜色。
  • 动态动画：形状可以以可配置的速度、大小和方向浮动。
  • 分层深度：形状根据其深度值分层渲染。
  • 无缝过渡：可以在程序运行中动态更改属性而不中断动画。
  • 可调整大小：使用大小乘数控制形状的大小。
  • 浮动方向：指定形状浮动的方向（如上、下、左、右）。
  • 生成频率控制：设置新形状生成的频率。
  • 响应式设计：自动适应不同的屏幕尺寸。

3. 安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  floating_animation: ^1.0.7

然后运行以下命令来获取插件：

flutter pub get

4. 使用方法

4.1 基本示例

以下是一个简单的示例，展示了如何使用 FloatingAnimation 创建带有浮动圆形的背景：

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

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

class ShapeFloatingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('浮动形状')),
        body: FloatingAnimation(
          maxShapes: 50, // 最大形状数量
          speedMultiplier: 1.0, // 速度乘数
          sizeMultiplier: 1.0, // 大小乘数
          selectedShape: 'circle', // 选择的形状类型
          shapeColors: {
            'circle': Colors.blue, // 圆形的颜色
            'rectangle': Colors.green, // 矩形的颜色
            'heart': Colors.pink, // 心形的颜色
            'triangle': Colors.purple, // 三角形的颜色
          },
          direction: FloatingDirection.up, // 浮动方向
          spawnRate: 10.0, // 每秒生成的形状数量
        ),
      ),
    );
  }
}
4.2 自定义配置
4.2.1 形状类型

你可以通过 selectedShape 属性指定要渲染的形状类型。支持的值包括：

  • circle：圆形
  • rectangle：矩形
  • triangle：三角形
  • heart：心形
4.2.2 颜色

使用 shapeColors 属性为每种形状类型定义自定义颜色：

FloatingAnimation(
  shapeColors: {
    'circle': Colors.orange, // 圆形的颜色
    'rectangle': Colors.teal, // 矩形的颜色
    'heart': Colors.redAccent, // 心形的颜色
    'triangle': Colors.yellow, // 三角形的颜色
  },
)
4.2.3 速度、大小和方向
  • 速度：通过 speedMultiplier 属性调整形状的整体速度。
  • 大小：通过 sizeMultiplier 属性缩放形状的大小。值大于 1.0 会放大形状，小于 1.0 会缩小形状。
  • 方向：通过 direction 属性控制形状浮动的方向。选项包括 FloatingDirection.up、FloatingDirection.down、FloatingDirection.left 和 FloatingDirection.right。
FloatingAnimation(
  speedMultiplier: 1.5, // 速度乘数
  sizeMultiplier: 0.8, // 大小乘数
  direction: FloatingDirection.left, // 浮动方向
)
4.2.4 生成频率

通过 spawnRate 属性控制新形状出现的频率，单位为每秒生成的形状数量。较高的值会导致更频繁的形状生成。

FloatingAnimation(
  spawnRate: 15.0, // 每秒生成 15 个形状
)

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

Harmonyos Next教程
1 回复

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


当然，关于floating_animation插件在Flutter中的使用，这里是一个具体的代码案例来展示如何实现浮动动画效果。floating_animation是一个用于在Flutter应用中创建浮动动画效果的插件。下面是一个简单的示例，展示了如何使用这个插件来创建一个浮动按钮并添加动画效果。

首先，确保你已经在pubspec.yaml文件中添加了floating_animation依赖：

dependencies:
  flutter:
    sdk: flutter
  floating_animation: ^x.y.z  # 替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中实现浮动动画。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:floating_animation/floating_action_button_floating.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floating Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FloatingAnimationDemo(),
    );
  }
}

class FloatingAnimationDemo extends StatefulWidget {
  @override
  _FloatingAnimationDemoState createState() => _FloatingAnimationDemoState();
}

class _FloatingAnimationDemoState extends State<FloatingAnimationDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true); // 反复播放动画
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Floating Animation Demo'),
      ),
      body: Center(
        child: FloatingActionButtonFloating(
          floatingActionButton: FloatingActionButton(
            onPressed: () {},
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          floatingButtonAnimation: _controller,
          triggerButton: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ElevatedButton(
              onPressed: () {},
              child: Text('Trigger Animation'),
            ),
          ),
          floatingDirection: FloatingDirection.bottom,
          triggerButtonPosition: TriggerButtonPosition.bottom,
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个FloatingAnimationDemo类，它继承自StatefulWidget，并在其状态类中使用了AnimationController来控制动画。
  2. AnimationController的duration设置为2秒，并通过vsync: this与widget树的帧率同步。
  3. repeat(reverse: true)方法用于使动画反复播放，并在每次结束时反转方向。
  4. FloatingActionButtonFloating是floating_animation插件提供的一个widget，它接受多个参数，包括floatingActionButton（要浮动的按钮）、floatingButtonAnimation（控制浮动的动画控制器）、triggerButton（触发浮动的按钮）、floatingDirection（浮动方向）和triggerButtonPosition（触发按钮的位置）。

这个示例展示了如何使用floating_animation插件创建一个简单的浮动动画效果。你可以根据需要调整动画参数和widget属性，以实现更复杂和定制化的动画效果。

回到顶部