公众号抽取卡牌 SVG 效果制作教程：用 i 排版编辑器实现四 / 五 / 六图互斥抽牌

 

来来来，玩个抽牌：

*素材来自Boucheron宝诗龙《藏不住了🧧》

宝诗龙这种抽取卡牌的效果怎么做？

今天就给大家奉上详细教程。

在前几天 iPaiban Pro 8月会员日的推文《浪浪山小妖怪吐槽大会》.svg也用到了这种效果：

其实用 iPaiban Pro 黑科技编辑器（SVG.iPaiban.com）就能实现，抽取的卡牌数还可以是五图或六图。

下面以上方四图的效果为例，一起看下排版教程吧。

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

组件：点击-互斥抽取卡牌(四图)

编号：12119（组件）

第1步：选择组件

登录 iPaiban Pro 黑科技编辑器后，点击编辑器左侧「组件」按钮，在「点击」分类中找到「点击-互斥抽取卡牌(四图)」组件，或者直接搜索组件编号12119，点击选择。

第2步：上传图片

点击右侧两个「换图」按钮分别上传背景和前景图。两张图片尺寸一致，宽度不要超过1080px。

点击「+」号上传4张卡牌图，所有卡牌图尺寸需保持一致。

注意，背景和前景图的宽高都需大于卡牌图。卡牌图的尺寸，就是在背景图上显示的范围大小。

第3步：设置动画参数

在右侧对应位置，依次输入动画时间、卡牌初始位置下移调整、卡牌抽取后停留位置调整。

点击最右侧「预览草稿」，可随时扫码预览效果，根据预览效果即时进行参数调整。

第4步：导入公众号后台

扫码预览效果满意后，接着点击「同步至微信后台」就可以了。

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

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。