题记

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

​​github?​​

你可能需要

百度同步




​​知乎​​

​​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 实现一个按钮的抖动

左右抖动：

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

代码如下：

///抖动动画控制器
 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 上下抖动：

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

ShakeAnimationType.RoateShake 旋转抖动：

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

ShakeAnimationType.SkewShake 斜角抖动：

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

3 实现文字的抖动效果

运行效果如下：

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

​​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,
  ),

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