图片原地自动切换,像Apple一样加点儿呼吸感!

i排版编辑器

发布于:2026-08-10

摘要:

这个是我们最为常见的原地自动切换图片效果:


 



组件:自动-多图连续切换(无限循环)

编号:11210(组件)

别看它简单常见,但非常实用,能够用作的创意排版有不少,进一步了解这个效果的玩法可以戳:电影感排版,一个超简单的效果就实现了……


不过,原地自动切换图片还可以稍微来点儿不一样的,今天推荐大家两个。


自动原地放大轮播切换:


 



组件:自动-放大轮播(中心)

编号:12162(组件)

自动原地收缩轮播切换:


 



组件:自动-收缩轮播(中心)

编号:11298(组件)

它们比文章开头的轮播切换仅仅多了一个放大或收缩效果,即可营造出类似镜头呼吸的视觉层次感,显著提升了连续观看时的趣味性与沉浸感。


我们使用对应组件制作时,通过调整图片放大/收缩和停留动画的时长,可以创造不同感觉的效果。


比如Apple这个自动原地收缩轮播切换,收缩和停留动画时长比较小的情况:


 



*素材来自Appel特大号新闻,内含多位大咖。

组件:全能无缝图

编号:10018(组件)

组件:滤色滤镜遮罩

编号:11898(组件)

下面以最后Apple的效果为例,一起看下排版教程吧。



详细教程:


工具:i排版SVG编辑器,网址:SVG.iPaiban.com

组件:自动-收缩轮播(中心)

编号:11298(组件)


第1步:选择组件


登录i排版SVG编辑器后,点击编辑器左侧「组件」按钮,在「自动」分类中找到「自动-收缩轮播(中心)」组件,或者直接在搜索框中搜索组件编号11298,点击选择。



第2步:上传图片素材


在页面右侧点击「+」号,按顺序批量上传准备好的轮播图。所有图片尺寸需保持一致。上传后如果发现顺序不对,还可以上下拖动图片进行调整。



第3步:调整动画参数


据所需效果,分别调整「每张图片切换时间」、「每张图片静止时间」和「缩放倍数」。



点击最右侧「预览草稿」预览效果,根据效果可随时进行调整。


第4步:导入公众号后台


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



使用同步功能不用频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码预览在公众号的效果。


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




制作SVG交互图文认准i排版SVG编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端谷歌浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。

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

图片

● SVG交互排版👇🏻

 





iPaiban 团队可提供运营服务、视频制作、创意策划、多种风格设计、SVG交互开发等服务,如需定制,请添加玉兔微信(ID:playhudong15)沟通咨询。

 


图片

图片

                            
图片