.

1.模拟微信群聊教程

伯益发表于:2017年03月27日 14:49:27更新于:2021年11月10日 15:54:55

视频教程


一、案例效果

image.png

模板拷贝网址:《【两会模板】邀你加入群聊》


二、应用场景

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

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


三、功能设置

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

image.png


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

image.png


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

image.png


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

image.png


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

image.png


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

image.png


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

image.png


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

image.png


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

image.png


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

image.png


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

image.png


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

image.png


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

image.png


14.这个案例有用到微信头像,需要用户授权的和填写认证的服务号信息。

如何设置用户授权身份?

image.png


[附]

案例模板修改步骤

1.这页是使用layer组件,添加了若干个向上的直线运动制作的,可在layer里面找到可以替换的内容;

 2.在layer里,选中文本段落组件,在右侧面板的把“锁定”与“以图片方式展现”,修改完成后再勾选“锁定”与“以图片方式展现”即可

 3.图片双击即可替换

 模板拷贝链接地址:http://www.epub360.com/manage/book/acyess/present/

 注:

1.勾选“锁定”与“以图片方式展现”是为了适配不同机型的显示效果,其他动画不建议有大的调整,除非你也是老司机,不然恢复起来可能不太容易;

2.如果对于文字要求适配所有机型的话,建议文字部分用做成图片导入。


如果是通过插入本地视频的方式来做群聊H5,这里有一些录屏软件的整理,希望对大家有帮助。


附件:模拟群聊素材.zip • 1.15MB • 下载