作者|风口

生产| CSDN（ID :)

微信8.0的主要特征之一是支持动画表达式。如果只有一个构建的表达图标，则如果发送消息，则此表达式将具有一个简单的动画。炸弹的表情具有爆炸性的动画和新闻，化身也将动摇。

根据前端工程师的专业精神，我想看看是否可以实现类似的特殊效果。经过长时间的折腾，效果如下：

该项目的核心是使用动画库。它是一个生产的完整平台（Web，iOS，）动画库，其特征是能够直接播放动画。在设计师使用插头将动画导出到JSON格式之后，开发人员可以通过相应平台的SDK播放。 （项目地址和示例演示请参见本文的结尾）

完成这个项目后，我觉得我的前端保留增强了另一层。将来，在处理复杂的特殊效果时，我会有新的想法。如果您还想进一步提高前端开发技能，则可以遵循本文进行练习。除了在本文中使用库外，所有这些图书馆均使用本机HTML/ CSS/实现，以便无论您是VUE还是其他工程师，都可以快速掌握它。

写界面

我最初想跳过HTML/CSS部分，但我认为CSS可能是大多数人的弱项目，因此我决定写实现界面的想法。那些想要看到核心部分的人可以直接跳到：2。发送普通消息部分。

1。HTML部分

从渲染的角度来看，首先要查看HTML部分：

上面有一个标题栏，显示与XXX聊天。

中间是聊天信息面板，其中包含双方发送的消息。每个消息都由发件人的头像和消息内容组成。我将其发送到右边，另一方发送给左边。

下面是底部信息，有表情符号选择按钮，编辑消息文本框和发送按钮。

然后，基于此结构编写的HTML代码如下：

与每个元素相对应的接口部分是：

该元素是用于对齐聊天窗口的总体容器

它是用于聊天应用程序的容器。它用于布置标题栏，聊天面板和底部发送框。

用于显示标题栏。

这是一个消息面板，用于布置消息。

对于消息容器，使用不同的内容来区分代表我的发件人，它代表另一方。每个消息用于显示化身并使用元素显示文本。元素中的元素将用作播放表情符号的容器。

用于布局底部的操作按钮和消息发送框。在：

这是一个表情符号选择按钮。使用笑脸SVG图片表明表情符号选择框弹出了一层。内部的表达式将在JS中动态加载。目的是实现动画预览。

这是一个聊天消息输入框，没有什么特别的。

是发送按钮

这是HTML的基本结构。让我们看一下CSS风格。

2。CSS部分

在项目root目录中创建一个.css文件，并将其引入.html的标签：

2.1全球风格

首先定义一些CSS变量。 CSS变量将促进我们引用相同的属性值。如果样式更新，您可以避免多次修改：

这些变量的含义是：

，主要颜色，例如我发送的消息的蓝色背景。

，抗色调或强调色调，与主色调形成鲜明对比，例如发送按钮的背景颜色。

，大阴影，例如标题栏的阴影和底栏。

，小阴影，例如输入框和表达式选择pop -up层。

接下来是一些重置样式：

这些样式对于所有元素都有效，并且设置了框模型，因此内侧间距和框架计数在宽度和高度内。内间距和外部间距设置为0，默认字体最终设置为。

2.2主容器

主容器用于将聊天应用程序容器定位到浏览器中间，使用网格布局，并将其设置为浏览器可见区域的100％，并将背景颜色设置为黑色和灰色：

2.3聊天应用程序容器

聊天应用程序容器具有固定高度，模拟手机屏幕，并使用网格布局来控制标题栏，聊天面板和底部操作栏的位置：

在这里，聊天应用程序分为三行。第一行的标题条的高度和最后一行的底部操作栏是内容的最大高度，中间聊天面板是浮动高度。

2.4标题栏

标题栏只是用内部间距，文本的中心模式和阴影设置：

界面优化提示：内部间距用于增加空白，这在视觉上导致放松。阴影与下面的聊天面板区分开

2.5聊天面板

聊天面板使用Flex布局来排列消息，并设置方向排列列，然后将其设置为自动。当消息的总高度超出面板的高度时，出现滚动条：

接口优化提示：这里还要留出足够的空白，以将与其他元素的距离分开以避免交通拥堵。

2.6新闻

该消息分为三个部分：消息容器，头像和消息主体。消息主体和头像包含在消息容器中，首先查看消息容器的样式。消息容器使用Flex布局将消息主体和头像放入一行。最大宽度为面板宽度的80％，并设置了字体和外部距离：

