Flutter手势动画插件gestu_tweens的使用

Gestu Tweens 是一个用于创建简单且可定制的手势动画的 Flutter 包。它提供了三种主要的动画类型：缩放（ScaleTween）、透明度变化（OpacityTween）和位置变化（TranslateTween）。

功能

• ScaleTween：从初始值到结束值缩放一个部件。
• OpacityTween：从初始值到结束值改变一个部件的透明度。
• TranslateTween：从初始偏移量到结束偏移量移动一个部件。

开始使用

安装

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

dependencies:
  gestu_tweens: ^0.1.0

然后运行 flutter pub get 来安装该包。

使用示例

ScaleTween

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

class ScaleTweenExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ScaleTween(
          child: Text('缩放我！'),
          duration: Duration(seconds: 1),
          curve: Curves.easeInOut,
          begin: 0.5,
          end: 1.5,
          reverse: false,
        ),
      ),
    );
  }
}

OpacityTween

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

class OpacityTweenExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: OpacityTween(
          child: Text('淡出我！'),
          duration: Duration(seconds: 1),
          curve: Curves.easeInOut,
          begin: 0.2,
          end: 1.0,
          reverse: false,
        ),
      ),
    );
  }
}

TranslateTween

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

class TranslateTweenExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TranslateTween(
          child: Text('移动我！'),
          duration: Duration(seconds: 1),
          curve: Curves.easeInOut,
          begin: Offset(0, 30),
          end: Offset(0, 0),
          reverse: false,
        ),
      ),
    );
  }
}

完整示例

下面是一个完整的示例代码，展示了如何在一个应用中使用这些动画部件，并通过按钮切换动画的方向。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gestu Tweens',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '演示动画插件'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _opacityReverse = false;
  bool _scaleReverse = false;
  bool _translateReverse = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            const Spacer(),
            OpacityTween(
              delay: const Duration(seconds: 2),
              reverse: _opacityReverse,
              child: const Text('透明度动画'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _opacityReverse = !_opacityReverse;
                });
              },
              child: Text('反转透明度动画: $_opacityReverse'),
            ),
            const Spacer(),
            const Divider(),
            const Spacer(),
            ScaleTween(
              delay: const Duration(seconds: 2),
              reverse: _scaleReverse,
              child: const Text('缩放动画'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _scaleReverse = !_scaleReverse;
                });
              },
              child: Text('反转缩放动画: $_scaleReverse'),
            ),
            const Spacer(),
            const Divider(),
            const Spacer(),
            TranslateTween(
              delay: const Duration(seconds: 2),
              reverse: _translateReverse,
              child: const Text('位移动画'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _translateReverse = !_translateReverse;
                });
              },
              child: Text('反转位移动画: $_translateReverse'),
            ),
            const Spacer(),
            const Spacer(),
          ],
        ),
      ),
    );
  }
}