Flutter动画效果插件fade_animation

Flutter动画效果插件fade_animation_delayed的使用

FadeAnimationDelayed 是一个自定义的 Flutter 小部件，它允许你在延迟后以不同的动画方式展示内容。非常适合创建动态且吸引人的用户界面。

特性

可调节的延迟显示内容
多种动画类型，包括淡入、滑动、缩放和旋转
可重复的动画
可控的动画（暂停、恢复和重置）
支持自定义动画

安装

要使用这个包，在 pubspec.yaml 文件中添加依赖：

dependencies:
  fade_animation_delayed: ^0.0.2

然后在 Dart 代码中导入该库：

import 'package:fade_animation_delayed/fade_animation_delayed.dart';

接着你可以在小部件中使用它：

FadeAnimationDelayed(
  delay: Duration(seconds: 1),
  child: Text('Hello, World!'),
)

高级示例

使用多种动画

final GlobalKey<FadeAnimationDelayedState> delayedDisplayKey = GlobalKey<FadeAnimationDelayedState>();

FadeAnimationDelayed(
  stateKey: delayedDisplayKey,
  delay: Duration(seconds: 1),
  fadingDuration: Duration(milliseconds: 500),
  slidingCurve: Curves.easeInOut,
  slidingBeginOffset: Offset(0.0, 0.1),
  enableScaling: true,
  enableRotation: true,
  child: Text('Text with multiple animations'),
)

重复动画

DelayedDisplay(
  delay: Duration(seconds: 1),
  repeat: true,
  repeatInterval: Duration(seconds: 3),
  child: Icon(Icons.favorite),
)

控制动画

final GlobalKey<FadeAnimationDelayedState> delayedDisplayKey = GlobalKey<FadeAnimationDelayedState>();

// 在代码中的某个位置
ElevatedButton(
  onPressed: () => delayedDisplayKey.currentState?.pauseAnimation(),
  child: Text('Pause'),
),
ElevatedButton(
  onPressed: () => delayedDisplayKey.currentState?.resumeAnimation(),
  child: Text('Resume'),
),
ElevatedButton(
  onPressed: () => delayedDisplayKey.currentState?.resetAnimation(),
  child: Text('Reset'),
),

自定义动画

FadeAnimationDelayed(
  customAnimationBuilder: (context, child, animation) {
    return FadeTransition(
      opacity: animation,
      child: Transform(
        transform: Matrix4.rotationZ(animation.value * 2 * pi),
        alignment: Alignment.center,
        child: child,
      ),
    );
  },
  child: Text('Custom Animation'),
)

使用扩展

Center(
  child: const Text(
      "Hello",
      style: TextStyle(fontSize: 40),
  ).animate(
    delay: const Duration(seconds: 1),
    fadeIn: true,
    easingType: EasingType.bounceOut,
    repeat: false,
    repeatInterval: const Duration(seconds: 1),
  ),
)

完整示例

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DelayedDisplay Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const Screen(),
    );
  }
}

class Screen extends StatefulWidget {
  const Screen({super.key});

  [@override](/user/override)
  State<Screen> createState() => _ScreenState();
}