这里的设置是在定位后找到完整的屏幕特殊效果。

头像只是设置为宽度，圆角和远距离消息主体的间距：

接口优化提示：在这里，您必须提及再次间距的重要性。不要安排元素太紧凑，否则会非常影响视觉效果。最直接的影响是引起视觉拥挤并引起视觉疲劳。

消息主体还设置了间距和圆角。这里的圆角和化身是一致的，可以增加和谐感。它还设置了阴影，并使用Flex布局来对齐文本或表情符号：

这些样式基于另一方的信息。如果我发送的消息需要放在右边并进行一些调整。首先，对于我发送的消息，将flex-flow更改为行列和消息位置，然后在面板的右侧使用 - self：

现在，调整头像的外部距离是距左侧消息主体的边界距离：

设置消息的背景颜色为蓝色，文字为白色：

2.7底部操作栏

首先查看底部操作栏的整体布局，然后使用网格布局将表情符号选择按钮，消息发送框和发送按钮分为3列。除消息发送框的浮动宽度外，其他两个按钮是固定宽度。 ，最后，设定阴影和间距：

表达式选择按钮与左侧对齐，并设置相对定位以找到表情符号以选择pop -up层，然后设置按钮图标的大小：

有许多CSS代码选择pop -up层，但是它们非常简单。首先查看代码：

该代码的含义是：

弹出层使用网格布局。然后将列间距设置为18px。

设置角落，背景颜色，阴影，内部距离和字体大小。

定位设置为绝对定位，并将其移动到元素高度的100％（即，..宽度的高度设置为。

消息输入框和按钮的样式相对简单，消息输入框的宽度为整列。 “发送”按钮使用它正确对齐。在这里粘贴代码：

最后，在单击表情符号按钮显示时，添加另一种样式以将此样式添加到表情符号流行图层中：

3。JS部分

在将功能添加到聊天接口之前，请编写一些基本的JS代码。在项目的根目录中创建一个.js文件，并在.html中引用。请注意它在闭合标签上方，以便在加载HTML DOM之后，将执行JS中的代码以防止元素查找：

在.js中，首先要操作DOM元素：

在：

这是消息面板元素，用于添加新新闻。

选择表情符号按钮，单击它以弹出表情符号选择框。

它是pop -up表达式框。

这是消息输入框。

对于发送按钮。

然后，可以在示例代码仓库中下载JS库的引入，也可以下载.min.js。下载后，将其放入项目根目录中，然后将其引入.html中的.js上方：

下载表情符号动画资源文件，它们都是JSON格式的文件。下载后，将其直接放入项目根目录中：

南瓜表达：

炸弹表达：

爆炸动画：

让我们看一下如何实现每个部分的功能。

发送普通消息

在发送普通消息时，用户输入输入框中的消息后，单击以发送，并将消息添加到消息列表中并清除输入框的内容。然后在此处添加单击事件到发送按钮：

如果处理功能：

确定用户是否已输入消息。

如果输入，请将其添加到消息列表中。

看一下功能的代码：

该功能接收两个参数。 MSG和类型是要添加的信息内容和类型。类型可用。它被视为普通文本消息。它。以下内容主要是在此功能中完成的：

根据消息HTML结构创建一个新的消息元素，然后添加到消息列表中。

将消息的样式设置给我。

内部元素是化身和文本消息，它们分配给了由模板字符串形式分配的属性，中间是MSG变量的值。

最后，将滚动滚到最新消息，然后在输入框中清除消息。

这可以发送普通的短信。

发送动画表达式

在发送动画表达式之前，您需要加载动画表达式。定义表情符号名称的关键值和.js顶部的表情符号动画路径。

我们将基于此密钥找到相应的动画路径。然后在POP -UP层中初始化表达式以供用户选择：

这里的代码由以下这些操作制定：

遍历存储表情符号信息的对象。

创建一个容器并使用跨度元素，因为动画播放器需要将其安装到特定的HTML元素上。

呼叫（）要加载动画，它需要传递几个参数：

：应安装播放器。

：您可以选择使用SVG或渲染动画。

循环：是否要循环播放，因为这是在表达表情选择中预览动画，因此它支持循环播放。

：是否要自动播放，是否将其设置在此处，在被鼠标刮擦时播放动画。

路径：动画JSON文件路径，直接从对象获得。

（）将返回的实例将保存在其中。

之后，注册了一些事件：

