Flutter动画效果插件animated_widgets_flutter的使用

animated_widgets_flutter 是一个用于在Flutter应用中轻松添加动画效果的插件。该插件基于另一个名为 Animated_widgets 的包，并进行了一些修复和优化。

通过 animated_widgets_flutter 插件，你可以轻松地为屏幕上的各种控件添加动画效果。支持的动画类型包括平移 (TranslationAnimatedWidget)、透明度 (OpacityAnimatedWidget)、旋转 (RotationAnimatedWidget)、缩放 (ScaleAnimatedWidget) 和大小 (SizeAnimatedWidget) 等。

示例代码

以下是一个完整的示例代码，展示了如何使用 animated_widgets_flutter 插件来实现不同类型的动画效果。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _display = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动画效果示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 平移动画
            TranslationAnimatedWidget(
              enabled: _display,
              values: [
                Offset(0, 200), // 禁用时的位置
                Offset(0, 0), // 启用时的位置
              ],
              child: Container(
                height: 100,
                width: 100,
                color: Colors.blue,
                child: Center(child: Text('平移动画')),
              ),
            ),
            SizedBox(height: 20),
            // 透明度动画
            OpacityAnimatedWidget(
              enabled: _display,
              opacityEnabled: 1.0, // 启用时的透明度
              opacityDisabled: 0.0, // 禁用时的透明度
              child: Container(
                height: 100,
                width: 100,
                color: Colors.red,
                child: Center(child: Text('透明度动画')),
              ),
            ),
            SizedBox(height: 20),
            // 旋转动画
            RotationAnimatedWidget(
              enabled: _display,
              rotationEnabled: Rotation.deg(z: 90), // 启用时的角度
              child: Container(
                height: 100,
                width: 100,
                color: Colors.green,
                child: Center(child: Text('旋转动画')),
              ),
            ),
            SizedBox(height: 20),
            // 缩放动画
            ScaleAnimatedWidget(
              enabled: _display,
              scaleEnabled: 1.5, // 启用时的缩放比例
              scaleDisabled: 1.0, // 禁用时的缩放比例
              child: Container(
                height: 100,
                width: 100,
                color: Colors.yellow,
                child: Center(child: Text('缩放动画')),
              ),
            ),
            SizedBox(height: 20),
            // 大小动画
            SizeAnimatedWidget(
              enabled: _display,
              values: [Size(100, 100), Size(200, 200)], // 启用和禁用时的尺寸
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black),
                ),
                child: Center(child: Text('大小动画')),
              ),
            ),
            SizedBox(height: 20),
            // 自定义动画
            CustomAnimatedWidget(
              enabled: _display,
              duration: Duration(seconds: 3),
              curve: Curves.easeOut,
              builder: (context, percent) {
                return Text(
                  '当前值: ${percent.toStringAsFixed(2)}',
                  style: TextStyle(fontSize: 20),
                );
              },
            ),
            SizedBox(height: 20),
            // 触发动画按钮
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _display = !_display;
                });
              },
              child: Text(_display ? '隐藏动画' : '显示动画'),
            ),
          ],
        ),
      ),
    );
  }
}