视频教程

一、案例效果

二、应用场景

微信拟态类作品一直刷爆朋友圈，2017两会之际，大量群聊朋友圈案例再次引起了大家学习的兴趣，下面给大家介绍使用Epub360意派这个专业H5设计工具，轻松制作模拟微信群聊类的H5页面，本期还附赠一个综合模板（面对面建群+群聊+朋友圈），专业版及以上用户可免费拷贝。

文末附件下载素材，非商用，仅供学习使用。

三、功能设置

1.我们切换到layer页面，新建一个空白的layer页面，更改layer的尺寸为320*2400（具体的长度根据你的内容来定），调整layer页面的颜色和透明度；

2.我们先添加一个方形图形，设置尺寸、颜色（rgb(206, 206, 206)）、圆角（10px）以及边框（粗细为无）；

3.添加一个段落文字组件，输入文字信息，更改文字的字体和颜色，并勾选右侧“锁定”与“以图片方式展现”（这是为了文字适配，如果对文字显示比较高，建议使用图片）；

4.同理，我们再添加头像图片、昵称、聊天内容、聊天气泡与小箭头，排版好位置，头像图片的尺寸是78*78px(50%显示)，昵称字号：14px，昵称颜色：rgb(105, 105, 105)，文字部分都是黑体；

5.案例是需要显示用户头像，像是用户参与了聊天一样。方法是添加一个微信头像组件，设置圆角为0，尺寸为38*38px，边框为0；

6.所有的元素都可以用上面的方法制作，我这里就不一一讲解了，排版后如下图；

7.我们给layer里前面个小元素添加渐现动画（第一屏内显示的元素都要添加，后面的元素可以用直线运动的方法让它出现），每个人物的元素当做一个小组，每个小组里的元素渐现动画设置为与一起开始，组与组之间延迟时间参考信息内容长短为主，我这里设置的时间大多是渐现动画持续时间0.1s，组与组的动画延迟时间为1.5s；

8.我们切换到页面里，把刚刚制作好的layer页面插入页面中去，添加一个微信底部输入框图片，启用相对位置固定在页面底中部；

9.群聊消息的出现是添加了若干个向上的直线动画制作的，默认的layer尺寸是320*480，我们需要拉伸layer底部的锚点，拖拽成我们想要的高度，第一次建议不要拉伸太多，只露出下面一位人物消息即可；

10.我们给这个layer添加第一个直线运动动画，并设置动画的持续时间为0.5s，延迟6.5（这个时间是前面几个消息动画的总和），动画效果为power4.easeOut，画完直线运动，再拉伸露出下一位人物消息，这样方便修改调整（因为直线运动动画开始的锚点是从layer的正中间，如果拉伸的太长，锚点不在画布中，就难以选中，这也是很多用户的痛点）；

11.我们可以预览下第一段直线运动动画，如果位置正好（有偏移的话继续调整），再拉伸这个layer的长度，接着复制上一个直线运动，再粘贴给这个layer，这样layer上就有两段直线运动的动画了。注意要把第二段直线运动改为延迟时间1.5s（延迟时间不固定，具体的值需要是正常看完这段文字的速度）；

12.我们再预览第二段直线运动的位置是否合适，同理再复制粘贴得到第三段动画，后面以此类推，这个方法可以解决多段长距离运动锚点的画线问题，当然也有用户一次画线就超出了画布选不中怎么呢？这时候我们需要把layer移动到画布外面，直到锚点显示在画布中，调整位置后再把layer移动到原来的位置，再点击一下直线运动（为了让锚点归正）；

13.有看过的派友可能会发现，消息出现的时候有音效！微信上不是限制了音效只能点击播放吗？确实是需要点击播放的，这里面有一个小技巧，苹果 iOS 微信上，同一个音频第一次播放是必须用点击触发播放的，后面的这个音频就可以被动画等其他方式触发播放，在作品的上一页，我们在按钮上设置了，点击时播放音视频和跳转下一页，音频是masterpage里的，所以它就能够被下一页的动画触发播放了呢，赶紧试试吧！