颤动 AppBar 中心文本

在 Flutter 中，我们可以使用 AppBar 组件来创建一个带有标题的顶部工具栏。默认情况下，AppBar 的标题文本放置在居中位置，但有时我们想要增加一些动态效果来吸引用户的注意力。本文将介绍如何给 AppBar 中心的文本增加颤动效果。

实现效果

我们想要实现的效果是让 AppBar 中心的文本以一定频率颤动。当用户看到颤动的文本时，会更容易注意到应用程序的标题。

实现步骤

我们将使用 Flutter 的动画功能和 Transform 组件来实现颤动效果。

1. 导入必要的库：

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

2. 创建一个 StatefulWidget 组件：

class ShakingAppBarTitle extends StatefulWidget {
  @override
  _ShakingAppBarTitleState createState() => _ShakingAppBarTitleState();
}

3. 在 State 类中创建需要的变量：

class _ShakingAppBarTitleState extends State<ShakingAppBarTitle>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;
  bool _isShaking = false;
  final double _shakeRange = 5.0;
  final int _shakeDuration = 500;
  final int _shakeFrequency = 1000;
}

4. 在 initState 方法中创建动画控制器和动画：

@override
void initState() {
  super.initState();
  
  _animationController = AnimationController(
    vsync: this,
    duration: Duration(milliseconds: _shakeDuration),
  )..addListener(() {
      setState(() {}); // 更新视图
    });
  
  _animation = Tween(begin: -1.0, end: 1.0).animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    ),
  )..addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.completed) {
        // 动画完成后开始下一次颤动
        _animationController.repeat(
          period: Duration(milliseconds: _shakeFrequency),
          reverse: true,
        );
      }
    });
}

5. 在 dispose 方法中释放资源：

@override
void dispose() {
  _animationController.dispose();
  super.dispose();
}

6. 创建一个方法来触发颤动效果：

void _startShaking() {
  if (!_isShaking) {
    _animationController.forward();
    _isShaking = true;
  }
}

7. 在 Scaffold 的 appBar 中使用 AppBarTitle 组件，并给文本设置 Transform：

appBar: AppBar(
  title: AppBarTitle(),
),

...

class AppBarTitle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: Offset(
        _animation.value * _shakeRange,
        0.0,
      ),
      child: Text('颤动 AppBar 中心文本'),
    );
  }
}

8. 最后，在需要触发颤动效果的地方调用 _startShaking 方法即可。例如，可以在 initState 或按钮点击事件中调用该方法。

注意事项

• 必须在 StatefulWidget 组件中使用动画控制器和动画。
• 在 initState 中初始化动画控制器，并在dispose中释放资源。
• Transform 组件可以用来实现位移、旋转、缩放等变换效果，通过 offset 属性来控制位移效果。
• 在需要刷新动画的地方调用 setState((){}) 方法。
• 可以根据需要调整颤动的范围、频率和持续时间。

以上就是如何给 AppBar 中心文本增加颤动效果的方法。你可以根据自己的需要进行调整和优化，让应用程序的标题更加吸引人。