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