Flutter动画效果插件animated_widgets

Flutter动画效果插件animated_widgets_ns的使用

通过使用AnimatedWidgets，您可以轻松地在屏幕上添加动画效果。这些动画组件优化了MVVM模式，通过更新小部件的enabled值来控制动画的前进或反转。

可用的小部件包括：

TranslationAnimatedWidget
OpacityAnimatedWidget
RotationAnimatedWidget
ScaleAnimatedWidget
SizeAnimatedWidget

例如，在一个按钮上添加TranslationAnimatedWidget，然后激活它以显示该按钮！

TranslationAnimatedWidget(
    enabled: this.displayMyWidget, // 更新此布尔值以控制动画的前进或反转
    values: [
        Offset(0, 200), // 禁用状态值
        Offset(0, 250), // 中间状态值
        Offset(0, 0) // 启用状态值
    ],
    child: /* 您的小部件 */
),

或者使用tween constructor：

RotationAnimatedWidget.tween(
    enabled: this.displayMyWidget, // 更新此布尔值以控制动画的前进或反转
    rotationDisabled: Rotation.degrees(z: 0),
    rotationEnabled: Rotation.degrees(z: 90),
    child: /* 您的小部件 */
),

组合

您可以将这些小部件组合起来使用：

TranslationAnimatedWidget.tween(
    enabled: this.displayMyWidget,
    translationDisabled: Offset(0, 200),
    translationEnabled: Offset(0, 0),
    child:
        OpacityAnimatedWidget.tween(
        enabled: this.displayMyWidget,
        opacityDisabled: 0,
        opacityEnabled: 1,
        child: /* 您的小部件 */
    ),
),

不透明度

使用Stateful Widget示例：

class _StatefulScreenState extends State<StatefulScreen> {

  // 控制不透明度动画是否启动
  bool _display = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: [

          // 将您的小部件包装在OpacityAnimatedWidget中
          OpacityAnimatedWidget.tween(
            opacityEnabled: 1, // 定义起始值
            opacityDisabled: 0, // 定义结束值
            enabled: _display, // 绑定到布尔值
            child: Container(
               height: 200,
               width: 200,
               child: FlutterLogo(
                 style: FlutterLogoStyle.stacked,
               ),
            ),
          ),

          RaisedButton(
            color: Colors.blue,
            child: Text(
              _display ? "隐藏logo" : "显示logo",
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () {
              setState(() {

                // 触发动画
                _display = !_display;

              });
            },
          )
        ],
      ),
    );
  }
}

平移

使用bloc模式示例：

class FirstScreenBloc extends Bloc {
  final _viewState = BehaviorSubject&lt;FirstScreenViewState&gt;.seeded(FirstScreenViewState());
  Observable&lt;FirstScreenViewState&gt; get viewState =&gt; _viewState;

  void onClicked() {
    _viewState.add(FirstScreenViewState(buttonVisible: true));
  }

  void onDismissClicked() {
    _viewState.add(FirstScreenViewState(buttonVisible: false));
  }

  @override
  void dispose() {
    _viewState.close();
  }
}

class FirstScreenViewState {
  final bool buttonVisible;

  const FirstScreenViewState({
    this.buttonVisible = false,
  });
}

class FirstScreenView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bloc = BlocProvider.of&lt;FirstScreenBloc&gt;(context);

    return StreamBuilder&lt;FirstScreenViewState&gt;(
            stream: bloc.viewState,
            builder: (context, snapshot) {

                final viewState = snapshot.data;

                return Stack(
                  fit: StackFit.expand,
                  children: [
                    _buildInputButton(onClicked: () {
                      bloc.onClicked();
                    }),
                    Positioned(
                      bottom: 20,
                      left: 20,
                      right: 20,

                      child: TranslationAnimatedWidget(
                        enabled: viewState.buttonVisible, // 控制动画的前进或反转
                        curve: Curves.easeIn,
                        duration: Duration(seconds: 1),
                        values: [
                          Offset(0, 200),
                          Offset(0, -50),
                          Offset(0, 0),
                        ],
                        child: RaisedButton(
                          onPressed: () {
                            bloc.onDismissClicked();
                          },
                          child: Text("Dismiss"),
                        ),

                      ),
                    ),
                  ],
               );
            }
        );
  }
}

旋转

RotationAnimatedWidget.tween(
    enabled: enabled,
    rotationDisabled: Rotation.deg(),
    rotationEnabled: Rotation.deg(z: 90, x: 80),
    child: /* 您的小部件 */
),

RotationAnimatedWidget.tween(
    enabled: enabled,
    rotation: Rotation.deg(),
    rotationEnabled: Rotation.deg(z: 90, x: 80),
    child: /* 您的小部件 */
),

缩放

