一张滑动图中多个点击切换,华为这是怎么做的?

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

老规矩,先看效果:

1661406535717.gif

这个效果来自华为《世界心脏日 | 有些“心”事,想告诉你》一文,整体来看,它是一个图片左滑效果,很多小伙伴好奇的是,第一张滑动图上有多个点击切换交互是怎么做的?

通过两种路径我们可以实现:

一个是SVG案例库(brandtime.cn)搜索这篇图文,在案例详情页通过一键还原来实现;

一个是直接在 iPaiban Pro 编辑器找到需要的组件/组合,然后进行编辑。

对编辑器还不够熟悉的小伙伴可以使用第一种方法,它可以快速帮你定位需要的效果模板,剩下的你只需要换图就可以了。


案例库搜索「华为」,在搜索结果中限定条件「支持一键还原」就能看到所有可以一键还原的华为图文,目前有50多篇。

其中包括:

《“神奇动物”在这里,你能认出几个?》

《【4月1日首发】华为云重磅上新+3》

《熄灯后,HUAWEI P50 Pro怎么拍?》

《每一面,都是我》

《MWC 2022 @你,来逛展了!》

《马上就过年了,你最期待什么?》

《十大亮点回顾HDC2021》

《赛事开启,HarmonyOS 2提醒你查收观赛指南》

《用MatePad Pro,登上职场快乐星球》

另外苹果、宝马中国、GQ实验室等品牌也有许多案例支持一键还原,案例库支持一键还原的案例数量达7600+,一键还原的详细教程戳:《一键还原苹果、宝马和GQ图文,制作同款效果超方便啦!》

想直接使用编辑器制作的小伙伴,来看第二种方法的详细教程吧!

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

组合:长屏左滑组合

编号:10867(组合)

组件:点击-切换图片

编号:10005(组件)

第1步:选择组合

登录 iPaiban Pro 编辑器后,点击编辑器左侧「组合」按钮,点击「滑动组合」分类中选择「长屏左滑组合」,或者直接在「组合」中搜索编号10867。


第2步:添加组件位

点击「点击此处配置」,进入组合编辑模式。


在组合编辑模式中,默认放置了2屏滑动模块,华为案例中需要滑动8篇,我们点击「添加组件位」增加6屏滑动模块。


第3步:添加槽(小组件位)

每个滑动模块中默认有一个槽,一个槽代表一个小组件位,我们可以拖动需要的组件到槽中,一个滑动模块中可以添加多个槽。

注意,每个滑动模块的槽数可以不一致,但每个滑动模块所有槽中的图片加起来的图片高度应该保持一致。

华为案例中,第一屏滑动中有多个点击切换交互,说明有多个槽,我们点击「增加·槽」添加5个槽。其他屏滑动中只需添加1个槽。


第4步:拖拽组件到槽中并编辑

华为案例中主要用到了「无缝图」和「点击-切换图片」两种效果。我们在左侧组件中找到对应组件,按顺序分别拖拽到组件位中。


然后编辑组件上传需要的素材就可以了。


第5步:导入公众号后台

点击左上角「保存并退出」,在编辑器主页右侧点击「预览草稿」进行预览,预览没有问题后继续点击「导入微信后台」开始导到公众号。

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


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

新用户在「新手礼包」可领取3天企业标准版会员体验权,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。


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

·

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

    评论

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

    评论

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

    推荐评论

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

    全部评论(0条)