效果

简介

仿抖音点赞手势，单击暂停，双击点赞，可连续点击添加多个爱心，特点如下

全部效果为代码绘制（爱心图标来自Material Icon的图标）
套上在目标Widget外即可使用
提供单击与点赞的回调
建议复制代码使用，动画可按需修改
没有flutter之外的依赖项，可复制使用（懒得发pub）

基本原理

一个罩在child上的stack层，双击后根据坐标添加目标爱心Widget，爱心Widget在出现时会播放动画，用坐标作为key，动画结束后移除已经消失的爱心。

全部代码

什么都不依赖，可以直接复制使用。

import 'dart:async';
import 'dart:math';import 'package:flutter/material.dart';/// 视频手势封装
/// 单击：暂停
/// 双击：点赞，双击后再次单击也是增加点赞爱心
class TikTokVideoGesture extends StatefulWidget {const TikTokVideoGesture({Key key,@required this.child,this.onAddFavorite,this.onSingleTap,}) : super(key: key);final Function onAddFavorite;final Function onSingleTap;final Widget child;@override_TikTokVideoGestureState createState() => _TikTokVideoGestureState();
}class _TikTokVideoGestureState extends State<TikTokVideoGesture> {GlobalKey _key = GlobalKey();// 内部转换坐标点Offset _p(Offset p) {RenderBox getBox = _key.currentContext.findRenderObject();return getBox.globalToLocal(p);}List<Offset> icons = [];bool canAddFavorite = false;bool justAddFavorite = false;Timer timer;@overrideWidget build(BuildContext context) {var iconStack = Stack(children: icons.map<Widget>((p) => TikTokFavoriteAnimationIcon(key: Key(p.toString()),position: p,onAnimationComplete: () {icons.remove(p);},),).toList(),);return GestureDetector(key: _key,onTapDown: (detail) {setState(() {if (canAddFavorite) {print('添加爱心，当前爱心数量:${icons.length}');icons.add(_p(detail.globalPosition));widget.onAddFavorite?.call();justAddFavorite = true;} else {justAddFavorite = false;}});},onTapUp: (detail) {timer?.cancel();var delay = canAddFavorite ? 1200 : 600;timer = Timer(Duration(milliseconds: delay), () {canAddFavorite = false;timer = null;if (!justAddFavorite) {widget.onSingleTap?.call();}});canAddFavorite = true;},onTapCancel: () {print('onTapCancel');},child: Stack(children: <Widget>[widget.child,iconStack,],),);}
}class TikTokFavoriteAnimationIcon extends StatefulWidget {final Offset position;final double size;final Function onAnimationComplete;const TikTokFavoriteAnimationIcon({Key key,this.onAnimationComplete,this.position,this.size: 100,}) : super(key: key);@override_TikTokFavoriteAnimationIconState createState() =>_TikTokFavoriteAnimationIconState();
}class _TikTokFavoriteAnimationIconStateextends State<TikTokFavoriteAnimationIcon> with TickerProviderStateMixin {AnimationController _animationController;@overridevoid dispose() {_animationController?.dispose();super.dispose();}@overridevoid didChangeDependencies() {print('didChangeDependencies');super.didChangeDependencies();}@overridevoid initState() {_animationController = AnimationController(lowerBound: 0,upperBound: 1,duration: Duration(milliseconds: 1600),vsync: this,);_animationController.addListener(() {setState(() {});});startAnimation();super.initState();}startAnimation() async {await _animationController.forward();widget.onAnimationComplete?.call();}double rotate = pi / 10.0 * (2 * Random().nextDouble() - 1);double get value => _animationController?.value;double appearDuration = 0.1;double dismissDuration = 0.8;double get opa {if (value < appearDuration) {return 0.99 / appearDuration * value;}if (value < dismissDuration) {return 0.99;}var res = 0.99 - (value - dismissDuration) / (1 - dismissDuration);return res < 0 ? 0 : res;}double get scale {if (value < appearDuration) {return 1 + appearDuration - value;}if (value < dismissDuration) {return 1;}return (value - dismissDuration) / (1 - dismissDuration) + 1;}@overrideWidget build(BuildContext context) {Widget content = Icon(Icons.favorite,size: widget.size,color: Colors.redAccent,);content = ShaderMask(child: content,blendMode: BlendMode.srcATop,shaderCallback: (Rect bounds) => RadialGradient(center: Alignment.topLeft.add(Alignment(0.66, 0.66)),colors: [Color(0xffEF6F6F),Color(0xffF03E3E),],).createShader(bounds),);Widget body = Transform.rotate(angle: rotate,child: Opacity(opacity: opa,child: Transform.scale(alignment: Alignment.bottomCenter,scale: scale,child: content,),),);return widget.position == null? Container(): Positioned(left: widget.position.dx - widget.size / 2,top: widget.position.dy - widget.size / 2,child: body,);}
}

