Flutter动画效果插件dt_animate_kit的使用

Flutter动画效果插件dt_animate_kit的使用

dt_animate_kit

dt_animate_kit 是一个用于实现动画效果的 Flutter 插件项目。该项目实现了两种生日烟火效果:

  1. 流星降落效果。
  2. 流星爆炸效果。

Getting Started

使用步骤

  1. pubspec.yaml 文件中添加依赖:

    dependencies:
      dt_animate_kit: ^版本号
  2. 导入相关库并初始化项目。

示例代码

以下是一个完整的示例代码,展示如何在 Flutter 中使用 dt_animate_kit 实现生日烟火效果。

import 'package:dt_animate_kit/birthday_one/birthday_effect_one.dart'; // 引入第一个生日烟火效果
import 'package:dt_animate_kit/birthday_two/birthday_effect_two.dart'; // 引入第二个生日烟火效果
import 'package:dt_animate_kit/birthday_two/birthday_effect_two_single.dart'; // 引入单个流星爆炸效果
import 'package:flutter/material.dart';
import 'dart:async';

// 引入屏幕适配库
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:ui';

void main() {
  runApp(const MyApp()); // 启动应用
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState(); // 初始化状态
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化屏幕适配
    // ScreenUtil.init(context, designSize: Size(window.physicalSize.width, window.physicalSize.height));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 690), // 设置设计尺寸
      builder: (context, child) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: const Text('dt_animate_kit 示例'), // 设置应用标题
            ),
            body: Stack(
              children: [
                // 第一种生日烟火效果
                BirthdayEffectOne(
                  viewHeight: window.physicalSize.height, // 设置视图高度
                  viewWidth: window.physicalSize.width, // 设置视图宽度
                ),
                // 第二种生日烟火效果(多个流星)
                BirthdayEffectTwo(
                  viewHeight: window.physicalSize.height,
                  viewWidth: window.physicalSize.width,
                  startX: 100.w, // 起始X坐标
                  startY: 250.h, // 起始Y坐标
                  delaySec: 0, // 延迟时间
                  startX1: 150.w, // 第二个流星起始X坐标
                  startY1: 200.h, // 第二个流星起始Y坐标
                  delaySec1: 2, // 第二个流星延迟时间
                  startX2: 200.w, // 第三个流星起始X坐标
                  startY2: 150.h, // 第三个流星起始Y坐标
                  delaySec2: 4, // 第三个流星延迟时间
                  durationSec: 2, // 动画持续时间
                ),
                // 单个流星爆炸效果
                BirthdayEffectTwoSingle(
                  viewHeight: window.physicalSize.height,
                  viewWidth: window.physicalSize.width,
                  startX: 200.w, // 起始X坐标
                  startY: 300.h, // 起始Y坐标
                  delaySec: 2, // 延迟时间
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
1 回复

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


dt_animate_kit 是一个 Flutter 动画效果插件,它提供了一些预定义的动画效果,可以帮助开发者快速实现常见的动画效果。以下是如何使用 dt_animate_kit 插件的基本步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 dt_animate_kit 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  dt_animate_kit: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 dt_animate_kit 包:

import 'package:dt_animate_kit/dt_animate_kit.dart';

3. 使用动画效果

dt_animate_kit 提供了多种动画效果,你可以根据需要选择合适的动画效果。以下是一些常见的使用示例:

3.1 淡入淡出动画

class FadeInOutExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fade In/Out Example'),
      ),
      body: Center(
        child: DtFadeInOut(
          child: Text('Hello, World!'),
          duration: Duration(seconds: 2),
          repeat: true,
        ),
      ),
    );
  }
}

3.2 缩放动画

class ScaleExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scale Example'),
      ),
      body: Center(
        child: DtScale(
          child: Text('Hello, World!'),
          duration: Duration(seconds: 2),
          repeat: true,
        ),
      ),
    );
  }
}

3.3 旋转动画

class RotateExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rotate Example'),
      ),
      body: Center(
        child: DtRotate(
          child: Text('Hello, World!'),
          duration: Duration(seconds: 2),
          repeat: true,
        ),
      ),
    );
  }
}

3.4 平移动画

class TranslateExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Translate Example'),
      ),
      body: Center(
        child: DtTranslate(
          child: Text('Hello, World!'),
          duration: Duration(seconds: 2),
          repeat: true,
        ),
      ),
    );
  }
}

4. 自定义动画

dt_animate_kit 还允许你自定义动画效果。你可以通过设置 curvebeginend 等参数来调整动画的行为。

class CustomAnimationExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Animation Example'),
      ),
      body: Center(
        child: DtCustomAnimation(
          child: Text('Hello, World!'),
          duration: Duration(seconds: 2),
          curve: Curves.easeInOut,
          begin: 0.0,
          end: 1.0,
          repeat: true,
        ),
      ),
    );
  }
}

5. 组合动画

你还可以将多个动画效果组合在一起,创建更复杂的动画。

class CombinedAnimationExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Combined Animation Example'),
      ),
      body: Center(
        child: DtCombinedAnimation(
          children: [
            DtFadeInOut(
              child: Text('Fade In/Out'),
              duration: Duration(seconds: 2),
              repeat: true,
            ),
            DtScale(
              child: Text('Scale'),
              duration: Duration(seconds: 2),
              repeat: true,
            ),
          ],
        ),
      ),
    );
  }
}

6. 控制动画

你可以通过 AnimationController 来控制动画的启动、停止、暂停等操作。

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

class _ControlledAnimationExampleState extends State<ControlledAnimationExample> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Controlled Animation Example'),
      ),
      body: Center(
        child: DtControlledAnimation(
          controller: _controller,
          child: Text('Hello, World!'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_controller.isAnimating) {
            _controller.stop();
          } else {
            _controller.repeat();
          }
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!