微信拍一拍效果的原理分析及代码实现-阿里云开发者社区

微信拍一拍效果的原理分析及代码实现

2022-06-11 371

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 微信拍一拍功能上线之后，其用户评价褒贬不一，这里我们不去凑热闹讨论这个功能的应用场景是否真的如部分网友说的毫无卵用，毕竟这是产品经理们应该考虑的事，但我相信作为国民级别的应用软件，其每次更新都肯定是无比谨慎的

前言

微信拍一拍功能上线之后，其用户评价褒贬不一，这里我们不去凑热闹讨论这个功能的应用场景是否真的如部分网友说的毫无卵用，毕竟这是产品经理们应该考虑的事，但我相信作为国民级别的应用软件，其每次更新都肯定是无比谨慎的。

所以我们倒不如把关注点转移到如何通过代码实现这个动态效果上。

原理分析及部分代码展示

首先，我们来看看自从拍一拍功能上线之后，各路网友们的那些骚操作：

有敢于做第一个吃螃蟹的，那他承受的后果就是被螃蟹钳夹到晕厥，既然你敢拍老板，那就别怪老板下狠手啦：

微信图片_20220611001239.jpg

也有通过微信拍一拍发现自己缺点的：

微信图片_20220611001252.jpg

微信图片_20220611001303.jpg

......

不得不感叹网友们神奇的脑洞呀~

玩笑归玩笑，回到正题，我们首先来用文字描述一下此功能：

通过双击微信头像，它会在进行抖动的同时在聊天界面最底部显示谁拍了谁的字样信息。

以上这段文字描述部分，我们对三个关键词进行了加粗处理，接下来我们逐个解释一下：首先我们来解释下用户的双击操作：当用户触发双击事件时，程序会转去执行两个操作，一个是抖动微信用户的图像，另一个是在微信底部显示拍一拍的相关信息。

1. 关于双击事件操作：我们可以参考MDN上关于dblclick的例子：

微信图片_20220611001311.png

我们来对MDN上的例子做下简单的解释：给当前页面的中的HTML元素绑定一个事件监听函数（dblclick），当用户触发双击操作时，该函数被执行，其效果是对卡片的大小进行切换。

具体参考链接如下：

http://s0developer0mozilla0org.icopy.site/en-US/docs/Web/API/Element/dblclick_event

2. 关于抖动效果：通过双击微信头像，我们发现微信头像会进行抖动，我们可以通过JavaScript控制微信头像在水平方向上的位移来模仿该效果，接下来我们看看实现该效果的部分代码：

//双击抖动效果的实现
card1.ondblclick=function(){
    contentInfo();
    clearInterval(u);
    u=setInterval(function(){
        card1.style[a[b%2]]=(b++)%4<2?"0px":"4px";
  if(b>15){
       clearInterval(u);
       b=0;
   }  
    },32);
}

3. 关于在聊天页面底部显示谁拍了谁的信息：我们通过观察显示的拍一拍信息可以知道，其内容构成结构为：“当前所登陆的微信用户昵称”+拍一拍+“被双击用户的微信昵称”。因此我们可以得出思路，当用户执行完双击操作之后，我们可以在当前页面中插入一个<li>标签，并通过获取当前所登录的微信昵称和被双击用户的昵称来进行内容的拼接，从而显示拍一拍的相关信息，我们来看看实现该效果的代码：

// 显示“谁”拍了拍“谁”
  function contentInfo(){
      const li = document.createElement("li");
      li.innerHTML="“"+boy_info[1].innerHTML+"”"+"拍了拍"+"”"+boy_info[0].innerHTML+"“";
      li.style="color:gray";
      content.appendChild(li);
  }

代码实现及效果展示

首先我们来看看通过JavaScript代码实现的效果如何：

接下来，我们直接贴出全部代码，由于核心代码思路已经在上述部分详细讲过，故此处不再赘述。

HTML部分

