标签：动画 widget ShakeAnimationType 抖动 animation shake 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。