Flutter抖动动画、颤抖动画、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.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,
  ),

标签：动画,widget,ShakeAnimationType,抖动,animation,shake,Flutter
来源： https://blog.51cto.com/928343994/2841710