【Flutter】 五彩纸屑动画效果
老孟Flutter
共 12615字，需浏览 26分钟
·
2021-09-10 23:26
在在这个博客中，我们将「探索 Flutter 中的五彩纸屑动画」。我们将看到如何实现五彩纸屑动画的演示程序，并在您的 flutter 应用程序中使用 「confetti」 包展示多彩的爆炸效果。
confetti 地址：https://pub.dev/packages/confetti
五彩纸屑是屏幕上随处可见的彩色五彩纸屑的效果。控制五彩纸屑的速度、角度、重力和尺寸。下面的demo中当用户点击按钮时，会出现五颜六色的五彩纸屑。
这个演示视频展示了如何在Flutter中创建五彩纸屑动画。它展示了如何在你的 flutter 应用程序中使用「confetti」包来制作五彩纸屑动画。当用户点击按钮时，它会显示五颜六色的五彩纸屑爆炸，然后发生，用户可以处理爆炸类型、角度等。
属性
「ConfettiController」：该属性不能为空。唯一需要的属性是 「ConfettiController」. 「blastDirectionality」：这个属性用于一个枚举，它采用两个值之一——方向性或爆炸性。默认设置为定向。 「shouldLoop」：该属性用于确定emissionDuration 是否会重置，从而导致连续的粒子被发射。 「maxBlastForce」：此属性用于确定在粒子生命的前 5 帧内施加到粒子的最大爆炸力。默认 maxBlastForce 设置为“20”。 「blastDirection」：该属性用于径向值确定粒子发射方向。默认设置为“PI”（180 度）。 PI的值将发射到画布/屏幕的左侧。「numberOfParticles」：此属性用于每次发射时发射。默认设置为“10”。
使用
添加依赖
confetti: ^0.5.5导入
import 'package:confetti/confetti.dart';执行 「flutter packages get」 命令
实现
初始化 「ConfettiController」
ConfettiController controllerTopCenter;
@override
void initState() {
// TODO: implement initState
super.initState();
setState(() {
initController();
});
}
void initController() {
controllerTopCenter =
ConfettiController(duration: const Duration(seconds: 1));
}
创建一个按钮和奖杯图片
SafeArea(
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Image.asset(
"assets/trophy.png",
width: MediaQuery.of(context).size.width*0.5,
height: MediaQuery.of(context).size.height*0.5,
),
],
),
),
buildButton()
],
),
Align buildButton() {
return Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 100),
child: RaisedButton(
onPressed: (){},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
color: Colors.red,
textColor: Colors.white,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Congratulations!",
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
),
),
);
}
创建 「ConfettiWidget」
Align buildConfettiWidget(controller, double blastDirection) {
return Align(
alignment: Alignment.topCenter,
child: ConfettiWidget(
maximumSize: Size(30, 30),
shouldLoop: false,
confettiController: controller,
blastDirection: blastDirection,
blastDirectionality: BlastDirectionality.directional,
maxBlastForce: 20, // set a lower max blast force
minBlastForce: 8, // set a lower min blast force
emissionFrequency: 1,
minBlastForce: 8, // a lot of particles at once
gravity: 1,
),
);
}
点击按钮播放
onPressed: (){
controllerTopCenter.play();
},
完整代码
import 'dart:math';
import 'package:confetti/confetti.dart';
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ConfettiController controllerTopCenter;
@override
void initState() {
// TODO: implement initState
super.initState();
setState(() {
initController();
});
}
void initController() {
controllerTopCenter =
ConfettiController(duration: const Duration(seconds: 1));
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink[50],
appBar: AppBar(
backgroundColor: Colors.cyan,
title: Text("Flutter Confetti Animation Demo"),
automaticallyImplyLeading: false,
),
body: SafeArea(
child: Stack(
children: <Widget>[
buildConfettiWidget(controllerTopCenter, pi / 1),
buildConfettiWidget(controllerTopCenter, pi / 4),
Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Image.asset(
"assets/trophy.png",
width: MediaQuery.of(context).size.width*0.5,
height: MediaQuery.of(context).size.height*0.5,
),
],
),
),
buildButton()
],
),
),
);
}
Align buildButton() {
return Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 100),
child: RaisedButton(
onPressed: (){
controllerTopCenter.play();
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
color: Colors.red,
textColor: Colors.white,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Congratulations!",
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
),
),
);
}
Align buildConfettiWidget(controller, double blastDirection) {
return Align(
alignment: Alignment.topCenter,
child: ConfettiWidget(
maximumSize: Size(30, 30),
shouldLoop: false,
confettiController: controller,
blastDirection: blastDirection,
blastDirectionality: BlastDirectionality.directional,
maxBlastForce: 20, // set a lower max blast force
minBlastForce: 8, // set a lower min blast force
emissionFrequency: 1,
numberOfParticles: 8, // a lot of particles at once
gravity: 1,
),
);
}
}
原文链接：https://medium.com/flutterdevs/explore-confetti-animation-in-flutter-340edbe2951
评论