单击表达式时，将表达式消息发送，然后将MSG参数设置为（）MSG参数到表达式的键，然后将类型参数设置为“”。

当鼠标被表达式刮擦时，动画开始了。

当鼠标不在表达式中时，动画停止。

然后将事件添加到发送表情符号按钮中。单击时，请切换pop -up层的显示状态：

此时，单击“发送表情符号”按钮以查看表情符号选择pop -up层。您还不能发送表达式，因为您尚未在（）函数中处理它，现在让我们修改其中的代码。第一法官：如果是表情符号，您将不会在消息中的元素中添加任何信息：

然后在其下方调用（）函数播放动画：

（）该函数接收两个参数，一个是表达式的关键，另一个是消息元素。此时，MSG变量的内容是事件中传递的表达式密钥。该函数中的代码如下：

在此功能中，我主要执行以下操作：

获取消息中的跨度元素，它将是一个动画容器。

表情符号动画的宽度高度为40px。

使用加载动画，并设置圆形播放作为真实的，以便在发送表达式时自动播放动画，而仅一次播放一次。

现在，您可以发送表达消息，并且相关动画也将自动播放。接下来，查看如何实现炸弹的完整屏幕动画以及消息元素的震动效果。

发送皮带的全屏特殊效果的表达

对于具有完整屏幕特殊效果的这种表达式，可以单独判断它，也可以在保留表达式的对象中定义相关操作。在这里，我们可以判断用户是否发送炸弹表达式，然后应用相应的特殊效果。

首先，在（）函数中，判断如果发送消息是表达式消息，而表达式是炸弹，则播放完整的屏幕动画并摇动消息：

800毫秒后，此处的完整屏幕动画延迟了。目的是在播放炸弹表达式到正确的时间，然后播放（）函数并通过消息元素时播放完整的屏幕动画。完整的屏幕动画结束后，请致电（）（）消息。让我们在此处查看（）函数的代码：

（）该功能接收一个锚点，这意味着根据位置开始播放完整屏幕动画。由于示例中的动画格式相对较小，因此将其固定在最新消息下方。在下面执行这些操作：

添加完整的屏幕动画元素，并将其设置为最新消息元素右下角的绝对定位，宽度，高度。

加载动画，而不是自动循环或播放。

由于原始动画速度太快，因此（）调用实例的方法设置为速度的0.3倍。

然后设置一个事件来监视示例：“”，该示例将在动画执行完成时会触发，示例和完整的屏幕动画元素在其中被摧毁。

实现了完整屏幕动画的效果。接下来，查看代码摇摆代码：

此功能的操作是：

使用（）和（）摇动最新的5条消息，您还可以更改5个并摇动更多消息。

然后在周期中，将动画添加到头像和消息中，其中的内容将在稍后引入。

应该注意的是，您需要在添加动画执行之前将其删除，因为某些消息可能以前摇晃，例如当连续发送多个炸弹表达式时。添加它时，它使用（）延迟700毫秒，目的是在一定程度上执行完整屏幕动画时摇晃消息。

接下来，查看定义，将以下代码添加到.css：

使用定义的动画，执行时间为0.8，动画执行函数易于输入。内部有更多代码，但是它们都非常简单，也就是说，模拟爆炸，X轴和Y轴的偏移的效果，每个偏移量变得越来越小，越来越快。您可以看到它。您可以看到它。百分比之间的间隔越来越小。当动画达到42％时，会添加一些旋转动画，以便在降落时振动效果。由于使用（）在元素的中间使用轴心心脏，因此我们可以修改消息气泡的轴以实现更现实的效果：

另一方发送的消息的轴设置在左下角，并且发送的消息本身设置在右下角。

总结

现在，实现了该模拟微信8.0动画表达式的功能。要点是：

使用库加载和播放动画。

确定完整屏幕动画的位置和游戏的时间。

CSS实现消息动画。

你学到了吗？如果您有任何疑问或建议，可以发表评论。如果您喜欢这篇文章，请喜欢或关注我。背面有越来越令人兴奋的文章。谢谢你！

作者：，简介：前端工程师以直观和专业的方式分享编程知识。向上@

本文中的所有地址：

示例地址：

代码地址：

：，下载.min.js

南瓜表达：

炸弹表达：

爆炸动画：

官方网站：

程序员如何避免被“内部卷”捕获，选择哪种技术是最有前途的技术，而中国开发人员的当前状态和技术趋势到底是什么？快来参加“ 2020年中国开发人员调查”，并获得更多丰富的奖品！