原文作者：马嘉伦
原文链接：人类身份验证 - SegmentFault
来源：Segmentfault

Flutter组件：仿抖音双击点赞弹出爱心效果相关推荐

多图弹出最后变成心形html,【Flutter组件】仿抖音双击点赞弹出爱心效果（可连点）...
效果简介仿抖音点赞手势,单击暂停,双击点赞,可连续点击添加多个爱心,特点如下全部效果为代码绘制(爱心图标来自Material Icon的图标) 套上在目标Widget外即可使用提供单击与点赞的 ...
pythoni屏幕连点_【Flutter组件】仿抖音双击点赞弹出爱心效果（可连点）
效果简介仿抖音点赞手势,单击暂停,双击点赞,可连续点击添加多个爱心,特点如下全部效果为代码绘制(爱心图标来自Material Icon的图标) 套上在目标Widget外即可使用提供单击与点赞的 ...
【Flutter组件】仿抖音双击点赞弹出爱心效果（可连点）
效果简介仿抖音点赞手势,单击暂停,双击点赞,可连续点击添加多个爱心,特点如下全部效果为代码绘制(爱心图标来自Material Icon的图标) 套上在目标Widget外即可使用提供单击与点赞的 ...
android+底部评论框,Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)...
实现的效果图: 自定义Fragment继承BottomSheetDialogFragment 重写它的三个方法: onCreateDialog() onCreateView() onStart() 他 ...
仿抖音短视频源码，高仿抖音双击点赞效果之双击的问题
仿抖音短视频源码中,实现仿抖音的双击点赞效果,相关代码如下: public class MyView extends View {private GestureDetector gestureDete ...
仿抖音评论底部弹出框（列表框+发表框）
BottomSheetDialogFragment高仿抖音评论底部弹出框先看效果图: 这个弹窗的效果是使用BottomSheetDialogFragment做的,第一个弹出的对话框为CommentL ...
Android仿抖音双击点赞动画,Android仿抖音点击效果
原标题:Android仿抖音点击效果作者丨wish_xy https://www.jianshu.com/p/1d17c38a3db1 学习自定义view,想找点东西耍一下,刚好看到抖音的点赞效果不 ...
Android自定义view之实现仿抖音双击点赞单击暂停特效
2018年抖音.快手.火山等短视频App比较火,最近自己做短视频项目时有个需求,就是类似抖音的点赞特效,单击屏幕时视频暂停,再次点击时视频恢复播放,双击或者连续多次点击时出现点赞特效(飘小心心特效), ...
java 特效_Android仿抖音双击点赞特效 java实现
实现思路首先分析该特效的实现思路和具体的表现.在抖音中短视频的播放界面,无论双击屏幕的无其他控件的位置都能够触发双击点赞的特效,因此这是一个自定义布局实现.其次,在双击完后会有一个心形产生并飘动,所 ...

Flutter组件：仿抖音双击点赞弹出爱心效果

效果

简介

基本原理

全部代码

Flutter组件：仿抖音双击点赞弹出爱心效果相关推荐

最新文章

热门文章