抖音的點(diǎn)贊效果在第一次看到的時(shí)候宴咧，總有一種眼前一亮的感覺(jué)。一邊看視頻径缅，還能在視頻上點(diǎn)贊掺栅，而且整個(gè)屏幕都能夠點(diǎn)贊烙肺，并伴隨動(dòng)畫(huà)，還是很炫酷的氧卧。今天我們用Flutter來(lái)實(shí)現(xiàn)一下這個(gè)效果桃笙。效果圖如下：
????????????????????????????????????????????????????
分析效果
- 1.整個(gè)控件可以點(diǎn)擊，控件可以鋪滿屏幕沙绝，點(diǎn)贊效果在子部件之上搏明。
- 2.可以實(shí)現(xiàn)單擊
- 3.連擊的情況下，呈現(xiàn)紅心的動(dòng)畫(huà)效果闪檬，并且有紅心疊加
- 4.動(dòng)畫(huà)的位置會(huì)隨著手指的點(diǎn)擊位置改變
思路
1.通過(guò)GestureDetector來(lái)監(jiān)控手勢(shì)星著，在手指抬起的時(shí)候記錄時(shí)間毫秒值，手指再次按下時(shí)谬以，通過(guò)獲取到毫秒值與之前的時(shí)間毫秒值的差值强饮，來(lái)判斷是單擊還是呈現(xiàn)紅心動(dòng)畫(huà)效果。
2.使用Stack部件來(lái)確定視圖層級(jí)为黎，比如說(shuō)如果要在視頻視圖上實(shí)現(xiàn)點(diǎn)贊效果的話邮丰，視頻視圖部件就作為子部件，置于下層铭乾。
3.我們可以看到紅心的動(dòng)畫(huà)效果不是一個(gè)個(gè)的去執(zhí)行剪廉，而是根據(jù)手指的點(diǎn)擊位置和時(shí)間去執(zhí)行。怎么實(shí)現(xiàn)這樣的需求呢炕檩？我們可以使用列表來(lái)存儲(chǔ)手指點(diǎn)擊的位置斗蒋，通過(guò)遍歷的方式獲取列表的位置，并在對(duì)應(yīng)的位置上執(zhí)行動(dòng)畫(huà)笛质，同時(shí)從列表中刪除這個(gè)位置泉沾。
至于動(dòng)畫(huà)，我們可以通過(guò)Flutter提供的動(dòng)畫(huà)小部件去實(shí)現(xiàn)妇押。
實(shí)現(xiàn)
1.對(duì)外公開(kāi)的參數(shù)
通過(guò)繼承StatefuleWidget來(lái)實(shí)現(xiàn)自定義部件跷究。
類：LikeGestureWidget
const LikeGestureWidget({
Key? key,
required this.child,
this.onAddFavorite,
this.onSingleTap,
}) : super(key: key);
final Function? onAddFavorite;//添加愛(ài)心的回調(diào)
final Function? onSingleTap;//單擊的回調(diào)
final Widget child;//子部件
2.聲明需要的對(duì)象
在_LikeGestureWidgetState中聲明需要的對(duì)象
類：_LikeGestureWidgetState
GlobalKey _key = GlobalKey();//用于位置的計(jì)算
List<Offset> icons = [];//存儲(chǔ)點(diǎn)擊位置
int lastMilliSeconds = -1;//記錄上次手指抬起的時(shí)間毫秒值
3.手勢(shì)的處理
我們通過(guò)GestureDetector來(lái)監(jiān)聽(tīng)手指按下和抬起的事件。
使用lastMilliSeconds記錄抬起時(shí)的時(shí)間毫秒值敲霍，在onTapDown回調(diào)的時(shí)候俊马，獲取當(dāng)前的時(shí)間毫秒值，通過(guò)抬起和按下的時(shí)間差值肩杈，我們?cè)O(shè)定判斷條件柴我。這里如果差值小于500毫秒，就向列表中添加此時(shí)手指點(diǎn)擊的位置扩然，如果大于500毫秒就是單擊事件艘儒，同時(shí)重建UI。
GestureDetector是最外層的部件，既控制手勢(shì)的點(diǎn)贊效果彤悔，同時(shí)也控制布局嘉抓。使用Stack作為GestureDetector的子部件，Stack是層疊式布局晕窑，將外部的部件至于小紅心動(dòng)畫(huà)視圖的下面抑片。
類：_LikeGestureWidgetState
@override
Widget build(BuildContext context) {
return GestureDetector(
key: _key,
onTapDown: (detail) {
setState(() {
//獲取當(dāng)前時(shí)間的毫秒值
int currentMilliSeconds = DateTime.now().millisecondsSinceEpoch;
//計(jì)算當(dāng)前時(shí)間毫秒值與上次抬起時(shí)間的差值
int diff = currentMilliSeconds - lastMilliSeconds;
//如果差值小于500毫秒，就向列表中添加此時(shí)手指點(diǎn)擊的位置杨赤，如果大于500毫秒就是單擊事件
if(diff < 500){
icons.add(_convertPosition(detail.globalPosition));
widget.onAddFavorite?.call();
}else{
widget.onSingleTap?.call();
}
});
},
onTapUp: (detail) {
//手指抬起時(shí)的時(shí)間毫秒值
lastMilliSeconds = DateTime.now().millisecondsSinceEpoch;
},
child: Stack(
children: <Widget>[
//外部的部件敞斋，至于動(dòng)畫(huà)的下面
widget.child,
//小紅心動(dòng)畫(huà)效果
_getIconStack(),
],
),
);
}
// 將給定的點(diǎn)從邏輯像素的全局坐標(biāo)系統(tǒng)轉(zhuǎn)換為此部件的局部坐標(biāo)系統(tǒng)。
Offset _convertPosition(Offset p) {
RenderBox getBox = _key.currentContext!.findRenderObject() as RenderBox;
return getBox.globalToLocal(p);
}
4.動(dòng)畫(huà)小紅心的布局
好了疾牲，我們現(xiàn)在安排小紅心動(dòng)效植捎。小紅心是可以層疊顯示的，所以這里還是使用Stack部件來(lái)作為小紅心的父布局阳柔。遍歷列表icons來(lái)創(chuàng)建Stack的子部件焰枢。
類：_LikeGestureWidgetState
_getIconStack() {
return Stack(
children: icons.map<Widget>(
(position) => TikTokFavoriteAnimationIcon(
key: Key(position.toString()),
position: position,
onAnimationStart: () {
icons.remove(position);
},
),
).toList(),
);
}
5.小紅心動(dòng)效
我們將小紅心的動(dòng)效提取成一個(gè)單獨(dú)的部件TikTokFavoriteAnimationIcon，構(gòu)造函數(shù)如下:
類：TikTokFavoriteAnimationIcon
final Offset? position;//位置
final double size;//圖標(biāo)大小
final Function? onAnimationStart;//動(dòng)畫(huà)開(kāi)始的回調(diào)
const TikTokFavoriteAnimationIcon({
Key? key,
this.onAnimationStart,
this.position,
this.size: 160,
}) : super(key: key);
_TikTokFavoriteAnimationIconState中聲明動(dòng)畫(huà)控制器舌剂，以及小紅心的旋轉(zhuǎn)角度济锄，每一次setState的時(shí)候，旋轉(zhuǎn)角度都會(huì)隨機(jī)生成霍转。
類：_TikTokFavoriteAnimationIconState
//動(dòng)畫(huà)控制器
AnimationController? _animationController;
//圖標(biāo)的旋轉(zhuǎn)角度荐绝，隨機(jī)
double rotate = pi / 10.0 * (2 * Random().nextDouble() - 1);
@override
void initState() {
_animationController = AnimationController(
lowerBound: 0,
upperBound: 1,
duration: Duration(milliseconds: 1000),
vsync: this,
);
_animationController!.addListener(() {
setState(() {});
});
startAnimation();
super.initState();
}
開(kāi)始動(dòng)畫(huà)的時(shí)候，我們就要將動(dòng)畫(huà)的位置刪除避消，
//開(kāi)始動(dòng)畫(huà),動(dòng)畫(huà)一執(zhí)行低滩，就從列表里刪除動(dòng)畫(huà)對(duì)應(yīng)的位置
startAnimation() async {
await _animationController!.forward();
widget.onAnimationStart?.call();
}
小紅心在布局中的位置，我們?cè)趺磥?lái)顯示呢岩喷？之前我們使用了Stack部件作為布局恕沫，這個(gè)就簡(jiǎn)單了，使用Position部件可以準(zhǔn)確的確定小紅心的位置纱意，我們也可以控制小紅心在手指按下位置的偏移昏兆。
@override
Widget build(BuildContext context) {
return widget.position == null
? Container()
: Positioned(
left: widget.position!.dx - widget.size /2,
top: widget.position!.dy - widget.size ,
child: _getBody(),
);
}
小紅心的動(dòng)效有旋轉(zhuǎn)、不透明度妇穴、縮放這三種效果，以及漸變的效果隶债。
_getBody() {
return Transform.rotate(
angle: rotate,
child: Opacity(
opacity: opacity,
child: Transform.scale(
alignment: Alignment.bottomCenter,
scale: scale,
child: _getContent(),
),
),
);
}
//獲取動(dòng)畫(huà)的值
double get value => _animationController!.value;
//獲取動(dòng)畫(huà)的不透明度
double get opacity {
if (value < 0.1) {
return 0.9 / 0.1 * value;
}
if (value < 0.8) {
return 0.9;
}
var res = 0.9 - (value - 0.8) / (1 - 0.8);
return res < 0 ? 0 : res;
}
//獲取動(dòng)畫(huà)的縮放比例
double get scale {
if(value <= 0.5){
return 0.6+value / 0.5 * 0.5;
}else if(value<=0.8){
return 1.1 * (1/1.1 + (1.1 -1)/1.1 * (value - 0.8) / 0.25);
}else {
return 1 + (value - 0.8)/0.2 * 0.5;
}
}
_getContent() {
return ShaderMask(
child: _getChild(),
blendMode: BlendMode.srcATop,
shaderCallback: (Rect bounds) => RadialGradient(
center: Alignment.topLeft.add(Alignment(0.5, 0.5)),
colors: [
Color(0xffEF6F6F),
Color(0xffF03E3E),
],
).createShader(bounds),
);
}
//圖標(biāo)
_getChild() {
return Icon(Icons.favorite_rounded,size: widget.size,);
}
使用效果
????????????????????????????????????????????????????源碼
源碼在開(kāi)源項(xiàng)目中腾它，類名：LikeGestureWidget.