class _ScreenState extends State<Screen> {
  final GlobalKey<FadeAnimationDelayedState> _delayedDisplayKey = GlobalKey<FadeAnimationDelayedState>();
  bool _isVisible = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16.0),
        children: [
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => _delayedDisplayKey.currentState?.pauseAnimation(),
                child: const Text('Pause'),
              ),
              const SizedBox(width: 10),
              ElevatedButton(
                onPressed: () => _delayedDisplayKey.currentState?.resumeAnimation(),
                child: const Text('Resume'),
              ),
              const SizedBox(width: 10),
              ElevatedButton(
                onPressed: () => _delayedDisplayKey.currentState?.resetAnimation(),
                child: const Text('Reset'),
              ),
            ],
          ),
          const SizedBox(height: 20),

          // 示例 1: 从底部到顶部的滑动淡入
          FadeAnimationDelayed(
            delay: const Duration(seconds: 1),
            animationDuration: const Duration(seconds: 2),
            animationType: AnimationType.slideFromOutside,
            slideDirection: SlideDirection.bottomToTop,
            fadeIn: true,
            child: _buildExampleCard('Slide + Fade In (Bottom to Top)'),
          ),

          const SizedBox(height: 20),

          // 示例 2: 缩放动画
          FadeAnimationDelayed(
            // stateKey: _delayedDisplayKey,
            delay: const Duration(seconds: 1),
            animationDuration: const Duration(seconds: 2),
            animationType: AnimationType.zoomIn,
            enableScaling: true,
            minScale: 0.5,
            maxScale: 1.0,
            child: _buildExampleCard('Zoom In Animation'),
          ),

          const SizedBox(height: 20),

          // 示例 3: 旋转动画
          FadeAnimationDelayed(
            stateKey: _delayedDisplayKey,
            delay: const Duration(seconds: 1),
            animationDuration: const Duration(seconds: 2),
            animationType: AnimationType.rotation,
            enableRotation: true,
            minRotation: 0.0,
            maxRotation: 360,
            child: _buildExampleCard('Rotation Animation'),
          ),

          const SizedBox(height: 20),

          // 示例 4: 从左到右的弹跳淡出滑动
          FadeAnimationDelayed(
            delay: const Duration(seconds: 1),
            animationDuration: const Duration(seconds: 2),
            easingType: EasingType.bounceOut,
            animationType: AnimationType.slideFromOutside,
            slideDirection: SlideDirection.leftToRight,
            child: _buildExampleCard('Bounce Out + Slide (Left to Right)'),
          ),

          const SizedBox(height: 20),

          // 示例 5: 弹性淡入
          FadeAnimationDelayed(
            delay: const Duration(milliseconds: 500),
            animationDuration: const Duration(seconds: 3),
            easingType: EasingType.elasticOut,
            animationType: AnimationType.fadeIn,
            minOpacity: 0.2,
            maxOpacity: 1.0,
            child: _buildExampleCard('Elastic Out + Fade In'),
          ),

          const SizedBox(height: 20),

          // 示例 6: 重复的滑动和淡入
          FadeAnimationDelayed(
            delay: const Duration(milliseconds: 500),
            animationDuration: const Duration(seconds: 1),
            repeat: false,
            repeatInterval: const Duration(seconds: 4),
            animationType: AnimationType.slide,
            slideDirection: SlideDirection.topToBottom,
            child: _buildExampleCard('Repeated Slide + Fade (Top to Bottom)'),
          ),

          const SizedBox(height: 20),

          // 示例 7: 自定义动画构建器
          FadeAnimationDelayed(
            delay: const Duration(milliseconds: 500),
            animationDuration: const Duration(seconds: 2),
            customAnimationBuilder: (context, child, animationController) {
              return FadeTransition(
                opacity: Tween<double>(begin: 0.0, end: 1.0).animate(animationController),
                child: ScaleTransition(
                  scale: Tween<double>(begin: 0.5, end: 1.0).animate(animationController),
                  child: child,
                ),
              );
            },
            child: _buildExampleCard('Custom Animation Builder'),
          ),

          Center(
            child: const Text(
              "Hello",
              style: TextStyle(fontSize: 40),
            ).animate(
              delay: const Duration(seconds: 1),
              fadeIn: true,
              easingType: EasingType.bounceOut,
              repeat: false,
              repeatInterval: const Duration(seconds: 1),
            ),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _isVisible = !_isVisible;
              });
            },
            child: Text(_isVisible ? 'Hide' : 'Show'),
          ),
          const SizedBox(height: 20),
          Center(
            child: FadeAnimationDelayed(
              delay: const Duration(milliseconds: 500),
              animationDuration: const Duration(milliseconds: 500),
              fadeIn: _isVisible,
              child: const Text(
                'This text can be hidden or shown',
                style: TextStyle(fontSize: 35),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildExampleCard(String text) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        color: Colors.blueAccent,
        borderRadius: BorderRadius.circular(12.0),
      ),
      child: Center(
        child: Text(
          text,
          textAlign: TextAlign.center,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 18,
          ),
        ),
      ),
    );
  }
}

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

phonegap100 1楼

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

当然，以下是如何在Flutter中使用fade_animation_delayed插件来实现动画效果的代码示例。fade_animation_delayed是一个用于创建延迟淡入动画效果的插件。

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

dependencies:
  flutter:
    sdk: flutter
  fade_animation_delayed: ^2.0.0  # 请确保使用最新版本

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

接下来，在你的Flutter应用中，你可以按照以下示例代码使用FadeAnimationDelayed组件来实现动画效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fade Animation Delayed Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fade Animation Delayed Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用FadeAnimationDelayed实现淡入动画效果
              FadeAnimationDelayed(
                child: Text(
                  'Hello, World!',
                  style: TextStyle(fontSize: 24, color: Colors.black),
                ),
                animationDelay: 1000, // 动画延迟1秒（1000毫秒）
                animationDuration: 500, // 动画持续时间0.5秒（500毫秒）
              ),
              SizedBox(height: 20),
              FadeAnimationDelayed(
                child: Icon(
                  Icons.star,
                  size: 50,
                  color: Colors.amber,
                ),
                animationDelay: 1500, // 动画延迟1.5秒（1500毫秒）
                animationDuration: 500, // 动画持续时间0.5秒（500毫秒）
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含了两个使用FadeAnimationDelayed组件的动画效果：

第一个FadeAnimationDelayed组件用于实现文本的淡入动画效果，动画延迟1秒，持续时间0.5秒。
第二个FadeAnimationDelayed组件用于实现图标的淡入动画效果，动画延迟1.5秒，持续时间0.5秒。

你可以根据需要调整animationDelay和animationDuration的值来实现不同的动画效果。

希望这个示例能够帮助你理解如何在Flutter中使用fade_animation_delayed插件来实现动画效果。如果你有其他问题，欢迎继续提问！