Flutter弹性动画效果插件bouncy_widget的使用

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

Flutter弹性动画效果插件bouncy_widget的使用

插件介绍

bouncy_widget 是一个简单的且易于使用的动画插件，用于创建一个上下弹跳的动画效果。 它封装了了必要的动画配置，包括上升、下降、弹跳以及可选的暂停阶段。

Bouncy Widget Animation

特性

  • 配置上升/下降/暂停阶段的比例。
  • 配置弹跳的高度。
  • 如果需要更多功能，建议自己构建动画。

使用示例

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

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

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

  // 这个 widget 是应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bouncy Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const BouncyDemo(title: 'Bouncy Widget'),
    );
  }
}

class BouncyDemo extends StatefulWidget {
  const BouncyDemo({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<BouncyDemo> createState() => _BouncyDemoState();
}

class _BouncyDemoState extends State<BouncyDemo> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ElevatedButton.icon(
        icon: Padding(
          padding: const EdgeInsets.symmetric(vertical: 110),
          child: Bouncy(
            duration: Duration(seconds: 2),
            lift: 110,
            ratio: 0.25,
            pause: 0.5,
            child: const Icon(Icons.new_releases_outlined)),
        ),
        label: const Text("It's b bouncy!"),
        onPressed: () {},
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用bouncy_widget插件来实现弹性动画效果的代码案例。bouncy_widget是一个用于创建弹性动画效果的Flutter插件。

首先，你需要在你的pubspec.yaml文件中添加bouncy_widget依赖：

dependencies:
  flutter:
    sdk: flutter
  bouncy_widget: ^0.1.0  # 请检查最新版本号

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

接下来是一个完整的Flutter应用示例，展示了如何使用BouncyWidget来创建一个具有弹性动画效果的按钮：

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

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

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

class BouncyWidgetExample extends StatefulWidget {
  @override
  _BouncyWidgetExampleState createState() => _BouncyWidgetExampleState();
}

class _BouncyWidgetExampleState extends State<BouncyWidgetExample> with SingleTickerProviderStateMixin {
  bool isPressed = false;

  void handlePress() {
    setState(() {
      isPressed = !isPressed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bouncy Widget Example'),
      ),
      body: Center(
        child: BouncyWidget(
          child: ElevatedButton(
            onPressed: handlePress,
            child: Text('Press Me'),
            style: ButtonStyle(
              overlayColor: MaterialStateProperty.all(isPressed ? Colors.red : Colors.blue),
            ),
          ),
          onPress: () {
            // 这里可以添加额外的按下时的逻辑
            print('Button pressed!');
          },
          onRelease: () {
            // 这里可以添加释放时的逻辑
            print('Button released!');
          },
          // 你可以根据需要调整这些参数
          height: 100,
          width: 200,
          scale: 1.2,
          duration: Duration(milliseconds: 300),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先导入了bouncy_widget包。
  2. 创建了一个简单的Flutter应用，其中包含一个ElevatedButton。
  3. 使用BouncyWidget包装了这个按钮，并设置了相关的动画参数，如height、width、scale和duration。
  4. 通过onPress和onRelease回调，可以在按钮按下和释放时执行额外的逻辑（在这个例子中，只是打印了一些信息）。

你可以根据需要调整这些参数和回调逻辑，以实现不同的弹性动画效果。

回到顶部