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

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

github?你可能需要百度同步
CSDN网易云课堂教程掘金
知乎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.LeftRightShake左右抖动
ShakeAnimationType.TopBottomShake上下抖动
ShakeAnimationType.SkewShake斜角抖动
ShakeAnimationType.RoateShake旋转抖动
ShakeAnimationType.RandomShake随机抖动

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

在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页