Flutter动画效果插件dt_animate_kit的使用
Flutter动画效果插件dt_animate_kit的使用
dt_animate_kit
dt_animate_kit
是一个用于实现动画效果的 Flutter 插件项目。该项目实现了两种生日烟火效果:
- 流星降落效果。
- 流星爆炸效果。
Getting Started
使用步骤
-
在
pubspec.yaml
文件中添加依赖:dependencies: dt_animate_kit: ^版本号
-
导入相关库并初始化项目。
示例代码
以下是一个完整的示例代码,展示如何在 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
还允许你自定义动画效果。你可以通过设置 curve
、begin
、end
等参数来调整动画的行为。
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),
),
);
}
}