翻翻翻翻翻翻翻翻页效果，能调角度啦！

原创赞收藏评论

举报 2022-12-14

扫描,分享朋友圈

还在烦恼年度报告图文如何呈现的小伙伴，请看前段时间为大家准备的往期案例《年度报告怎样才不枯燥？先看大众、小鹏、长电等8个案例找找灵感吧》。

在里面的8个案例中，伏小桃茶饮的连续点击翻页效果简单直接，没有太多复杂的交互，用户只需像浏览电子书一样，连续点击翻看品牌一年来的特殊事件，很有仪式感：

这是怎么实现的？

使用iPaibanPro编辑器即可制作。
在编辑器「组件」中搜索关键词「翻页」可以看到所有相关组件，其中「连续点击-开门切换图片(翻页、左下、有触发区)」（编号：11385）和「连续点击-开门切换图片(翻页、左上、有触发区)」（编号：11403）两个组件可实现的效果最为全面，除了从名称中可以看出的可连续点击、可设置触发区以及翻页方向的不同，它们还支持翻页角度的调整。
伏小桃茶饮原文效果的翻页方向和角度分别为左下、90度，我们再看下左上、90度：

保持左下方向不变，调整为45度再试试：

方向不变，翻页角度调整为0度：

大家在制作年度报告相关图文时，也可以考虑这种排版效果。

如果你的内容还想在翻页的基础上继续拓展，在「组合」中搜索关键词「翻页」，将会看到「连续点击翻页(左下)+展开(有触发区)」（编号：11407）和「连续点击翻页(左上)+展开(有触发区)」（编号：11405）两个组合，翻页结束之后图文可以展开呈现更多更详细的内容。
以制作伏小桃茶饮原文效果为例，一起看下教程吧：

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com

组件：连续点击-开门切换图片(翻页、左下、有触发区)

编号：11385（组件）

第1步：选择组件

点击右侧「+」号上传准备的图片素材，图片尺寸需保持一致。

第3步：调整动画时间和角度

在右侧下方滑动滑杆调整翻页动画的时间。输入数值调整开门（翻页）角度，默认为90度，一般保持默认即可。

第4步：调整点击触发区域

双击编辑区的图片，通过调整红色色块即可确定点击触发的区域。如果每张图片的触发区不一样，点击「下一张」依次调整；如果每张图片的触发区一样，调整好第一张的触发区后，点击「为所有图片的应用此配置」即可。

点击最右侧「预览草稿」可随时预览效果。

第5步：导入公众号后台

效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。

使用同步功能可以不用频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。

如需局部导入可参考：《iPaiban Pro小助手v2.0安装和使用教程》

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

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