Flutter动画效果插件widget_animation的使用

本README描述了该插件。如果您将此插件发布到pub.dev，则此README的内容将出现在您的插件页面上。

功能

• 单个Widget展示动画
• 多个Widget列表展示动画

开始使用

dependencies:
  widget_animation: ^0.0.2

使用方法

SingleWidgetAnimation(
  animationDuration: const Duration(seconds: 2),
  delayStart: const Duration(seconds: 6),
  child: child
);

完整示例

以下是使用widget_animation插件的完整示例：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 此部件是应用的根部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Widget Animation Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final TextStyle style = const TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示动画文本
            SingleWidgetAnimation(
              child: Text(
                '显示动画',
                key: const Key("显示动画"),
                style: style,
              ),
            ),
            const SizedBox(height: 10),
            // 延迟显示动画文本
            SingleWidgetAnimation(
              delayStart: const Duration(seconds: 1),
              child: Text(
                '延迟显示动画',
                key: const Key("延迟显示动画"),
                style: style,
              ),
            ),
            const SizedBox(height: 10),
            // 水平方向动画文本
            SingleWidgetAnimation(
              direction: Direction.horizontal,
              child: Text(
                '水平方向动画',
                key: const Key("水平方向动画"),
                style: style,
              ),
            ),
            const SizedBox(height: 10),
            // 较大偏移量动画文本
            SingleWidgetAnimation(
              offset: 5,
              delayStart: const Duration(seconds: 3),
              child: Text(
                '较大偏移量',
                key: const Key('较大偏移量'),
                style: style,
              ),
            ),
            const SizedBox(height: 10),
            // 水平较大偏移量动画文本
            SingleWidgetAnimation(
              offset: 5,
              delayStart: const Duration(seconds: 4),
              direction: Direction.horizontal,
              child: Text(
                '水平较大偏移量',
                key: const Key('水平较大偏移量'),
                style: style,
              ),
            ),
            const SizedBox(height: 10),
            // 弹跳曲线动画文本
            SingleWidgetAnimation(
              delayStart: const Duration(seconds: 5),
              curve: Curves.bounceIn,
              direction: Direction.horizontal,
              offset: -0.2,
              child: Text(
                '弹跳曲线动画',
                key: const Key('弹跳曲线动画'),
                style: style,
              ),
            ),
            const SizedBox(height: 10),
            // 慢动作动画文本
            SingleWidgetAnimation(
              animationDuration: const Duration(seconds: 2),
              delayStart: const Duration(seconds: 6),
              child: Text(
                '慢动作',
                key: const Key('慢动作'),
                style: style,
              ),
            ),
          ],
        ),
      ),
    );
  }
}