Flutter实现红包动画效果的示例代码
作者：天选的打工人
这篇文章主要为大家详细介绍了如何利用Flutter实现红包的动画效果，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以了解一下
前言
红包动画效果实现，如图:
该效果的实现难道其实比较简单，就是基础的平移、旋转和缩放动画，但比较麻烦的就是需要写很多小动画组合，共由11个小动画组合而成。
动画拆解
红包显示动画
红包显示时的动画，由0到1的放大。
late AnimationController controller;
late Animation<double> animation;
///红包展开动画
controller = AnimationController(
duration: const Duration(milliseconds: 200), vsync: this);
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
controller.forward();
});
animation = Tween(begin: 0.0, end: 1.0).animate(controller);红包未开前，平移动画
红包未开前，整体微微上下平移
late AnimationController bgController;
late Animation<Offset> bgAnimation;
///红包背景上下平移动画
bgController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
bgAnimation = Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, -10))
.animate(bgController);红包未开前，”开“按钮缩放动画
"开"按钮缩放动画，由1到0.8，动画循环执行。
late AnimationController openBtController;
late Animation<double> openBtAnimation;
///红包未开时，按钮缩放动画
openBtController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
openBtAnimation = Tween(begin: 1.0, end: 0.8).animate(openBtController);红包开启后，背景光显示动画
开红包后，会显示背景光
late AnimationController openLightScaleController;
late Animation<double> openLightScaleAnimation;
///开红包后，显示背景光
openLightScaleController = AnimationController(
duration: const Duration(milliseconds: 200), vsync: this);
openLightScaleAnimation =
Tween(begin: 0.4, end: 1.0).animate(openLightScaleController);红包开启后，背景光放大动画
开红包后，背景光微微放大1.2倍，动画循环执行。
late AnimationController lightScaleController;
late Animation<double> lightScaleAnimation;
///背景光放大动画，只放大1.2倍
lightScaleController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
lightScaleAnimation =
Tween(begin: 1.0, end: 1.2).animate(lightScaleController);红包开启后，背景光旋转动画
开红包后，背景光微微旋转，只旋转0.02的弧度，动画循环执行。
late AnimationController lightRotateController;
late Animation<double> lightRotateAnimation;
///背景光旋转动画,微微旋转，只旋转0.02的弧度
lightRotateController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
lightRotateAnimation =
Tween(begin: 0.0, end: 0.02).animate(lightRotateController);红包开启后，新背景放大动画
开红包后，原红包背景缩小至不见，新红包背景显示
late AnimationController openController;
late Animation<double> openAnimation;
///开红包 背景放大动画
openController = AnimationController(
duration: const Duration(milliseconds: 200), vsync: this);
openAnimation = Tween(begin: 0.4, end: 1.0).animate(openController);红包开启后，新背景平移动画
开红包后，新背景也微微上下平移
late AnimationController openBgController;
late Animation<Offset> openBgAnimation;
///红包背景上下平移动画
openBgController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
openBgAnimation =
Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, -10))
.animate(openBgController);红包开启后，”立即使用“按钮缩放动画
开红包后，”立即使用“按钮缩放动画，由1到0.9，动画循环执行。
late AnimationController useBtController;
late Animation<double> useBtAnimation;
///立即使用按钮缩放动画
useBtController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
useBtAnimation = Tween(begin: 1.0, end: 0.9).animate(useBtController);红包开启后，金额显示的卡片上移动画
开红包后，显示金额的卡片上移
late final AnimationController offsetTopController; late final Animation<Offset> offsetTopAnimation; ///卡片上移动画 offsetTopController = AnimationController( duration: const Duration(milliseconds: 500), vsync: this, ); offsetTopAnimation = Tween<Offset>( begin: const Offset(0, 0.6), end: const Offset(0, 0), ).animate(CurvedAnimation( parent: offsetTopController, curve: Curves.easeInOutCubic, ));
红包开启后，金额显示的动画
开红包后，金额会从某个数值自增至实际金额数值
late AnimationController priceController;
late Animation<double> priceAnimation;
///金额变换效果
price = widget.price;
double startPrice = 0;
if (price <= 100) {
///小于100的金额从0开始自增
startPrice = 0;
} else {
///大于100的金额对半开始自增
startPrice = price / 2;
}
priceController = AnimationController(
duration: const Duration(milliseconds: 600), vsync: this);
priceAnimation =
Tween(begin: startPrice, end: price).animate(priceController);资源文件
class ImageAssets{
static const String homeIcRed1Webp = 'assets/home/ic-red-1.webp';
static const String homeIcRedBgWebp = 'assets/home/ic-red-bg.webp';
static const String homeIcRedLightWebp = 'assets/home/ic-red-light.webp';
static const String homeIcRedOpenWebp = 'assets/home/ic-red-open.webp';
static const String homeIcRed2BgWebp = 'assets/home/ic-red2-bg.webp';
static const String homeIcRed2BottomWebp = 'assets/home/ic-red2-bottom.webp';
static const String homeIcRed2BtWebp = 'assets/home/ic-red2-bt.webp';
static const String homeIcRed2TopBgWebp = 'assets/home/ic-red2-top-bg.webp';
static const String homeIcRed2TopWebp = 'assets/home/ic-red2-top.webp';
static const String homeIcCloseWhiteWebp = 'assets/home/ic-close-white.webp';
}homeIcRedBgWebp :
homeIcRed1Webp:
homeIcRedLightWebp:
homeIcRedOpenWebp:
homeIcRed2BgWebp:
homeIcRed2BottomWebp:
homeIcRed2BtWebp:
homeIcRed2TopBgWebp:
homeIcRed2TopWebp:
完整代码
项目用到了GetX，需要注意导入。
import 'package:flutter/material.dart';
import 'package:get/get.dart';
///新人红包
class RedEnvelopeDialog extends StatefulWidget {
double price;
RedEnvelopeDialog({Key? key, required this.price}) : super(key: key);
@override
_PageState createState() => _PageState();
}
class _PageState extends State<RedEnvelopeDialog>
with TickerProviderStateMixin {
double width = 0;
double height = 0;
double openSize = 0;
double btBgTopMargin = 0;
double openBgBottomMargin = 0;
double openBgTopMargin = 0;
double openTopBgHeight = 0;
double openBottomBgHeight = 0;
double openTopBgBottomMargin = 0;
double moveHeight = 0;
double openHeight = 0;
double useBtWidth = 0;
late AnimationController controller;
late Animation<double> animation;
late AnimationController openBtController;
late Animation<double> openBtAnimation;
late AnimationController lightScaleController;
late Animation<double> lightScaleAnimation;
late AnimationController lightRotateController;
late Animation<double> lightRotateAnimation;
late AnimationController openLightScaleController;
late Animation<double> openLightScaleAnimation;
late AnimationController bgController;
late Animation<Offset> bgAnimation;
late AnimationController openController;
late Animation<double> openAnimation;
late AnimationController openBgController;
late Animation<Offset> openBgAnimation;
late AnimationController useBtController;
late Animation<double> useBtAnimation;
late final AnimationController offsetTopController;
late final Animation<Offset> offsetTopAnimation;
late AnimationController priceController;
late Animation<double> priceAnimation;
RxBool showOpen = false.obs;
double price = 0;
@override
void initState() {
super.initState();
///根据设计稿比例计算实际数值
width = Get.width - 100;
height = (332 / 273) * width;
openSize = (78 / 332) * height;
btBgTopMargin = (20 / 332) * height;
openHeight = (332 / 273) * width;
openBgBottomMargin = (12 / 273) * width;
openBgTopMargin = (50 / 273) * width;
openTopBgHeight = (194 / 273) * width;
openBottomBgHeight = (189 / 273) * width;
openTopBgBottomMargin = (138 / 273) * width;
moveHeight = (143 / 273) * width;
useBtWidth = (178 / 273) * width;
///红包展开动画
controller = AnimationController(
duration: const Duration(milliseconds: 200), vsync: this);
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
controller.forward();
});
animation = Tween(begin: 0.0, end: 1.0).animate(controller);
///开按钮缩放动画
openBtController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
openBtAnimation = Tween(begin: 1.0, end: 0.8).animate(openBtController);
///背景光显示动画
openLightScaleController = AnimationController(
duration: const Duration(milliseconds: 200), vsync: this);
openLightScaleAnimation =
Tween(begin: 0.4, end: 1.0).animate(openLightScaleController);
///背景光放大动画，只放大1.2倍
lightScaleController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
lightScaleAnimation =
Tween(begin: 1.0, end: 1.2).animate(lightScaleController);
///背景光旋转动画,微微旋转，只旋转0.02的弧度
lightRotateController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
lightRotateAnimation =
Tween(begin: 0.0, end: 0.02).animate(lightRotateController);
///红包背景上下平移动画
bgController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
bgAnimation = Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, -10))
.animate(bgController);
///开红包 背景放大动画
openController = AnimationController(
duration: const Duration(milliseconds: 200), vsync: this);
openAnimation = Tween(begin: 0.4, end: 1.0).animate(openController);
///开红包背景上下平移动画
openBgController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
openBgAnimation =
Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, -10))
.animate(openBgController);
///开按钮缩放动画
useBtController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this)
..repeat(reverse: true);
useBtAnimation = Tween(begin: 1.0, end: 0.9).animate(useBtController);
///卡片上移动画
offsetTopController = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
);
offsetTopAnimation = Tween<Offset>(
begin: const Offset(0, 0.6),
end: const Offset(0, 0),
).animate(CurvedAnimation(
parent: offsetTopController,
curve: Curves.easeInOutCubic,
));
///金额变换效果
price = widget.price;
double startPrice = 0;
if (price <= 100) {
///小于100的金额从0开始自增
startPrice = 0;
} else {
///大于100的金额对半开始自增
startPrice = price / 2;
}
priceController = AnimationController(
duration: const Duration(milliseconds: 600), vsync: this);
priceAnimation =
Tween(begin: startPrice, end: price).animate(priceController);
}
@override
void dispose() {
controller.dispose();
openBtController.dispose();
lightScaleController.dispose();
lightRotateController.dispose();
openLightScaleController.dispose();
bgController.dispose();
openController.dispose();
openBgController.dispose();
useBtController.dispose();
offsetTopController.dispose();
priceController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: Stack(
alignment: Alignment.center,
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
alignment: Alignment.center,
children: [
///背景光
Obx(
() => Visibility(
visible: showOpen.value,
child: AnimatedBuilder(
animation: openLightScaleAnimation,
builder: (context, child) {
return Transform.scale(
scale: openLightScaleAnimation.value,
child: AnimatedBuilder(
animation: lightScaleAnimation,
builder: (context, child) {
return Transform.scale(
scale: lightScaleAnimation.value,
child: AnimatedBuilder(
animation: lightRotateAnimation,
builder: (context, child) {
return Transform.rotate(
angle: lightRotateAnimation.value,
child: Image.asset(
ImageAssets.homeIcRedLightWebp,
width: double.infinity,
fit: BoxFit.fitWidth,
),
);
},
),
);
},
),
);
},
),
),
),
///开红包前
AnimatedBuilder(
animation: animation,
builder: (context, child) {
return Transform.scale(
scale: animation.value,
child: Container(
margin: EdgeInsets.all(50),
child: AnimatedBuilder(
animation: bgAnimation,
builder: (context, child) {
return Transform.translate(
offset: bgAnimation.value,
child: Stack(
children: [
Image.asset(
ImageAssets.homeIcRedBgWebp,
width: double.infinity,
fit: BoxFit.fitWidth,
),
SizedBox(
height: height,
width: width,
child: Column(
children: [
Expanded(
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
"新人见面礼",
style: TextStyle(
fontSize: 30,
color: const Color(
0xFFFFDC81)),
),
SizedBox(
height: 10,
),
Text(
"$priceRellyStr元",
style: TextStyle(
fontSize: 30,
color: const Color(
0xFFFFBB81)),
),
SizedBox(
height: 5,
),
Container(
padding:
EdgeInsets.symmetric(
horizontal: 12,
vertical: 4),
decoration: BoxDecoration(
color: const Color(
0xFFDC1215),
borderRadius:
BorderRadius
.circular(6),
),
child: Text(
"无门槛",
style: TextStyle(
fontSize: 15,
color: const Color(
0xFFFF862F)),
),
)
],
),
flex: 173,
),
Expanded(
child: Stack(
alignment:
Alignment.topCenter,
children: [
Container(
height: double.infinity,
alignment: Alignment
.bottomCenter,
margin: EdgeInsets.only(
bottom: 20),
child: Text(
"新人专享\u3000福利大派送",
style: TextStyle(
fontSize: 14,
color: const Color(
0xFFFF6571)),
),
),
Padding(
padding: EdgeInsets.only(
top: btBgTopMargin),
child: Image.asset(
ImageAssets
.homeIcRed1Webp,
width: double.infinity,
fit: BoxFit.fitWidth,
),
),
GestureDetector(
child: AnimatedBuilder(
animation:
openBtAnimation,
builder:
(context, child) {
return Transform
.scale(
scale:
openBtAnimation
.value,
child: Image.asset(
ImageAssets
.homeIcRedOpenWebp,
width: openSize,
height: openSize,
),
);
},
),
onTap: () {
controller.reverse();
showOpen.value = true;
openController
.forward();
openLightScaleController
.forward();
offsetTopController
.forward()
.whenComplete(() =>
offsetTopController
.stop());
priceController
.forward()
.whenComplete(() =>
priceController
.stop());
},
)
],
),
flex: 159,
)
],
),
)
],
),
);
},
),
));
}),
///开红包后
Obx(() => Visibility(
visible: showOpen.value,
child: AnimatedBuilder(
animation: openAnimation,
builder: (context, child) {
return Transform.scale(
scale: openAnimation.value,
child: AnimatedBuilder(
animation: openBgAnimation,
builder: (context, child) {
return Transform.translate(
offset: openBgAnimation.value,
child: Container(
height: openHeight,
margin: EdgeInsets.all(50),
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Padding(
padding: EdgeInsets.only(
bottom:
openBgBottomMargin,
top: openBgTopMargin),
child: Image.asset(
ImageAssets
.homeIcRed2BgWebp,
width: double.infinity,
fit: BoxFit.fitWidth,
),
),
Padding(
padding: EdgeInsets.only(
bottom:
openTopBgBottomMargin),
child: SlideTransition(
position:
offsetTopAnimation,
child: Stack(
alignment:
Alignment.center,
children: [
Image.asset(
ImageAssets
.homeIcRed2TopBgWebp,
height:
openTopBgHeight,
fit:
BoxFit.fitWidth,
),
Container(
height:
openTopBgHeight,
width: double
.infinity,
alignment:
Alignment
.center,
child: Column(
mainAxisAlignment:
MainAxisAlignment
.center,
crossAxisAlignment:
CrossAxisAlignment
.center,
children: [
Expanded(
child:
Column(
children: [
Stack(
alignment:
Alignment.center,
children: [
Image.asset(
ImageAssets.homeIcRed2TopWebp,
height: (30 / 273) * width,
fit: BoxFit.fitHeight,
),
Container(
width: (184 / 273) * width,
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 8),
child: Text(
"开门红包",
style: TextStyle(
fontSize: 16,
color: const Color(0xFFBA683D),
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
)
],
),
Expanded(
child:
Container(
alignment:
Alignment.center,
child:
Row(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
AnimatedBuilder(
animation: priceController,
builder: (BuildContext context, Widget? child) {
return Text(
priceStr,
style: TextStyle(fontSize: 48, color: const Color(0xFFF30313), height: 1, fontWeight: FontWeight.bold),
);
},
),
Text(
'元',
style: TextStyle(fontSize: 20, height: 2, color: Color(0xFF141414)),
)
],
),
))
],
),
flex: 128,
),
Expanded(
child:
Column(
children: [
Expanded(
child:
Container(
alignment:
Alignment.bottomCenter,
child: Text("永久有效",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
color: const Color(0xFF8A8A8A),
height: 1,
)),
),
flex:
2,
),
Expanded(
child:
const SizedBox(),
flex:
3,
)
],
),
flex: 65,
)
],
))
],
)),
),
Image.asset(
ImageAssets
.homeIcRed2BottomWebp,
width: double.infinity,
fit: BoxFit.fitWidth,
),
Column(
children: [
Expanded(
child: const SizedBox(),
flex: 143,
),
Expanded(
child: Container(
alignment:
Alignment.center,
child: Column(
mainAxisAlignment:
MainAxisAlignment
.center,
children: [
SizedBox(
height: 20),
AnimatedBuilder(
animation:
useBtAnimation,
builder:
(context,
child) {
return Transform.scale(
scale: useBtAnimation.value,
child: GestureDetector(
onTap: () {
//todo 点击事件
},
child: Stack(
alignment: Alignment.center,
children: [
Image.asset(
ImageAssets.homeIcRed2BtWebp,
width: useBtWidth,
fit: BoxFit.fitWidth,
),
Text("立即领取", style: TextStyle(fontSize: 16, color: const Color(0xFFFFF0E1))),
],
)));
}),
SizedBox(
height: ((30 /
273) *
width),
),
Text(
"可在“我的-优惠券”中查看",
style: TextStyle(
fontSize:
12,
color: const Color(
0xFFFF6571)),
),
],
)),
flex: 189,
),
],
)
],
),
));
}));
})))
],
)
],
),
//关闭按钮
GestureDetector(
onTap: () {
Get.back();
},
child: Container(
margin: EdgeInsets.only(bottom: height * 1.5, left: width),
child: Image.asset(
ImageAssets.homeIcCloseWhiteWebp,
width: 21,
height: 21,
),
))
],
),
);
}
///金额数值变化
String get priceStr {
if (price % 1 == 0) {
return (priceAnimation.value.toInt()).toString();
} else {
return priceAnimation.value.toStringAsFixed(2);
}
}
///小数据点后没有尾数则不显示
String get priceRellyStr {
if (price % 1 == 0) {
return (price.toInt()).toString();
} else {
String pr = price.toStringAsFixed(2);
if (pr.endsWith("0")) {
return pr.substring(0, pr.length - 1);
}
return price.toStringAsFixed(2);
}
}
}以上就是Flutter实现红包动画效果的示例代码的详细内容，更多关于Flutter红包动画的资料请关注脚本之家其它相关文章！