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

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

前言


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


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


原理分析及部分代码展示


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


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



微信图片_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实现了微信新功能拍一拍的效果,小伙伴们学会了吗?快去实现一下吧~



image.gif




相关文章
|
2月前
|
定位技术 开发工具 Python
代码让微信开屏地球转起来
这段内容介绍了如何使用Python制作一个动态旋转的地球图像,类似于微信启动画面中的地球。文章详细描述了所需准备的三个素材(地球表面、云图和微信地球的抠图),并解释了通过调整云层和地面的旋转速度来实现自然的相对运动效果的基本原理。文中还提供了一个GIF压缩工具的链接,以及部分代码示例。此外,文章最后提到了一些Python学习资源,包括学习路线、开发工具、视频教程、实战案例、练习题和面试资料。
40 0
|
21天前
适用于alist的微信遮罩代码
最近在研究alist网盘工具,终于找到了适用于alist的微信遮罩代码。代码如下:``` ```。下面是示例图片,可根据需要自行替换。![点击查看示例图片](https://ucc.alicdn.com/pic/developer-ecology/ms7h4bs4k7hme_1a36659fd3054e508107f6c764c6f0d3.jpg)
|
6月前
|
JavaScript Java 测试技术
基于小程序的教学辅助微信小程序+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的教学辅助微信小程序+springboot+vue.js附带文章和源代码说明文档ppt
53 1
|
3月前
|
人工智能 自然语言处理 搜索推荐
评测:AI客服接入钉钉与微信的对比分析
【8月更文第22天】随着人工智能技术的发展,越来越多的企业开始尝试将AI客服集成到自己的业务流程中。本文将基于《10分钟构建AI客服并应用到网站、钉钉或微信中》的解决方案,详细评测AI客服在钉钉和微信中的接入流程及实际应用效果,并结合个人体验分享一些心得。
9957 10
|
2月前
|
小程序 JavaScript Go
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码,包括电商系统、同城拼车、博客等多种应用,涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例,适合初学者和开发者参考学习。提取码:8888,代码效果参考:http://www.603393.com/sitemap.xml。
53 2
|
3月前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
3月前
|
小程序 JavaScript 前端开发
微信小程序开发必备前置知识:基本代码构成与语法
【8月更文挑战第8天】微信小程序的基本代码构成与语法
97 0
微信小程序开发必备前置知识:基本代码构成与语法
|
3月前
|
小程序 JavaScript 安全
微信小程序实现云闪付支付(代码和注释很详细)
微信小程序实现云闪付支付(代码和注释很详细)
|
3月前
|
JavaScript 安全
|
4月前
|
小程序
【奇葩问题】微信小程序 We分析 访问来源Top10的总比例为什么不止100%
【奇葩问题】微信小程序 We分析 访问来源Top10的总比例为什么不止100%
48 3