Flutter动画效果插件flutter_animation_plus的使用

Flutter动画效果插件flutter_animation_plus的使用

概览

flutter_animation_plus 插件提供了一组多样化的动画小部件，旨在增强 Flutter 应用程序的视觉吸引力和互动性。它包含超过15种独特的动画选项，使得开发者能够轻松地将动态效果集成到UI元素中。

安装

要将 flutter_animation_plus 添加到你的 Flutter 项目中，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_animation_plus: ^0.0.7

使用示例

以下是 flutter_animation_plus 中部分动画效果的小部件的使用示例：

BlobAnimation

创建类似液态扭曲的效果，并带有平滑过渡。

BlobAnimation(
  duration: const Duration(seconds: 1), // 动画持续时间
  repeat: false, // 是否重复播放
  child: Text(
    "Blob Animation",
    style: TextStyle(fontSize: 25),
  ),
);

BouncingAnimation

为UI元素添加弹跳效果。

BouncingAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Bouncing Animation",
    style: TextStyle(fontSize: 25),
  ),
);

DistortionAnimation

对UI元素进行扭曲以产生独特的视觉效果。

DistortionAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Distortion Animation",
    style: TextStyle(fontSize: 25),
  ),
);

FadingAnimation

创建平滑的淡入淡出过渡效果。

FadingAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Fading Animation",
    style: TextStyle(fontSize: 25),
  ),
);

FlipAnimation

使UI元素翻转旋转。

FlipAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Flip Animation",
    style: TextStyle(fontSize: 25),
  ),
);

GlitchAnimation

为UI添加闪烁或故障效果。

GlitchAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Glitch Animation",
    style: TextStyle(fontSize: 25),
  ),
);

KaleidoscopeAnimation

创建万花筒般的视觉效果。

KaleidoscopeAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Kaleidoscope Animation",
    style: TextStyle(fontSize: 25),
  ),
);

LiquidSwipeAnimation

模拟液体流动效果，在UI元素之间切换。

LiquidSwipeAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Liquid Swipe Animation",
    style: TextStyle(fontSize: 25),
  ),
);

MorphingAnimation

使UI元素平滑变形。

MorphingAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Morphing Animation",
    style: TextStyle(fontSize: 25),
  ),
);

PulsingAnimation

为UI元素添加脉冲效果。

PulsingAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Pulsing Animation",
    style: TextStyle(fontSize: 25),
  ),
);

RippleAnimation

为交互式UI元素创建涟漪效果。

RippleAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Ripple Animation",
    style: TextStyle(fontSize: 25),
  ),
);

RotationAnimation

使UI元素平滑旋转。

RotationAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Rotation Animation",
    style: TextStyle(fontSize: 25),
  ),
);

ScalingAnimation

使UI元素缩放动画平滑变化。

ScalingAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Scaling Animation",
    style: TextStyle(fontSize: 25),
  ),
);

ShakingAnimation

为UI元素添加震动效果。

ShakingAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Shaking Animation",
    style: TextStyle(fontSize: 25),
  ),
);

SlidingAnimation

使UI元素平滑滑动。

SlidingAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Sliding Animation",
    style: TextStyle(fontSize: 25),
  ),
);

TwistingAnimation

使UI元素扭曲以产生动态外观。

TwistingAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Twisting Animation",
    style: TextStyle(fontSize: 25),
  ),
);

WigglingAnimation

为UI元素添加摆动效果。

WigglingAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Wiggling Animation",
    style: TextStyle(fontSize: 25),
  ),
);

ZoomingAnimation

使UI元素平滑放大或缩小。

ZoomingAnimation(
  duration: const Duration(seconds: 1),
  repeat: false,
  child: Text(
    "Zooming Animation",
    style: TextStyle(fontSize: 25),
  ),
);

结论

flutter_animation_plus 包提供了多种动画小部件，可以让你的 Flutter 应用程序充满活力和互动性。你可以从各种效果中选择，轻松地创建引人入胜的用户体验。

完整示例Demo

下面是完整的示例代码，展示了如何在一个简单的 Flutter 应用中使用 flutter_animation_plus 的部分动画效果。

import 'package:flutter/material.dart';
import 'package:flutter_animation_plus/animations/animations.dart';
import 'package:flutter_animation_plus/flutter_animation_plus.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animation',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ScalingAnimation(
                duration: Duration(seconds: 1),
                repeat: true,
                child: Text(
                  "Scaling Animation",
                  style: TextStyle(fontSize: 25),
                ),
              ),
              SizedBox(
                height: 12,
              ),
              RotationAnimation(
                duration: Duration(seconds: 1),
                repeat: true,
                child: Text(
                  "Rotation Animation",
                  style: TextStyle(fontSize: 25),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}