喜茶最爱⽤的互动排版是怎么做的？我来教你
作为爱玩⿊科技排版的⼤户 — 喜茶，⼩编⾃然也要来扒⼀扒他们的SVG效果啦~ 喜茶的⽂章⾥最爱⽤的就是点击展开的互动效果。
这篇⽂章⾥所呈现的互动效果其实是套⽤了点击切换gif图和点击展开两种效果，在135编辑器⾥使⽤⼀般的SVG样式是⽆法实现的，但是⼩编可SVG编辑器⾥轻松还原，下⾯有详细的操作教程噢~
以在SVG编辑器
操作教程：
准备⼯作：开始制作这篇喜茶的互动排版之前，我们需要准备⼀张点击前的封⾯gif图，⼀张点击后切换的gif图，以及展开显⽰的长图内容，拆解准备⼯作：
如下：
免费编辑器
1、第⼀步：打开SVG编辑器，在【组合】栏⽬下到【点击换图展开-⾃定义触发】卡⽚，单击将其放⼊中间的编辑区
2、第⼆步：第⼆步：在编辑器右侧点击【添加图⽚】按钮，将准备好的封⾯图和切换图依次上传，并在下⽅设置好动画时长的参数
3、第三步：点击【编辑展开内容】按钮，进⼊此编辑界⾯。在素材栏点击【⽆缝图-图⽚不可弹出】，并上传展开显⽰的长图 （这⾥也可以插⼊其他的效果进⾏套⽤）
4、第四步：上传完成后，点击中间橙⾊的【完成编辑】按钮，回到主编辑界⾯，⿏标拖动红⾊的触发热区，调整触发区域的位置和⼤⼩，热区外的位置点击不响应

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。