Flutter基于弹簧的动画和模拟插件springster的使用

Springster

Springster简化了基于弹簧的动画和模拟。

Features 🎯

• 🎨 带有可定制弹跳和持续时间的简单基于弹簧的动画
• 🔄 基于弹簧的可拖动小部件，带有平滑返回动画
• 💯 可用于标准Flutter动画的弹簧曲线
• 📱 复杂运动的二维弹簧动画

Try it out

Open Example

Installation 💻

❗要开始使用Springster，您必须在您的机器上安装Dart SDK。

将以下内容添加到您的pubspec.yaml文件中：

dependencies:
  springster: ^latest_version

或者通过dart pub命令安装：

dart pub add springster

Usage 💡

Simple Spring Animation

使用SpringBuilder进行基本的弹簧动画：

SpringBuilder(
  spring: SimpleSpring.bouncy,
  value: targetValue, // Changes trigger smooth spring animation
  builder: (context, value, child) {
    return Container(
      width: value,
      height: value,
      color: Colors.blue,
    );
  },
)

如果您想要简单的二维弹簧动画，可以使用SpringBuilder2D：

SpringBuilder2D(
  spring: SimpleSpring.bouncy,
  value: (100, 100), // Changes trigger smooth spring animation and redirect dynamically
  builder: (context, value, child) {
    return Transform.translate(
      offset: Offset(value.x, value.y),
      child: child,
    );
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

Spring Draggable

springster提供了一个SpringDraggable小部件，允许您在屏幕上拖动小部件，并带有弹簧返回动画。它的工作方式与Flutter中的Draggable小部件类似，并支持原生Flutter DragTarget，但具有一些合理的默认设置和额外功能。

SpringDraggable(
  spring: SimpleSpring.bouncy,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
  data: 'my-draggable-data',
)

Low-level Spring Simulation

如果您需要对弹簧模拟有更多的控制，您可以使用SpringSimulationController和SpringSimulationController2D类。

final controller = SpringSimulationController(
  spring: SimpleSpring.bouncy,
  vsync: this,
);

它们类似于Flutter中的AnimationController类，允许您通过目标值驱动弹簧模拟，同时在目标变化之间保持速度。

Predefined Springs 🎯

Springster提供了几种预定义的弹簧配置：

• const SimpleSpring() - 平滑无弹跳的弹簧
• SimpleSpring.instant - 几乎即时的弹簧
• SimpleSpring.defaultIOS - 类似iOS风格的平滑无弹跳弹簧
• SimpleSpring.bouncy - 弹跳较高的弹簧
• SimpleSpring.snappy - 小弹跳的快速弹簧
• SimpleSpring.interactive - 交互式动画的低响应弹簧

您还可以创建自定义弹簧：

const mySpring = SimpleSpring(
  duration: 0.5, // 定位持续时间
  bounce: 0.2,   // 弹跳量（-1到1）
);

// 或者使用阻尼分数
const mySpring = SimpleSpring.withDamping(
  dampingFraction: 0.7,
  duration: 0.5,
);

Acknowledgements

Springster部分改编并深受fluid_animations的启发。

示例代码

以下是springster的一个完整示例demo，展示了如何在应用程序中使用springster的不同功能。

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

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

class SpringsterExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Springster Examples',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SpringsterExample(),
    );
  }
}

class SpringsterExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Springster Examples'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildExampleButton(context, 'One Dimension', OneDimensionExample()),
          SizedBox(height: 16),
          _buildExampleButton(context, 'Two Dimension Redirection', TwoDimensionRedirectionExample()),
          SizedBox(height: 16),
          _buildExampleButton(context, 'Draggable Icons', DraggableIconsExample()),
          SizedBox(height: 16),
          _buildExampleButton(context, 'Picture in Picture', PipExample()),
          SizedBox(height: 16),
          _buildExampleButton(context, 'Flip Card', FlipCardExample()),
        ],
      ),
    );
  }

  Widget _buildExampleButton(BuildContext context, String label, Widget page) {
    return ElevatedButton(
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => page),
        );
      },
      child: Text(label),
    );
  }
}

class OneDimensionExample extends StatefulWidget {
  @override
  _OneDimensionExampleState createState() => _OneDimensionExampleState();
}

class _OneDimensionExampleState extends State<OneDimensionExample> with SingleTickerProviderStateMixin {
  double _value = 100;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('One Dimension')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SpringBuilder(
              spring: SimpleSpring.bouncy,
              value: _value,
              builder: (context, value, child) {
                return Container(
                  width: value,
                  height: value,
                  color: Colors.blue,
                );
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _value = _value == 100 ? 200 : 100;
                });
              },
              child: Text('Toggle Size'),
            ),
          ],
        ),
      ),
    );
  }
}

class TwoDimensionRedirectionExample extends StatefulWidget {
  @override
  _TwoDimensionRedirectionExampleState createState() => _TwoDimensionRedirectionExampleState();
}

class _TwoDimensionRedirectionExampleState extends State<TwoDimensionRedirectionExample> with SingleTickerProviderStateMixin {
  Offset _offset = Offset(100, 100);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Two Dimension Redirection')),
      body: GestureDetector(
        onPanUpdate: (details) {
          setState(() {
            _offset += Offset(details.delta.dx, details.delta.dy);
          });
        },
        child: SpringBuilder2D(
          spring: SimpleSpring.bouncy,
          value: _offset,
          builder: (context, value, child) {
            return Transform.translate(
              offset: Offset(value.x, value.y),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            );
          },
        ),
      ),
    );
  }
}

class DraggableIconsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Draggable Icons')),
      body: Center(
        child: SpringDraggable(
          spring: SimpleSpring.bouncy,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
          data: 'my-draggable-data',
        ),
      ),
    );
  }
}

class PipExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Picture in Picture')),
      body: Center(
        child: Text('Pip Example Content'),
      ),
    );
  }
}

class FlipCardExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flip Card')),
      body: Center(
        child: Text('Flip Card Example Content'),
      ),
    );
  }
}

这个完整的示例代码演示了如何使用springster插件的各种功能，包括一维和二维弹簧动画、可拖动的小部件等。希望这对您有所帮助！