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新增抖動動畫效果，實際應用場景如使用者在登入時未輸入密碼或者驗證碼抖動一下提示使用者，或者是輸出出錯時抖動一下密碼輸入框提示使用者一下。

1 實現一個按鈕的抖動

左右抖動：

程式碼如下：

  ///抖動動畫控制器
 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 斜角抖動：

2 實現文字的抖動效果

執行效果如下：

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,
  ),
複製程式碼