马年春节做图文，「马」这个元素可以怎么玩？
之前早就跟大家整理了和马有关的创意SVG图文，没有灵感赶紧看起来：《马年春节SVG交互图文案例合集》
今天再跟大家介绍一个好玩的，用光栅小马排版，点击试试：
这里是用光栅动画的设计，配合点击滑动后展开的排版实现的一种效果。
想要实现光栅动画，其实就需要两张图片，一张位于上方的光栅图，一张位于下方的静态图案。
如何制作出这两张图片？大家在B站或小红书搜一下有很多教程，但大多都是Ps制作教程，可能需要具有一定的设计基础才能实现。
这里跟大家推荐一个光栅动画图片制作的免费网站，网址：scanimation.org
通过网站制作非常简单，上传几张连贯动作的图片，即可一键生成需要的光栅图和静态图案。
![]()
前面案例的两张光栅素材就是在网站中上传了下面几张小马奔跑的图片生成的。
![]()
知道了素材怎么做，下面一起看下排版教程吧。
详细教程：
工具：i排版SVG编辑器，网址：SVG.iPaiban.com
组合：点击右移切换图片+展开
编号：11027（组合）
第1步：选择组合
登录i排版SVG编辑器后，点击编辑器右侧「组合」按钮，在「花样展开」分类中找到「点击右移切换图片+展开」组合，或者直接在搜索框中搜索组合编号11027，点击选择。
![]()
在组合编辑模式中，分为展开前和展开后两块设置区域。点击「展开前」区域，在右侧有4个「换图」按钮，分别上传「点击前」、「点击后」、「背景图」和「前景图」图片。4张图片尺寸需保持一致。本文案例我们只需上传「点击前」、「点击后」、「背景图」3张图片。「展开后」的内容支持嵌套各种组件，需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：点击页面空白处，在右侧可以设置切换时长和展开时长。「切换时长」指点击后图片移动切换的时间。
「展开时长」即图文全部展开花费的时长。
如果预览效果发现内容没有完全展开或者展开过长，可以通过「加减展开高度（px）」进行调整，输入负数减小展开高度。内容编辑完毕后，点击左上角「保存并退出」逐步退出组合编辑模式回到编辑器主页面。退出后点击最右侧「预览草稿」可随时扫码预览效果，效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。
使用同步功能可以不用频繁在编辑器和微信后台切换，同步成功后可以立即扫码预览二维码查看。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
更多新年春节排版教程：
点击下拉放烟花，知乎这篇春节图文怎么做？
红包套红包，PayPal的红包套娃排版教程来了！
原来一个新年签排版能有这么多赞啊！
新年，点击翻转一下就翻篇儿吧！
谷粒多这种选新年关键词的排版，怎么弄啊？
发红包啦！直接的
保时捷的这种点击拆红包展开排版，怎么做的？
这篇「遥遥领先」的红包雨图文，是怎么实现的？
制作SVG交互图文认准i排版SVG编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端谷歌浏览器打开，即可注册，编辑器所有组件/组合现已全部支持免费试用了。新用户在「新手礼包」可领取3天企业标准版会员免费商用，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。 ![图片]()
iPaiban 团队可提供运营服务、视频制作、GEO、创意策划、多种风格设计、SVG交互开发等服务，如需定制，请添加玉兔微信（ID：playhudong15）沟通咨询。
