Flutter动画效果插件flutter_bounce的使用

flutter_bounce

flutter_bounce 是一个高效的Flutter包，为任何Flutter小部件提供点击时弹跳的动画效果。这个包是 bouncing_widget 的增强版本，解决了后者在滚动页面上的粘滞问题。

flutter_bounce的优点

• 适用于静态和动态（如滚动页面）页面：无论是在固定位置的小部件还是在可滚动区域内的小部件，都可以流畅地使用。
• 不粘滞滚动：在滚动时不会让小部件保持按下的状态。
• 通过Duration控制弹跳动画：可以自定义弹跳动画的时间长度，默认为100毫秒。
• 优化了性能：与直接使用 Flutter AnimationController 和 Transform.scale() Widget 相比，它不会导致小部件在滚动时卡住。

使用方法

要在项目中使用此插件，请将 flutter_bounce 添加为依赖项到你的 pubspec.yaml 文件中：

dependencies:
  flutter_bounce: ^latest_version # 替换为最新版本号

示例代码

下面是一个完整的示例应用程序，演示了如何在Flutter应用中使用 flutter_bounce 包来创建带有弹跳效果的小部件。

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bounce Demo',
      theme: ThemeData(
        primaryColor: Colors.indigo[400],
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Bounce Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  void _showSimpleBounceDemo() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SimpleBounceDemo()),
    );
  }

  void _showBounceWithScroll() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => BounceScroll()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Bounce(
              duration: Duration(milliseconds: 110),
              onPressed: _showSimpleBounceDemo,
              child: Container(
                padding: EdgeInsets.all(20.0),
                color: Theme.of(context).primaryColor,
                child: Text('Simple Bounce Demo', style: TextStyle(color: Colors.white)),
              ),
            ),
            SizedBox(height: 20.0),
            Bounce(
              duration: Duration(milliseconds: 110),
              onPressed: _showBounceWithScroll,
              child: Container(
                padding: EdgeInsets.all(20.0),
                color: Theme.of(context).primaryColor,
                child: Text('Bounce with Scroll', style: TextStyle(color: Colors.white)),
              ),
            )
          ],
        ),
      ),
    );
  }
}

bounce_demo.dart

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

class SimpleBounceDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Bounce Demo'),
      ),
      body: Center(
        child: Bounce(
          duration: Duration(milliseconds: 150), // 设置弹跳持续时间为150ms
          onPressed: () {
            // 点击事件处理逻辑
            print('Button pressed');
          },
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Tap Me!',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

bounce_scroll.dart

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

class BounceScroll extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bounce with Scroll'),
      ),
      body: ListView.builder(
        itemCount: 30,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Bounce(
              duration: Duration(milliseconds: 100), // 默认弹跳持续时间
              onPressed: () {
                // 点击事件处理逻辑
                print('Item $index pressed');
              },
              child: Container(
                height: 100,
                color: Colors.primaries[index % Colors.primaries.length],
                child: Center(
                  child: Text(
                    'Item $index',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

致谢

感谢以下贡献者：

• Levent Kantaroğlu 对代码进行了null安全性的改进。
• ThomasEcalle 提供了间接的灵感，促使我们开发出更高效的小部件。

希望这个插件能帮助你轻松实现炫酷的点击弹跳效果！如果你有任何问题或建议，请随时访问GitHub仓库提交issue或pull request。