Axure交互动效设计教程:引导页滑动效果
·在之前项目基础上将Page3改名为引导页->左边元件库中找到动态面板->单击鼠标左键选中不松手拖入页面中->右边样式面板中修改宽为375,高为667->取名为PM
·选中PM动态面板->双击鼠标左键->进入面板状态管理器->选中State1->双击鼠标左键->进入PM面板/State1面板中(这时会看到屏幕中与一个蓝色长方形虚框)
·左边元件库中找到动态面板->拖拽入页面中->右边样式面板中修改,宽为1125,高为667(这里以引导页3页的数量来建立的,此刻建立的宽=3*375),并取名为捆绑
·选中捆绑动态面板->双击鼠标左键->进入面板状态管理器->选中State1->双击鼠标左键->进入捆绑面板/State1面板中(这时是会看到屏幕中与一个蓝色长方形虚框)
·左边元件库中找到动态面板->拖拽入页面中->右边样式面板修改,宽为375,高为667,并取名为引导页一(引导页二和引导页三也是如此操作,大家自己动手操作加深印象)
·选中引导页一->双击鼠标左键->进入面板状态管理器->选中State1->双击鼠标左键->进入引导页一/State1面板中(这时会看到屏幕中与一个蓝色长方形虚框)
·左边元件库中找到矩形->拖拽入页面中->右边样式面板中修改,宽为375,高为667,给一个填充色(颜色随意),关闭引导页一/State1页面
·选中引导页二->双击鼠标左键->进入面板状态管理器->选中State1->双击鼠标左键->进入引导页二/State1面板中(这时会看到屏幕中与一个蓝色长方形虚框)
·左边元件库中找到矩形->拖拽入页面中->右边样式面板中修改,宽为375,高为667,给一个填充色(颜色随意),关闭引导页二/State1页面
·选中引导页三->双击鼠标左键->进入面板状态管理器->选中State1->双击鼠标左键->进入引导页三/State1面板中(这时会看到屏幕中与一个蓝色长方形虚框)
·左边元件库中找到矩形->拖拽入页面中->右边样式面板中修改,宽为375,高为667,给一个填充色(颜色随意),关闭引导页三/State1页面
前期的准备工作就这么多,下面我们来添加交互效果。
·进入捆绑/State1面板中->选中引导页一动态面板->双击鼠标左键进入面板状态管理器->选中State1->双击鼠标左键->进入引导页一/State1面板中)->选中矩形>右边属性面板中选中向左拖动结束时(如果没有请单击更多事件)
·在左边添加动作中找到移动单击->选中组织动作中的移动->编辑动作中选择捆绑->移动设置相对位置,X=-375,Y=0(在交互中向左是负数,向右是正数),动画线性->单击确定
·进入捆绑/State1面板中->选中引导页二态面板->双击鼠标左键进入面板状态管理器->选中State1->双击鼠标左键->进入引导页二/State1面板中)->选中矩形->右边属性面板中选中向左拖动结束时(如果没有请单击更多事件)
·在左边添加动作中找到移动单击->选中组织动作中的移动->编辑动作中选择捆绑->移动设置相对位置,X=-375,Y=0(在交互中向左是负数,向右是正数),动画线性->单击确定
·回到引导页二/State1面板中->选中矩形->右边属性面板中选中向右拖动结束时(如果没有请单击更多事件,第二页可以向左滑也可向右滑,所以要设置两个)
·在左边添加动作中找到移动单击->选中组织动作中的移动->编辑动作中选择捆绑->移动设置相对位置,X=375,Y=0(在交互中向左是负数,向右是正数),动画线性->单击确定
·回到引导页三/State1面板中->选中矩形->右边属性面板中选中向右拖动结束时(如果没有请单击更多事件)
·在左边添加动作中找到移动单击->选中组织动作中的移动->编辑动作中选择捆绑->移动设置相对位置,X=375,Y=0(在交互中向左是负数,向右是正数),动画线性->单击确定
好了所有的交互效果就完成了,点击预览可以看一看哦!