Flutter實現抖音點贊效果
效果圖如下：
分析效果
1.整個控件可以點擊，控件可以鋪滿屏幕，點贊效果在子部件之上。
2.可以實現單擊
3.連擊的情況下，呈現紅心的動畫效果，并且有紅心疊加
4.動畫的位置會隨著手指的點擊位置改變
思路
1.通過GestureDetector來監(jiān)控手勢，在手指抬起的時候記錄時間毫秒值，手指再次按下時，通過獲取到毫秒值與之前的時間毫秒值的差值，來判斷是單擊還是呈現紅心動畫效果。
2.使用Stack部件來確定視圖層級，比如說如果要在視頻視圖上實現點贊效果的話，視頻視圖部件就作為子部件，置于下層。
3.我們可以看到紅心的動畫效果不是一個個的去執(zhí)行，而是根據手指的點擊位置和時間去執(zhí)行。怎么實現這樣的需求呢？我們可以使用列表來存儲手指點擊的位置，通過遍歷的方式獲取列表的位置，并在對應的位置上執(zhí)行動畫，同時從列表中刪除這個位置。
至于動畫，我們可以通過Flutter提供的動畫小部件去實現。
實現
1.對外公開的參數
通過繼承StatefuleWidget來實現自定義部件。
類：LikeGestureWidget
const LikeGestureWidget({
Key? key,
required this.child,
this.onAddFavorite,
this.onSingleTap,
}) : super(key: key);
final Function? onAddFavorite;//添加愛心的回調
final Function? onSingleTap;//單擊的回調
final Widget child;//子部件
2.聲明需要的對象
在_LikeGestureWidgetState中聲明需要的對象
類：_LikeGestureWidgetState GlobalKey _key = GlobalKey();//用于位置的計算 List<Offset> icons = [];//存儲點擊位置 int lastMilliSeconds = -1;//記錄上次手指抬起的時間毫秒值
3.手勢的處理
我們通過GestureDetector來監(jiān)聽手指按下和抬起的事件。
使用lastMilliSeconds記錄抬起時的時間毫秒值，在onTapDown回調的時候，獲取當前的時間毫秒值，通過抬起和按下的時間差值，我們設定判斷條件。這里如果差值小于500毫秒，就向列表中添加此時手指點擊的位置，如果大于500毫秒就是單擊事件，同時重建UI。
GestureDetector是最外層的部件，既控制手勢的點贊效果，同時也控制布局。使用Stack作為GestureDetector的子部件，Stack是層疊式布局，將外部的部件至于小紅心動畫視圖的下面
類：_LikeGestureWidgetState
@override
Widget build(BuildContext context) {
return GestureDetector(
key: _key,
onTapDown: (detail) {
setState(() {
//獲取當前時間的毫秒值
int currentMilliSeconds = DateTime.now().millisecondsSinceEpoch;
//計算當前時間毫秒值與上次抬起時間的差值
int diff = currentMilliSeconds - lastMilliSeconds;
//如果差值小于500毫秒，就向列表中添加此時手指點擊的位置，如果大于500毫秒就是單擊事件
if(diff < 500){
icons.add(_convertPosition(detail.globalPosition));
widget.onAddFavorite?.call();
}else{
widget.onSingleTap?.call();
}
});
},
onTapUp: (detail) {
//手指抬起時的時間毫秒值
lastMilliSeconds = DateTime.now().millisecondsSinceEpoch;
},
child: Stack(
children: <Widget>[
//外部的部件，至于動畫的下面
widget.child,
//小紅心動畫效果
_getIconStack(),
],
),
);
}
// 將給定的點從邏輯像素的全局坐標系統(tǒng)轉換為此部件的局部坐標系統(tǒng)。
Offset _convertPosition(Offset p) {
RenderBox getBox = _key.currentContext!.findRenderObject() as RenderBox;
return getBox.globalToLocal(p);
}
4.動畫小紅心的布局
好了，我們現在安排小紅心動效。小紅心是可以層疊顯示的，所以這里還是使用Stack部件來作為小紅心的父布局。遍歷列表icons來創(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.小紅心動效
我們將小紅心的動效提取成一個單獨的部件TikTokFavoriteAnimationIcon，構造函數如下:
類：TikTokFavoriteAnimationIcon
final Offset? position;//位置
final double size;//圖標大小
final Function? onAnimationStart;//動畫開始的回調
const TikTokFavoriteAnimationIcon({
Key? key,
this.onAnimationStart,
this.position,
this.size: 160,
}) : super(key: key);
_TikTokFavoriteAnimationIconState中聲明動畫控制器，以及小紅心的旋轉角度，每一次setState的時候，旋轉角度都會隨機生成。
類：_TikTokFavoriteAnimationIconState
//動畫控制器
AnimationController? _animationController;
//圖標的旋轉角度，隨機
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();
}
開始動畫的時候，我們就要將動畫的位置刪除，
//開始動畫,動畫一執(zhí)行，就從列表里刪除動畫對應的位置
startAnimation() async {
await _animationController!.forward();
widget.onAnimationStart?.call();
}
小紅心在布局中的位置，我們怎么來顯示呢？之前我們使用了Stack部件作為布局，這個就簡單了，使用Position部件可以準確的確定小紅心的位置，我們也可以控制小紅心在手指按下位置的偏移。
@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(),
);
}
小紅心的動效有旋轉、不透明度、縮放這三種效果，以及漸變的效果。
_getBody() {
return Transform.rotate(
angle: rotate,
child: Opacity(
opacity: opacity,
child: Transform.scale(
alignment: Alignment.bottomCenter,
scale: scale,
child: _getContent(),
),
),
);
}
//獲取動畫的值
double get value => _animationController!.value;
//獲取動畫的不透明度
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;
}
//獲取動畫的縮放比例
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),
);
}
//圖標
_getChild() {
return Icon(Icons.favorite_rounded,size: widget.size,);
}
使用效果
源碼
源碼在開源項目中，類名：LikeGestureWidget.
以上就是Flutter實現抖音點贊效果的詳細內容，更多關于Flutter 抖音點贊效果的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了解決Android原生定位的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-02-02
Android編程實現ListView滾動提示等待框功能示例
這篇文章主要介紹了Android編程實現ListView滾動提示等待框功能,結合實例形式分析了Android ListView滾動事件相關實現技巧,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細介紹了Android?studio實現app登錄界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了Android路由框架Router分析詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細介紹了Android控件Chronometer定時器的實現方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了Android HandlerThread使用方法詳解的相關資料,通過本文希望能幫助到大家，讓大家掌握理解這部分內容，需要的朋友可以參考下2017-10-10
Android實現調用系統(tǒng)相冊和拍照的Demo示例
這篇文章主要介紹了Android實現調用系統(tǒng)相冊和拍照的Demo示例,實例分析了Android調用系統(tǒng)相冊及拍照的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
本篇文章主要介紹了Android實現自定義加載框的代碼示例，App在與服務器進行網絡交互的時候，有個提示加載框，有興趣的可以了解一下。2017-02-02
Android編程實現通訊錄中聯系人的讀取,查詢,添加功能示例
這篇文章主要介紹了Android編程實現通訊錄中聯系人的讀取,查詢,添加功能,涉及Android權限控制及通訊錄相關操作技巧,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Android 中RecyclerView頂部刷新實現詳解的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10