这样切换图片超优雅！教你制作苹果5种点击移动式切换
苹果的图文，篇篇都是SVG排版。
苹果图文中点击切换图片效果，却几乎篇篇不一样。
今天我们就来欣赏一下苹果图文中5种点击移动式切换效果，每种效果都是优雅又高级。效果下面附有相应的教程。
第1种，可返回的两列触发全屏左滑：
*素材来自Apple《缤纷派，超能派，有请 2 款新 iPad。》
组件：Apple同款-两列触发全屏左滑(有返回触发区)
编号：11340（组件）
第2种，点击左移扩大切换图片：
*素材来自Apple《一个“文”字，看懂实况文本。》
组件：Apple同款-点击左移扩大切换图片,点击返回(有触发区)
编号：11540（组件）
第3种，可返回的点击左右往返滑动切换：
*素材来自Apple《这块健康神器，帮你各种比心。》
组件：Apple同款-点击-左右往返滑动切换
编号：10581（组件）
第4种，点击向左移出+左滑(自动对齐)：
*素材来自Apple《出门玩啦！手持这套绝活，旅行全程罩住你。》
组件：Apple同款-点击向左移出+左滑(自动对齐)
编号：11702（组件）
第5种，是苹果前不久推送的一篇图文中的效果，也是这5种中最为简洁的一个，可返回的点击左移切换图片：
*素材来自Apple《春运记不住座位号？iPhone 灵动岛和锁屏来冒泡。》
组件：Apple同款-点击左移切换图片,点击返回(有触发区)
编号：11846（组件）
下面一起看下教程。
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组件：Apple同款-点击左移切换图片,点击返回(有触发区)
编号：11846（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器右侧「组件」按钮，在「点击」分类中找到「Apple同款-点击左移切换图片,点击返回(有触发区)」组件，或者直接搜索组件编号11846，点击选择。
第2步：上传图片素材
点击右侧两个「换图」按钮分别上传切换前和切换后的图片。两张图片尺寸需保持一致。
第3步：设置触发区域
双击编辑区上传的切换前图片，拖动红色色块调整点击切换的触发区。
双击编辑区上传的切换后图片，拖动红色色块调整点击返回的触发区。
第4步：调整动画参数
拖动右侧底部动画时间的滑杆调整图片移动的时间。
点击最右侧「预览草稿」可随时扫码预览效果。
第5步：导入公众号后台
效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）