ScaleAnimatedWidget.tween(
      enabled: this._enabled,
      duration: Duration(milliseconds: 600),
      scaleDisabled: 0.5,
      scaleEnabled: 1,

      // 您的小部件
      child: Container(
        height: 200,
        width: 200,
        child: FlutterLogo(
          style: FlutterLogoStyle.stacked,
        ),
      ),
    ),

大小

SizeAnimatedWidget(
      enabled: this._enabled,
      duration: Duration(milliseconds: 1500),
      values: [Size(100, 100),  Size(100, 150), Size(200, 150), Size(200, 200)],
      curve: Curves.linear,

      // 您的小部件
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.blue)
        ),
        child: FlutterLogo(
          style: FlutterLogoStyle.stacked,
        ),
      ),
    ),

抖动

ShakeAnimatedWidget(
      enabled: this._enabled,
      duration: Duration(milliseconds: 1500),
      shakeAngle: Rotation.deg(z: 40),
      curve: Curves.linear,
      child: FlutterLogo(
        style: FlutterLogoStyle.stacked,
      ),
    ),

自定义动画

CustomAnimatedWidget(
      enabled: this._enabled,
      duration: Duration(seconds: 3),
      curve: Curves.easeOut,
      builder: (context, percent) { // 对于自定义动画，使用构建器
        final int displayedDate = (2018 * percent).floor();
        return Text(
              "当前年份 : $displayedDate",
              style: TextStyle(color: Colors.blue),
        );
      },
),

Flutter包

动画组件可在以下位置找到： https://pub.dev/packages/animated_widgets_ns

dependencies:
  animated_widgets_ns:

更多关于Flutter动画效果插件animated_widgets_ns的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

更多关于Flutter动画效果插件animated_widgets_ns的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

animated_widgets_ns 是一个用于 Flutter 的动画插件，它提供了一些预定义的动画效果，可以帮助开发者快速实现常见的动画效果。这个插件可以简化动画的实现过程，使得开发者无需手动编写复杂的动画逻辑。

安装

首先，你需要在 pubspec.yaml 文件中添加 animated_widgets_ns 依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_widgets_ns: ^1.1.0

然后运行 flutter pub get 来安装依赖。

使用示例

以下是一些常见的用法示例：

1. 淡入淡出动画 (FadeIn, FadeOut)

import 'package:flutter/material.dart';
import 'package:animated_widgets_ns/animated_widgets_ns.dart';

class FadeInOutExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FadeIn/FadeOut Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FadeInWidget(
              duration: Duration(seconds: 2),
              child: Text('Hello, FadeIn!'),
            ),
            SizedBox(height: 20),
            FadeOutWidget(
              duration: Duration(seconds: 2),
              child: Text('Hello, FadeOut!'),
            ),
          ],
        ),
      ),
    );
  }
}

2. 缩放动画 (ScaleIn, ScaleOut)

import 'package:flutter/material.dart';
import 'package:animated_widgets_ns/animated_widgets_ns.dart';

class ScaleInOutExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScaleIn/ScaleOut Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ScaleInWidget(
              duration: Duration(seconds: 2),
              child: Text('Hello, ScaleIn!'),
            ),
            SizedBox(height: 20),
            ScaleOutWidget(
              duration: Duration(seconds: 2),
              child: Text('Hello, ScaleOut!'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 平移动画 (SlideIn, SlideOut)

import 'package:flutter/material.dart';
import 'package:animated_widgets_ns/animated_widgets_ns.dart';

class SlideInOutExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SlideIn/SlideOut Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SlideInWidget(
              duration: Duration(seconds: 2),
              offset: Offset(100, 0),
              child: Text('Hello, SlideIn!'),
            ),
            SizedBox(height: 20),
            SlideOutWidget(
              duration: Duration(seconds: 2),
              offset: Offset(100, 0),
              child: Text('Hello, SlideOut!'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 旋转动画 (RotateIn, RotateOut)

import 'package:flutter/material.dart';
import 'package:animated_widgets_ns/animated_widgets_ns.dart';

class RotateInOutExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RotateIn/RotateOut Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RotateInWidget(
              duration: Duration(seconds: 2),
              child: Text('Hello, RotateIn!'),
            ),
            SizedBox(height: 20),
            RotateOutWidget(
              duration: Duration(seconds: 2),
              child: Text('Hello, RotateOut!'),
            ),
          ],
        ),
      ),
    );
  }
}

自定义动画

除了使用预定义的动画效果外，你还可以通过设置 AnimatedWidgets 的各种参数来定制动画效果，例如动画持续时间、延迟、曲线等。

FadeInWidget(
  duration: Duration(seconds: 3),
  delay: Duration(seconds: 1),
  curve: Curves.easeInOut,
  child: Text('Custom FadeIn Animation'),
)