Flutter Flutter animation, Flutter animation, Flutter text shake effect

Inscription — the sword of the world, from your accumulation of a little start, and the place, will strive for excellence, that is, toss about every day.

Important message

• Netease Cloud [Play big front end] supporting courses

• EDU tutorial

• The Flutter is developed by accumulating a series of articles

1 Adding a Dependency

This effect is encapsulated as a ShakeAnimationWidget component using the shake_Animation_Widget dependency library directly

The actual project first references the dependencies and adds them through the PUB repository with the following code: Latest version check here

  dependencies:
	 shake_animation_widget: ^1.0. 0Copy the code

To add dependencies on github, click on github.

dependencies:
	shake_animation_widget:
	      git:
	        url: https://github.com/zhaolongs/flutter_shake_animation_widget.git
	        ref: master
Copy the code

Then load the dependency with the following code:

flutter pub get
Copy the code

Then guide the package where it is used, with the following code:

import 'package:shake_animation_widget/shake_animation_widget.dart';
Copy the code

You can then use the ShakeAnimationWidget to animate any Widget using the ShakeAnimationWidget, which can be used in scenarios such as when the user does not enter the password or the verification code is shaken to alert the user, or when the output is incorrect and the password input box is shaken to alert the user.

1 achieve a button jitter

Left and right shaking:

  /// Shake the animation controller
 ShakeAnimationController _shakeAnimationController =
        new ShakeAnimationController();
  /// Build the jitter effect
  ShakeAnimationWidget buildShakeAnimationWidget(a) {
    return ShakeAnimationWidget(
      /// Jitter controller
      shakeAnimationController: _shakeAnimationController,
      /// Micro rotation jitter
      shakeAnimationType: ShakeAnimationType.RoateShake,
      /// Disable jitter
      isForward: false./// The default is 0
      shakeCount: 0./// the jitter range is [0,1]
      shakeRange: 0.2./// Perform the dither animation child Widget
      child: RaisedButton(
        child: Text(
          'test',
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () {
          /// Check whether the shake animation is executing
          if (_shakeAnimationController.animationRunging) {
            /// Stop the shake animation
            _shakeAnimationController.stop();
          } else {
            /// Start the shake animation
            /// The shakeCount parameter is used to set the jitter count
            /// Default to 1 by the controller start method
            _shakeAnimationController.start(shakeCount: 1); }},),); }Copy the code

To determine the type of shake animation, use the shakeAnimationType property, which has the values shown in the table below

ShakeAnimationType. TopBottomShake shake up and down:

2 to achieve the effect of text jitter

The running effect is as follows:

shake_animation_widget

import 'package:flutterbookcode/demo/shake/shake_animation_text.dart';
Copy the code

Using the ShakeTextAnimationWidget, you can shake the text as follows:

 ShakeTextAnimationWidget(
    /// The text you want to set the jitter effect on
    animationString: "Here's the wobble of the text."./// Character spacing
    space: 1.0./ / / line spacing
    runSpace: 10./// The style of the text
    textStyle: TextStyle(
      /// The size of the text
      fontSize: 25,),// The number of jitter times
    shakeCount: 0,),Copy the code