<div id="wrap_chat">
    <ul style="list-style-type:none;">
        <!--石璞东-->
  <li class="xw-servicer-avantar-wrap"  id="logo">
      <div id="chat_page">
    <div style="margin-left: -467px;font-size: 2px; color: gray;" class="say_info">石璞东</div>
    <img src="img/2.jpg" class="xw-servicer-avantar"/>
      </div>
      <div class="tip">
    <div class="inner"></div>
    <div style="margin:2px;"> 你好，我是石璞东，欢迎关注我的微信公众号hahaCoder。</div>
      </div>
  </li>
  <!--郑合惠子-->
  <li class="xw-servicer-avantar-wrap"  id="logo">
      <div id="chat_page1">
    <div style="margin-right: -392px;font-size: 2px; color: gray;" class="say_info">郑合惠子</div>
    <img src="img/timg.jpg" class="xw-servicer-avantar" id="left"/>
      </div>
      <div class="tip">
           <div class="inner1"></div>
     <div style="margin:4px;"> 你好，我是郑合惠子。</div>
      </div>
  </li>
    </ul>
</div>

CSS部分

li{
    list-style: none;
}
#wrap_chat{
    border: 1px solid black;
    width: 500px;
    text-align: center;
}
#chat_page{
     position:relative;
}
#chat_page1{
     position:relative;
}
.tip {
     width: 300px;
     height: 100px;
     border: 1px solid #000;
     border-radius: 8px;
     background-color: #0091EA;
     position: relative;
     margin-left: 70px;
     margin-top: 20px;
}
.tip.inner {
     width: 10px;
     height: 10px;
     border: 1px solid red;
     position: relative;
     top: 31px;
     left: -7px;
     transform: rotate(45deg);
     border-top: 0px;
     border-right: 0px;
     background-color: #0091EA;
}
 .tip.inner1 {
     width: 10px;
     height: 10px;
     border: 1px solid red;
     position: relative;
     top: 31px;
     left: 295px;
     transform: rotate(228deg);
     border-top: 0px;
     border-right: 0px;
     background-color: #0091EA;
}
 .tip:before {
     position: absolute;
     content: "";
     width: 0;
     height: 0;
     overflow: hidden;
     border: 5px solid transparent;
     border-right-color: #ccc;
     left: -11px;
     top: 13px;
}
 .tip:after {
     position: absolute;
     content: "";
     width: 0;
     height: 0;
     overflow: hidden;
     border: 5px solid transparent;
     border-right-color: #fff;
     left: -10px;
     top: 13px;
}
.xw-servicer-avantar {
     border-radius: 5%;
     height: 60px;
     width: 60px;
     float: left;
     margin-left: -35px;
}
#left {
     border-radius: 5%;
     height: 60px;
     width: 60px;
     float: right;
     margin-right: 7px;
}
.xw-servicer-avantar-wrap {
     width: 100%;
     height: auto;
}

JavaScript部分

var card1 = document.getElementById("chat_page");
var card2 = document.getElementById("chat_page1");
var content = document.getElementById("wrap_chat");
var boy_info = document.getElementsByClassName("say_info")
var a=['right','left'];
var b=0;
var u;
//双击抖动效果的实现
card1.ondblclick=function(){
    contentInfo();
    clearInterval(u);
    u=setInterval(function(){
        card1.style[a[b%2]]=(b++)%4<2?"0px":"4px";
        if(b>15){
            clearInterval(u);
            b=0;
        } 
    },32);
}
card2.ondblclick=function(){
    contentInfo1();
    clearInterval(u);
    u=setInterval(function(){
        card2.style[a[b%2]]=(b++)%4<2?"0px":"4px";
        if(b>15){
            clearInterval(u);
            b=0;
        } 
    },32);
}
// 显示“谁”拍了拍“谁”
function contentInfo(){
    const li = document.createElement("li");
    li.innerHTML="“"+boy_info[1].innerHTML+"”"+"拍了拍"+"”"+boy_info[0].innerHTML+"“";
    li.style="color:gray";
    content.appendChild(li);
}
function contentInfo1(){
    const li = document.createElement("li");
    li.innerHTML="“"+boy_info[0].innerHTML+"”"+"拍了拍"+"”"+boy_info[1].innerHTML+"“";
    li.style="color:gray";
    content.appendChild(li);
}

本文总结

本文通过JavaScript实现了微信新功能拍一拍的效果，小伙伴们学会了吗？快去实现一下吧~

微信拍一拍效果的原理分析及代码实现

前言

原理分析及部分代码展示

代码实现及效果展示

HTML部分

CSS部分

JavaScript部分

本文总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景