Flutter组件：仿抖音双击点赞弹出爱心效果，腾讯安卓面试
作者：互联网
@override
_TikTokVideoGestureState createState() => _TikTokVideoGestureState();
}
class _TikTokVideoGestureState extends State {
GlobalKey _key = GlobalKey();
// 内部转换坐标点
Offset _p(Offset p) {
RenderBox getBox = _key.currentContext.findRenderObject();
return getBox.globalToLocal(p);
}
List icons = [];
bool canAddFavorite = false;
bool justAddFavorite = false;
Timer timer;
@override
Widget 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 _TikTokFavoriteAnimationIconState
extends State<TikTokFavoriteAnimationIcon> with TickerProviderStateMixin {
AnimationController _animationController;
@override
void dispose() {
_animationController?.dispose();
super.dispose();
}
@override
void didChangeDependencies() {
print('didChangeDependencies');
super.didChangeDependencies();
}
@override
void 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 {
标签：点赞弹,icons,double,安卓,value,key,animationController,override,双击 来源： https://blog.csdn.net/m0_61042126/article/details/120174116