Flutter动画效果插件animated_widgets的使用

使用animated_widgets插件可以轻松地在你的Flutter应用中添加动画效果。该插件支持多种动画类型，包括位移、透明度、旋转、缩放、大小变化等。

安装

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

dependencies:
  animated_widgets: ^1.1.0

然后运行flutter pub get来安装该包。

使用示例

OpacityAnimatedWidget

OpacityAnimatedWidget可以用于控制一个子组件的透明度。例如，我们可以创建一个按钮来切换透明度动画的开启与关闭状态。

class _StatefulScreenState extends State<StatefulScreen> {
  bool _display = false;

  [@override](/user/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;
              });
            },
          )
        ],
      ),
    );
  }
}

TranslationAnimatedWidget

TranslationAnimatedWidget可以用于控制一个子组件的位置变化。例如，我们可以创建一个按钮来触发位移动画。

class FirstScreenBloc extends Bloc {
  final _viewState = BehaviorSubject<FirstScreenViewState>.seeded(FirstScreenViewState());
  Observable<FirstScreenViewState> get viewState => _viewState;

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

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

  [@override](/user/override)
  void dispose() {
    _viewState.close();
  }
}

class FirstScreenViewState {
  final bool buttonVisible;

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

class FirstScreenView extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final bloc = BlocProvider.of<FirstScreenBloc>(context);

    return StreamBuilder<FirstScreenViewState>(
      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("取消"),
                ),
              ),
            ),
          ],
        );
      },
    );
  }
}

RotationAnimatedWidget

RotationAnimatedWidget可以用于控制一个子组件的旋转变化。例如，我们可以创建一个按钮来触发旋转动画。

class RotationScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: RotationAnimatedWidget.tween(
        enabled: true,
        rotationDisabled: Rotation.deg(),
        rotationEnabled: Rotation.deg(z: 90, x: 80),
        child: Container(
          height: 200,
          width: 200,
          child: FlutterLogo(style: FlutterLogoStyle.stacked),
        ),
      ),
    );
  }
}

ScaleAnimatedWidget

ScaleAnimatedWidget可以用于控制一个子组件的缩放变化。例如，我们可以创建一个按钮来触发缩放动画。

class ScaleScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: ScaleAnimatedWidget.tween(
        enabled: true,
        duration: Duration(milliseconds: 600),
        scaleDisabled: 0.5,
        scaleEnabled: 1,
        child: Container(
          height: 200,
          width: 200,
          child: FlutterLogo(style: FlutterLogoStyle.stacked),
        ),
      ),
    );
  }
}

SizeAnimatedWidget

SizeAnimatedWidget可以用于控制一个子组件的尺寸变化。例如，我们可以创建一个按钮来触发尺寸动画。

class SizeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: SizeAnimatedWidget(
        enabled: true,
        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

ShakeAnimatedWidget可以用于模拟一个子组件的震动效果。例如，我们可以创建一个按钮来触发震动动画。

class ShakeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: ShakeAnimatedWidget(
        enabled: true,
        duration: Duration(milliseconds: 1500),
        shakeAngle: Rotation.deg(z: 40),
        curve: Curves.linear,
        child: FlutterLogo(style: FlutterLogoStyle.stacked),
      ),
    );
  }
}

CustomAnimatedWidget

CustomAnimatedWidget可以用于创建自定义的动画效果。例如，我们可以创建一个按钮来触发自定义动画。

class CustomScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: CustomAnimatedWidget(
        enabled: true,
        duration: Duration(seconds: 3),
        curve: Curves.easeOut,
        builder: (context, percent) {
          final int displayedDate = (2018 * percent).floor();
          return Text(
            "当前年份 : $displayedDate",
            style: TextStyle(color: Colors.blue),
          );
        },
      ),
    );
  }
}