“点击弹图和点击弹窗，有啥不一样啊？”
点击弹出图片和点击弹窗，经常会有人用错，其实这是两种完全不同的交互效果。
我们再来体验一下
点击弹出图片：
组件：点击弹出-弹出图片(设置多个触发区)
编号：10100（组件）
点击弹窗：
组件：点击-悬浮弹窗(无限次弹出,相同关闭位置)
编号：11114（组件）
点击弹出图片效果可以在一张图片上设置多个触发点，点击弹窗效果同样也可以在一张图片上设置多个触发点。
看着挺像，其实很不一样。
点击弹出图片实际上是利用微信的图片机制，将一张图片藏在了正文中的某个位置，这张图一直在屏幕中；点击弹窗则是通过点击指令使得摆放在某个坐标的位图移入到屏幕中，这张图在不触发指令前其实是在屏幕外。
点击弹出图片的优点是弹出图可以保存；点击弹窗在定制时可以给弹窗叠加图层，增加弹幕、轮播banner、小程序、超链接等效果（如需定制可联系大师兄微信（ID：iPaiban001））。
这两个效果都很受欢迎，明白了两者的不同，今天再向大家推荐一下它们的进阶效果——点击弹图或弹窗的同时，底部的图片也会切换。
这种进阶效果会让交互更加符合逻辑，也会有更多创意发挥的空间，比如点击信封弹出图片，信封同时打开：
组件：点击-弹出同时切换图片(有触发区)
编号：11095（组件）
点击电梯弹出画外音窗口，配合文案电梯门同时打开：
组件：点击-切换图片+弹窗(弹窗可关闭)
编号：11534（组件）
前者是点击弹图同时切换图片，之前介绍过教程，感兴趣的戳：《圣诞节经典玩法升级了，点击弹出的同时还能切换背景！》；后者是最新上线的点击弹窗同时切换图片，它的制作方法有一些不同之处，一起看下它的教程吧：
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com
组件：点击-切换图片+弹窗(弹窗可关闭)
编号：11534（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，在「弹出 | 弹窗」分类中找到「点击-切换图片+弹窗(弹窗可关闭)」组件，或者直接搜索组件编号11534，点击选择。
第2步：上传图片
图片素材共需要3张，分为点击前、点击后和弹窗图，点击前和点击后指点击切换的两张图。3张图片尺寸需保持一致。
第3步：调整动画时间
这里的动画时间为图片切换和弹窗出现动画的时间，滑动滑杆任意设置。如果切换的是GIF，设置为0.1s最佳。
第4步：设置触发区域
双击编辑区的图片，调出触发区域调整窗口，红色色块代表触发区域。
拖动红色色块首先调整点击切换并弹窗的触发区域，点击「下一张」，调整关闭弹窗的触发区域。
第5步：导入公众号后台
点击最右侧「预览草稿」微信扫码预览效果，效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。
使用同步功能不用频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码预览在公众号的效果。
如需局部导入可参考：《iPaiban Pro小助手安装和使用教程》
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）