Flutter摇晃动画效果插件f_shake_animation_widget的使用

Flutter摇晃动画效果插件f_shake_animation_widget的使用

介绍

f_shake_animation_widget 是一个用于在 Flutter 中实现抖动动画效果的插件。该插件提供了多种动画类型和配置选项，使得开发者可以轻松地为 UI 元素添加动态的抖动效果。

使用步骤

1. 添加依赖

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

dependencies:
  f_shake_animation_widget: ^1.0.0

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

2. 初始化抖动动画控制器

首先，我们需要创建一个 ShakeAnimationController 实例来控制抖动动画。

final ShakeAnimationController _shakeAnimationController = ShakeAnimationController();

3. 构建抖动效果

使用 ShakeAnimationWidget 来实现抖动效果。以下是一个简单的示例：

ShakeAnimationWidget buildShakeAnimationWidget() {
  return ShakeAnimationWidget(
    // 抖动控制器
    shakeAnimationController: _shakeAnimationController,
    // 抖动类型（微旋转）
    shakeAnimationType: ShakeAnimationType.skew,
    // 不开启抖动
    isForward: false,
    // 抖动次数（0表示无限次）
    shakeCount: 0,
    // 抖动幅度（取值范围为 [0, 1]）
    shakeRange: 0.2,
    // 抖动的子控件
    child: ElevatedButton(
      child: const Text(
        '测试',
        style: TextStyle(color: Colors.white),
      ),
      onPressed: () {
        // 判断抖动动画是否正在执行
        if (_shakeAnimationController.animationRunning) {
          // 停止抖动动画
          _shakeAnimationController.stop();
        } else {
          // 开启抖动动画
          // 参数 shakeCount 用来配置抖动次数
          // 通过 controller start 方法默认为 1
          _shakeAnimationController.start(shakeCount: 1);
        }
      },
    ),
  );
}

4. 示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 f_shake_animation_widget 插件：

import 'dart:async';

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

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 定义菜单按钮选项
  List<Icon> iconList = const [
    Icon(Icons.add),
    Icon(Icons.save),
    Icon(Icons.share),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("抖动动画")),
        // 填充布局
        body: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: Padding(
            padding: const EdgeInsets.all(18),
            child: Stack(
              children: [
                Column(
                  children: [
                    // 通用组件的抖动
                    buildShakeAnimationWidget(),
                    const SizedBox(height: 10),
                    // 文字的抖动
                    buildTextAnimationWidget(),
                    const SizedBox(height: 10),
                    // 提交动画按钮
                    buildAnimatedStatusButton(),
                    const SizedBox(height: 10),
                    // 自定义动画按钮
                    buildProgressButton(),
                  ],
                ),
                // buildBottomRoundFlowMenu(),
                // 向上弹出的按钮组件
                buildRoteFloatingButton(),
              ],
            ),
          ),
        ),
        // floatingActionButton: buildRoteFlowButtonMenu(),
      ),
    );
  }

  /// 垂直向上弹出菜单
  buildRoteFloatingButton() {
    return RoteFloatingButton(
      // 子菜单按钮选项
      iconList: iconList,
      // 子菜单按钮的点击事件回调
      clickCallback: (int index) {
        print("点击了按钮$index");
      },
    );
  }

  /// 向上弹出的按钮组件
  buildRoteFlowButtonMenu() {
    return RoteFlowButtonMenu(
      // 子菜单按钮选项
      iconList: iconList,
      // 子菜单按钮的点击事件回调
      clickCallback: (int index) {
        print("点击了按钮$index");
      },
    );
  }

  /// 仿开源中国自定义底部菜单
  buildBottomRoundFlowMenu() {
    return BottomRoundFlowMenu(
      // 子菜单按钮选项
      iconList: iconList,
      // 子菜单按钮的点击事件回调
      clickCallback: (int index) {
        print("点击了按钮$index");
      },
    );
  }

  buildTextAnimationWidget() {
    return const ShakeTextAnimationWidget(
      // 需要设置抖动效果的文本
      animationText: "这里是文字的抖动",
      // 字符间距
      space: 1.0,
      // 行间距
      runSpace: 10,
      // 文字的样式
      textStyle: TextStyle(fontSize: 25),
      // 抖动次数
      shakeCount: 0,
    );
  }

  /// 抖动动画控制器
  final ShakeAnimationController _shakeAnimationController =
      ShakeAnimationController();

  /// 构建抖动效果
  ShakeAnimationWidget buildShakeAnimationWidget() {
    return ShakeAnimationWidget(
      // 抖动控制器
      shakeAnimationController: _shakeAnimationController,
      // 抖动类型（微旋转）
      shakeAnimationType: ShakeAnimationType.skew,
      // 不开启抖动
      isForward: false,
      // 抖动次数（0表示无限次）
      shakeCount: 0,
      // 抖动幅度（取值范围为 [0, 1]）
      shakeRange: 0.2,
      // 抖动的子控件
      child: ElevatedButton(
        child: const Text(
          '测试',
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () {
          // 判断抖动动画是否正在执行
          if (_shakeAnimationController.animationRunning) {
            // 停止抖动动画
            _shakeAnimationController.stop();
          } else {
            // 开启抖动动画
            // 参数 shakeCount 用来配置抖动次数
            // 通过 controller start 方法默认为 1
            _shakeAnimationController.start(shakeCount: 1);
          }
        },
      ),
    );
  }

  /// 切换样式的动画按钮
  Widget buildProgressButton() {
    return AnimatedButton(
      width: 120.0,
      height: 40,
      buttonText: '动画样式按钮',
      clickCallback: () {
        print("点击事件回调");
      },
    );
  }

  // 动画按钮使用到的控制器
  final AnimatedStatusController animatedStatusController =
      AnimatedStatusController();

  // 切换样式的动画按钮
  Widget buildAnimatedStatusButton() {
    return AnimatedStatusButton(
      // 控制器
      animatedStatusController: animatedStatusController,
      // 显示按钮的宽度
      width: 220.0,
      // 显示按钮的高度
      height: 40,
      // 动画交互时间
      milliseconds: 1000,
      buttonText: '提交',
      // 背景颜色
      backgroundNormalColor: Colors.white,
      // 边框颜色
      borderNormalColor: Colors.deepOrange,
      // 文字颜色
      textNormalCcolor: Colors.deepOrange,
      // 点击回调
      clickCallback: () async {
        print("点击事件回调");
        // 模拟耗时操作
        await Future.delayed(const Duration(milliseconds: 4000));

        // 返回false 会一直在转圈圈
        // 返回true 会回到默认显示样式
        return Future.value(true);
      },
    );
  }
}