Flutter弹簧动画效果插件spring的使用

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

Flutter弹簧动画效果插件spring的使用

Spring Logo

A simple & powerful pre-built animation kit.

🔨 安装

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

dependencies:
  spring: ^2.0.2

简单淡入淡出示例

🎥 Spring Animations

⚙ 导入

import 'package:spring/spring.dart';

🕹️ 使用

简单的用法示例:

Spring.slide(
  slideType: SlideType.slide_in_right,
  child: FlutterLogo(),
);

🕹️ 高级用法

完整的示例代码如下:

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

class SpringExample extends StatelessWidget {
  final SpringController springController = SpringController(initialAnim: Motion.play);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Spring.slide(
          springController: springController,
          slideType: SlideType.slide_in_right,
          delay: Duration(milliseconds: 500),
          animDuration: Duration(milliseconds: 1000),
          curve: Curves.easeInExpo,
          extend: 30,
          withFade: true,
          animStatus: (AnimStatus status) {
            print(status);
          },
          child: GestureDetector(
              onTap: () {
                springController.play(motion: Motion.reverse);
              },
              child: FlutterLogo(size: 100)),
        ),
      ),
    );
  }
}

控制动画

你可以通过SpringController来控制动画:

GestureDetector(
  onTap: () {
    springController.play(
      motion: Motion.reverse,
      animDuration: Duration(milliseconds: 300),
      curve: Curves.bounceIn,
      delay: Duration(milliseconds: 900));
  },
  child: Spring.slide(
    springController: springController,
    slideType: SlideType.slide_in_right,
    delay: Duration(milliseconds: 500),
    animDuration: Duration(milliseconds: 1000),
    curve: Curves.easeInExpo,
    extend: 30,
    withFade: true,
    animStatus: (AnimStatus status) {
      print(status);
    },
    child: FlutterLogo(size: 100),
  ),
);

🎮 SpringController

SpringController允许你在不调用setState的情况下控制动画。

// 初始动画为Motion.play
final SpringController springController = SpringController();

// 你也可以使用initialAnim参数设置初始动画
final SpringController springController = SpringController(initialAnim: Motion.pause);

🔈 动画状态

你可以通过animStatus回调监听动画状态,该回调返回AnimStatus枚举:

  • AnimStatus.forward
  • AnimStatus.completed
  • AnimStatus.reverse
  • AnimStatus.dismissed

示例代码:

Spring.rotate(
  springController: springController,
  animStatus: (AnimStatus status) {
    print(status);
  },
  child: FlutterLogo(size: 100),
);

🐞 Bugs/Requests

如果遇到问题,请在Github上提交issue。如果你觉得库缺少某个功能,请在Github上提交ticket,我们将会查看并处理。Pull requests欢迎。

🙏 感谢

📃 License

MIT License


这个Markdown文档详细介绍了如何在Flutter项目中使用`spring`插件来实现各种弹簧动画效果,并提供了完整的示例代码以便快速上手。

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

1 回复

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


当然,以下是一个关于如何在Flutter中使用spring插件来实现弹簧动画效果的代码案例。spring物理模型常用于创建自然、流畅的动画效果。在Flutter中,虽然没有专门的spring插件,但我们可以使用AnimatedBuilderSpringSimulation来实现类似的效果。

首先,确保你的pubspec.yaml文件中已经包含了Flutter的依赖项(虽然基本的动画功能已经包含在Flutter SDK中,不需要额外的插件):

dependencies:
  flutter:
    sdk: flutter

然后,你可以创建一个使用弹簧动画效果的Widget。以下是一个简单的示例,展示如何在一个按钮点击时触发一个弹簧动画,使一个容器在屏幕上上下移动。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Spring Animation Example'),
        ),
        body: Center(
          child: SpringAnimationExample(),
        ),
      ),
    );
  }
}

class SpringAnimationExample extends StatefulWidget {
  @override
  _SpringAnimationExampleState createState() => _SpringAnimationExampleState();
}

class _SpringAnimationExampleState extends State<SpringAnimationExample> with SingleTickerProviderStateMixin {
  double _position = 0.0;
  double _targetPosition = 0.0;
  AnimationController? _controller;
  Animation<double>? _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    resetPosition();
  }

  void resetPosition() {
    setState(() {
      _targetPosition = -100.0; // New target position (e.g., move up)
    });
    _animateToPosition();
  }

  void _animateToPosition() {
    final spring = SpringSimulation(
      SpringDescription(mass: 1.0, stiffness: 100.0, damping: 20.0),
      _position,
      _targetPosition,
      0.0,
    );

    _animation = _controller!.drive(
      AnimationBuilder.ofSpring(_position, spring)
    );

    _animation!.addListener(() {
      setState(() {
        _position = _animation!.value;
      });
    });

    _animation!.addStatusListener((status) {
      if (status == AnimationStatus.completed || status == AnimationStatus.rejected) {
        // After animation completes, switch target position to move back down
        setState(() {
          _targetPosition = 0.0; // Reset position (e.g., move back down)
        });
        _animateToPosition(); // Restart animation to new target position
      }
    });

    _controller!.reset();
    _controller!.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        AnimatedBuilder(
          animation: _animation!,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
          builder: (context, child, animationValue) {
            return Transform.translate(
              offset: Offset(0, animationValue),
              child: child,
            );
          },
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: resetPosition,
          child: Text('Animate'),
        ),
      ],
    );
  }

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

在这个示例中:

  1. 我们创建了一个SpringAnimationExample组件,它包含了一个AnimatedBuilder用于应用动画效果到一个容器上。
  2. 使用SpringSimulation来定义弹簧动画的参数,如质量、刚度和阻尼。
  3. 通过AnimationBuilder.ofSpring将弹簧模拟的结果转换为动画值。
  4. 使用Transform.translate来根据动画值移动容器。
  5. 当按钮被点击时,调用resetPosition方法来触发动画。

这个示例展示了如何在Flutter中实现一个基本的弹簧动画效果。你可以根据需要调整SpringDescription的参数来获得不同的动画效果。

回到顶部