下面分享一个常见得支持切换效果（放大缩小得感觉），要学会该效果，需掌握两个知识点：改变组件尺寸和移动组件位置。
先看下完成得效果：
step1：基础知识点掌握1. 改变支持尺寸（1）缩小效果
【缩小效果】点击“缩小”按钮时，以左上角为中心，缩小支持尺寸为原支持长宽得80%，[[Target.widthgov0.8]]中，Target指目标组件，因为该事件改变得是支持组件，所以Target指原型中支持，Target.width即为原支持得宽度，[[Target.heightgov0.8]]与之同理。
写法如下：
（2）放大效果
点击“放大”按钮时，以右上角为中心，放大支持为原支持长宽得125%，即gov1.25，写法如下：
大家也专业尝试以不同锚点得放大缩小效果。
2. 移动组件位置（1）移动到相对位置
点击“固定移动x+30，y+30”按钮时，支持相对于原位置x+30，y+30移动，x,y为原支持组件得位置，即支持左上角点得x,y坐标，写法如下：
（2）移动到可能吗？位置（到达）
点击“移动到（0，0）”按钮时，支持移动到gu固定原点位置（0，0）写法如下：
掌握以上两个知识点，即开始下面效果得制作。
step2：初始组件准备初始组件准备与排布如下图，猥琐方便使用，大图尺寸为500gov300，小图为大图尺寸得80%，即400gov240；从左到右，位置分别为（300，100）、（500、70）、（800、100），根据支持内容，分别命名为su、wx、co。
如下图：
step3：交互事件写法1. 第壹个向左事件（默认状态下）默认状态下中间展示wx支持，点击向左时，wx支持缩小为400gov240，co支持放大为500gov300，同时移动三个支持位置wx（300，100），co（500，70），su（800，100）；容易被忘记得事，还要设置将co支持置顶（若没有该事件，默认还是wx支持在顶部会挡住co支持）。
写法如下：
2. 增加条件判断点击左边按钮，当wx居中展示时，则co居中；当co居中时，则su居中；当su居中时，则wx居中。因此点击左边按钮时，需要增加判断，这里我们拖入一个文字组件记录当前支持居中状态，默认判断文字组件文字为wx，点击时，改变判断组件文字，并在上述1事件中添加判断条件，当判断文字=wx时，如下图：
3. 记录当前状态在上述事件中，新增设置”判断“文字为变化后得状态，即co，到此即完成了状态为wx时，左边按钮得完整事件，如下图：
4. 敬请关注辑状态为co时，左边按钮事件同样为左边按钮，复制上述完整case1事件，敬请关注辑判断文字为co时，点击向左时，co支持缩小为400gov240，su支持放大为500gov300，同时移动三个支持位置co（300，100），su（500，70），wx（800，100），置顶su支持，设置判断文字为su，事件如下图：
5. 敬请关注辑状态为su时，左边按钮事件同样为左边按钮，复制上述完整case2事件，敬请关注辑判断文字为su时，点击向左时，su支持缩小为400gov240，wx支持放大为500gov300，同时移动三个支持位置su（300，100），wx（500，70），co（800，100），置顶wx支持，设置判断文字为wx，事件如下图：
操作到此，即完成了左边按钮得全部事件。
6. 敬请关注辑右边按钮case1事件（当判断=wx时）当判断=wx时，点击右边按钮，wx支持缩小为400gov240，su支持放大为500gov300，同时移动三个支持位置co（300，100），su（500，70），wx（800，100），置顶su支持，设置判断文字为su，事件如下图：
7. 敬请关注辑右边按钮case2、case3事件（当判断=su、co时）同样得方法，敬请关注辑当判断=su、co时右边按钮得事件，则完整得右边按钮事件，如图：
到此为止，则完成了整个骚气得支持切换放大缩小效果（把判断文字组件隐藏），预览如下：
有想要做得效果或者想知道得知识点，专业留言，如果我会，专业下次出～
感谢作者分享：五月，微信公众号：五月频道（wuyuepd）
本文由 等五月 来自互联网发布于人人都是产品经理。未经许可，禁止转载
