最近很火的微信啪一啪猜猜是怎样通过Flutter实现的？

2301_82241859

于 2024-05-10 16:40:36 发布

阅读量989

点赞数 14

分类专栏：程序员文章标签：微信 flutter

本文链接：https://blog.csdn.net/2301_82241859/article/details/138672186

版权

程序员专栏收录该内容

483 篇文章 3 订阅

订阅专栏

最近这个啪一啪效果挺火的啊

群里经常有人啪；

介绍

其实之前我就双击过头像，但并没任何效果，估计是当时把这个啪一啪消息隐藏了的，最近才放出来的，刚好看到，才开始实现。

关于进度

目前只是先把具体的效果实现，估计过几天你看wechat_flutter项目的时候就有啪一啪消息体了，我的思路是新增消息体封装，或者把原有的进行修改，比如说文字消息体自定义下内容，然后显示的时候判断即可；

处理方式【本段来自Android_ZzT】

咋们尽量处理的跟微信官方客户端一模一样

暴力连续「啪一啪」

连续一直双击头像会发现，只有第一次会发送信息，剩下的双击只会触发客户端行为「头像抖动」，是做了防爆处理的。大概过 10s 左右后恢复，可以再次触发

断网下「啪一啪」

断网情况下，双击头像，会发现，自己先能看到「拍一拍」，然后过了一段时间后，会出现「因网络原因，对方可能不知道你拍了他」。这就证明是先走客户端的渲染逻辑，然后再发的网络请求，网络不好的情况下应该会经过重试过程，如果最终还是失败，则显示网络原因失败的字样

啪自己

双击自己头像，会显示「你拍了拍自己」，只是双击用户信息是自己的情况下这样显示，这没什么特别的，但是请求失败情况下的文案没太能对上，仍然显示的是「对方可能不知道你拍了他」，猜测这个文案是写在客户端的，可能要改的话又得更新版本喽

实现

其实主要用了一个动画，然后使用TweenSequence进行多组补间动画

TweenSequence([
//使用TweenSequence进行多组补间动画
TweenSequenceItem(tween: Tween(begin: 0, end: 10), weight: 1),
TweenSequenceItem(tween: Tween(begin: 10, end: 0), weight: 1),
TweenSequenceItem(tween: Tween(begin: 0, end: -10), weight: 1),
TweenSequenceItem(tween: Tween(begin: -10, end: 0), weight: 1),
])
复制代码

然后封装成了个动画组件，组件调用了Transform来进行转动；

封装的那个组件继承了AnimatedWidget,然后调用了super把自定义的listenable 传了进去，

class AnimateWidget extends AnimatedWidget {
final Widget child;

AnimateWidget({Animation animation, this.child})

super(listenable: animation);

@override
Widget build(BuildContext context) {
final Animation animation = listenable;
var result = Transform(
transform: Matrix4.rotationZ(animation.value * pi / 180),
alignment: Alignment.bottomCenter,
child: new ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5)),
child: this.child,
),
);
return result;
}
}
复制代码

也算是非常简单。

代码所在位置

封装之后的代码所在

/wechat_flutter/lib/ui/view/shake_view.dart

然后项目中头像调用啪一啪的地方在

/wechat_flutter/lib/ui/message_view/msg_avatar.dart

大家可以去看下具体是怎么调用和封装的；

封装后的代码

import ‘dart:math’;

import ‘package:flutter/material.dart’;

/// 封装之后的拍一拍
class ShakeView extends StatefulWidget {
final Widget child;

ShakeView({
this.child,
});

_ShakeViewState createState() => _ShakeViewState();
}

class _ShakeViewState extends State
with SingleTickerProviderStateMixin {
Animation animation;
AnimationController controller;

initState() {
super.initState();

controller = AnimationController(
duration: const Duration(milliseconds: 500), vsync: this);
animation = TweenSequence([
//使用TweenSequence进行多组补间动画
TweenSequenceItem(tween: Tween(begin: 0, end: 10), weight: 1),
TweenSequenceItem(tween: Tween(begin: 10, end: 0), weight: 1),
TweenSequenceItem(tween: Tween(begin: 0, end: -10), weight: 1),
TweenSequenceItem(tween: Tween(begin: -10, end: 0), weight: 1),
]).animate(controller);
controller.forward();
}

Widget build(BuildContext context) {

题外话

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多程序员朋友无法获得正确的资料得到学习提升，故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等学习资料。

【Android思维脑图（技能树）】

知识不体系？这里还有整理出来的Android进阶学习的思维脑图，给大家参考一个方向。