【Flutter】 五彩纸屑动画效果
老孟Flutter
共 12615字,需浏览 26分钟
· 2021-09-10
在在这个博客中,我们将「探索 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
评论
用 Shader 实现旗帜飘扬动画效果
我觉得对于刚入门 3D 编程的朋友来说,如果能够完成代码创建模型数据->创建材质->编写Shader动画这一系列,想必会有满满的成就感。今天就用 Cocos Creator 的 utils.MeshUtils.createMesh 接口,带大家感受一下这个流程。这个流程不仅可以用于新手学
COCOS
2
全新 SOTA backbone | 2024年了,再见ViT系列Backbone,实数难得,不知道效果如何?
点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达在构建用于精确匹配的深度固定长度表示时,确定指纹上的密集特征点,特别是在像素 Level 上,具有重大意义。为了探索指纹匹配的可解释性,作者提出了一种多阶段可解释的指纹匹配网络,名为通过视觉 Transformer 进行指纹匹配的
小白学视觉
10
文献分享 | 体外冲击波+本体感觉训练治疗「运动创伤性踝关节炎」患者的效果分析
■ 近年来,国内患有运动创伤性踝关节炎患者的数量在逐年增加,患者主要为青壮年。在日常生活与工作中,不健康运动方式或者运动过度,都会对踝关节健康造成危害。■ 运动创伤性踝关节炎在临床上还被称为足球踝,该病症大多数是运动员踝关节出现急性损伤后,过早负重,韧带因为尚未修复
乐普医疗AI
0
Cocos Creator 3.8 中实现割绳子游戏物理效果
游戏录屏 引言 近日,笔者在某个砍树游戏的广告中看到一个非常有趣的割绳子小游戏,据说这个砍树游戏也是用Cocos引擎开发的,出于好奇,研究了下如何在Cocos Creator 3.8 中简单地实现一下割绳子游戏效果。 其实割...
COCOS
0
【每日一练】306—HTML、CSS和JS实现一款简易风时钟效果
作者 | 杨小爱 写在前面 关于时钟的效果,我们前面刚刚写过一期,《【每日一练】304—用 HTML、CSS和JavaScript 实现一款时钟效果》那是一个圆形钟表的效果,今天我们再来写一款,这个风格比较简易,就是纯数字时钟,...
web前端开发
0
提升LLM效果时最具挑战性的问题和值得研究的方向
提升LLM效果时最具挑战性的问题和值得研究的方向作者:swtheking原文地址:https://zhuanlan.zhihu.com/p/682824684AGI的本质还是期待能获得一个无所不能的大语言模型,在这一年里我也是在这个领域探索和成长。在真...
DayNightStudy
0
Flutter 3.13 之后如何监听 App 生命周期事件
在 Flutter 中,您可以监听多个生命周期事件来处理应用程序的不同状态,但今天我们将讨论 didChangeAppLifecycleState 事件。每当应用程序的生命周期状态发生变化时,就会触发此事件。可能的状态有 resumed 、 inact...
前端全栈开发者
0
一篇文章教会你使用JS+CSS实现一个简单加载进度条的效果
点击上方“前端进阶学习交流”,进行关注回复“前端”即可获赠前端相关学习资料今日鸡汤老至居人下,春归在客先。大家好,我是前端进阶者,今天给大家来做个小项目,一起来看看吧~一、前言我们经常在网页上 ,游戏界面加...
前端进阶学习交流
0