Flutter抖动动画、颤抖动画、Flutter文字抖动效果

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

• 网易云【玩转大前端】配套课程

• EDU配套 教程

• Flutter开发的点滴积累系列文章

---

1 添加依赖

小编以将这个效果封装成一个ShakeAnimationWidget组件，直接使用shake_animation_widget依赖库就可实现这个效果

实际项目首先是引用依赖，通过pub仓库添加依赖，代码如下：最新版本查看这里

  dependencies:
	 shake_animation_widget: ^1.0.0

或者是通过 github 点击查看github方式添加依赖，代码如下：

dependencies:
	shake_animation_widget:
	      git:
	        url: https://github.com/zhaolongs/flutter_shake_animation_widget.git
	        ref: master

然后加载依赖，代码如下：

flutter pub get

然后在使用的地方导包，代码如下：

import 'package:shake_animation_widget/shake_animation_widget.dart';

然后就可以使用 ShakeAnimationWidget 为任意的Widget添加抖动动画效果，实际应用场景如用户在登录时未输入密码或者验证码抖动一下提示用户，或者是输出出错时抖动一下密码输入框提示用户一下。

2 实现一个按钮的抖动

左右抖动：

代码如下：

  ///抖动动画控制器
 ShakeAnimationController _shakeAnimationController =
        new ShakeAnimationController();
  ///构建抖动效果
  ShakeAnimationWidget buildShakeAnimationWidget() {
    return ShakeAnimationWidget(
      ///抖动控制器
      shakeAnimationController: _shakeAnimationController,
      ///微旋转的抖动
      shakeAnimationType: ShakeAnimationType.RoateShake,
      ///设置不开启抖动
      isForward: false,
      ///默认为 0 无限执行
      shakeCount: 0,
      ///抖动的幅度 取值范围为[0,1]
      shakeRange: 0.2,
      ///执行抖动动画的子Widget
      child: RaisedButton(
        child: Text(
          '测试',
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () {
          ///判断抖动动画是否正在执行
          if (_shakeAnimationController.animationRunging) {
            ///停止抖动动画
            _shakeAnimationController.stop();
          } else {
            ///开启抖动动画
            ///参数shakeCount 用来配置抖动次数
            ///通过 controller start 方法默认为 1
            _shakeAnimationController.start(shakeCount: 1);
          }
        },
      ),
    );
  }

决定抖动动画的类型使用 shakeAnimationType属性来配制，它的取值如下下表所示

取值	描述
ShakeAnimationType.LeftRightShake	左右抖动
ShakeAnimationType.TopBottomShake	上下抖动
ShakeAnimationType.SkewShake	斜角抖动
ShakeAnimationType.RoateShake	旋转抖动
ShakeAnimationType.RandomShake	随机抖动

ShakeAnimationType.TopBottomShake 上下抖动：

ShakeAnimationType.RoateShake 旋转抖动：

ShakeAnimationType.SkewShake 斜角抖动：

3 实现文字的抖动效果

运行效果如下：

shake_animation_widget依赖库中，小编提供了一个 ShakeTextAnimationWidget 组件用来给一个String字符串中的单独字符设置独立的抖动效果
在使用时，只需要导包如下：

import 'package:flutterbookcode/demo/shake/shake_animation_text.dart';

然后使用 ShakeTextAnimationWidget 实现文字的抖动 代码如下：

 ShakeTextAnimationWidget(
    ///需要设置抖动效果的文本
    animationString: "这里是文字的抖动",
    ///字符间距
    space: 1.0,
    ///行间距
    runSpace: 10,
    ///文字的样式
    textStyle: TextStyle(
      ///文字的大小
      fontSize: 25,
    ),
    ///抖动次数
    shakeCount: 0,
  ),