不推荐使用的凸起按钮颤振 - Dart

在 Dart 的 UI 开发中，凸起按钮是很常见的一种UI元素，但是有时候我们可能会尝试给凸起按钮添加颤振效果，这个做法虽然能够吸引用户的注意力，但是我们不推荐使用这样的按钮。

颤振效果的实现

通常情况下，我们可以通过使用 Dart 的 Animation 和 CurvedAnimation 来实现按钮颤动的动画效果。

class ShakeButtonAnimation extends StatefulWidget {
  final Widget child;
  final VoidCallback onPressed;

  ShakeButtonAnimation({this.child, this.onPressed});

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

class _ShakeButtonAnimationState extends State<ShakeButtonAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _shakeAnimation;

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

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );

    _shakeAnimation = Tween<double>(
      begin: -5,
      end: 5,
    ).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.elasticInOut,
      ),
    );
  }

  void _onPressed() {
    _animationController.forward().then((value) {
      _animationController.reverse().then((value) {
        widget.onPressed();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: Offset(_shakeAnimation.value, 0),
      child: RaisedButton(
        onPressed: _onPressed,
        child: widget.child,
      ),
    );
  }

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

该实现的核心在于，通过 AnimationController 控制动画的重放和反向播放，并使用 Transform.translate 将按钮平移以产生颤动的效果。

不推荐使用的原因

虽然效果看上去很不错，但是我们不推荐在生产环境中使用该效果。以下是一些常见的原因：

1. 使用此类效果可能会导致用户的注意力过度分散，从而影响到他们的体验。

2. 颤振效果可能会使某些用户感到不适，尤其是那些容易受到动态效果影响的人群。

3. 如果在不合适的地方过度使用颤振效果，可能会让用户失去对应用程序的信任感。

4. 表示颤振动画的代码可能会比较冗长，而且难以维护和修改。

因此，我们建议在大多数情况下不要使用颤振效果，以免对用户造成负面影响。

结论

在 Dart 的 UI 开发中，颤振效果虽然能够增强用户体验，但必须谨慎使用。我们需要权衡利弊并考虑用户的需求和兴趣，以确保我们的UI设计既满足用户的期望，又不会对用户造成不必要的干扰。