点击消消消消消消消消消消消乐

原创 收藏 评论
举报 2022-08-10

在昨天儿童节推文《゜○。○゜????。O°o○。????o゜○。》中,有一个点击拼图的小游戏,不少小伙伴嚷着一定让我出教程


说安排咱就安排。我把它放进来大家再体验下:

1660110810956.gif

*上方大图被平均分成左、中、右三列,每一列都有1块多余的图片,准确找到3块多余的图片并点击消除,就能将大图恢复为一张完整的图案。

其实这个交互在我们2019年为奔驰AMG做的一篇定制图文中就出现过,大家可以试玩下:

1660110889879.gif

点击消除的玩法不只是可以点击拼图,面对不同主题或热点,发挥想象力都能找到一些有趣的创意点,比如端午节点击吃粽子点击缩短龙舟等,或者单纯在文中大量平铺不同颜色的色块,让用户点击消除同一颜色的也是很解压的一件事情,就像消消乐一样。

这种效果3年前需要定制,而现在早就用编辑器就可以自己制作了。

iPaiban Pro 黑科技编辑器组件中有一个「消除」分类,里面有3个组件,分别为:点击-消除图片(编号:10238)、连续点击-消除图片(编号:10233)和点击-消除拼图(三列)(编号:10874)。

「点击-消除图片」和「连续点击-消除图片」组件一行只能设置消除一张,点击粽子试试:

1660110932457.gif

它们配合「多列布局」组合还可以做出非常丰富的交互效果,大家可以探索一下。

而前面两个案例一行可以消除三张的用「点击-消除拼图(三列)」组件就可以实现。

以第1个儿童节点击拼图为例,一起看下制作教程吧。

工具:iPaiban Pro黑科技编辑器,网址:x.iPaiban.com

组件:点击-消除拼图(三列)

编号:10874(组件)

第1步:选择组件

点击编辑器左侧「组件」按钮,在「消除」分类中找到「点击-消除拼图(三列)」组件,或者直接搜索编号10874,点击选择。

第2步:上传图片素材

先说下素材怎么切分的。

我们将完整的素材图导入Ps中,在左侧找到「切片工具」,然后在图片上右键选择「划分切片」。

接着在设置框中输入划分切片数,垂直划分为3个,水平划分数量可以根据图片的长度来设置。

切分好后点击菜单栏「文件」-「导出」-「导出为 Web 所用格式(旧版)」保存就可以了,所有切片将会保存在一个 images 文件夹中。

回到编辑器中上传图片。

分别点击页面右侧左、中、右三列的「+」号按切片在原图的摆放位置上传图片。此时编辑区显示的是一张拼合的完整图片。

然后我们再在每列分别上传插入相同数量的干扰图片就可以了。

第3步:调整动画时间

页面右侧最下方的「动画时间」为点击后图片消失的动画时间,一般保持默认即可,也可根据自己的需要调整。


第4步:导入公众号后台

点击最右侧「预览草稿」可随时预览效果,效果满意后继续点击「导入微信后台」就能开始导到公众号了。

导入时使用 iPaiban Pro 小助手更方便哦,最新v2.0版本的小助手还支持一键打包下载图文图片素材,非常方便,安装教程戳:《iPaiban Pro小助手v2.0来啦!》



制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:x.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可开始注册并使用。

新用户在「新手礼包」可领取3天企业标准版会员体验权,以及22个常用必备组件的大礼包(1年)


● SVG 黑科技交互排版????????

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)