
状态改变时事件以状态改变时事件为例做个小案例,我们先添加按钮并添加“鼠标单击时事件”触发图片状态的改变。

然后再主页“状态改变时”事件下添加用例,先添加条件,如果面板状态为“橙子”时,我们就设置动态面板的状态为“牛油果”,并设置动画的进入、退出方式。


同样我们继续添加case2,还是先添加条件,如果动态面板的状态为“牛油果”时,设置动态面板的状态为“柠檬”。这里一个条件,一个动作。


然后用同样的方式设置case3,添加条件如果动态面板状态为“柠檬”,设置动态面板的状态为“苹果”。Case4添加条件如果动态面板状态为“苹果”设置动态面板状态为“橙子”,这样当我们点击“轮播”按钮时,他就会自动进行无限循环。
拖动时事件拖动事件是由面板拖动或者快速点击、拖、释放而触发的。这个时间常用于APP原型中的幻灯和导航。最常见的使用方法是配合“设置面板状态”到下一个/上一个。拖动时事件案例,以上面的轮播图为例,我们点击主页向左拖动结束时事件,设置动态面板状态为“next”,向后循环,并设置进入动画的方式为“向左滑动”,同理设置“向右拖动结束时”事件,设置动态面板的状态为“previous”,向前循环,并设置进入退出动画的方式为“向右滑动”。如下图:

设置完后,当我们预览时效果就是,鼠标点住图片向左或向右拖动,可以切换为下一张图片。其他的拖动事件和向左、向右拖动事件方式一致。
开始拖动时:当开始拖动的时候,就进行图片的转换
正在拖动时:在拖动的过程中,进行图片的切换
结束拖动时:当我们拖动结束,释放鼠标左键的时候,开始进行图片转换。
滚动式事件动态面板的滚动事件是由动态面板滚动栏的滚动所触发的。案例的具体操作如下:1、首先右键点击“滚动条”,勾选自动显示垂直滚动条

2、在页面更多事件中选择滚动时事件添加用例,添加条件当值[[This.scrollY]]>200(当Y轴的滚动大于200像素时),添加动作设置隐藏


预览效果如下图,当我们向下滚动超过200像素时,图像自动隐藏

改变大小时事件改变大小时事件是当动态面板大小改变时由“设置面板尺寸”动作触发的。当“设置面板尺寸”这个动作用在其他的元件上时,也可以用来触发一连串的事件。改变大小时事件案例步骤如下:1、首先我们添加按钮,并设置鼠标单击时事件,添加改变大小的动作,设置宽、高均为500.这样当我们点击时动态面板会变大。

2、在页面更多事件中添加“尺寸改变时”事件,添加条件,当值[[This.width]]>499(当宽>499时),添加动作“设置尺寸”宽、高都变回330.并设置动画效果为“线性”


这样我们预览时,当我们点击按钮,将图片尺寸变大为500时,当超过450会触发他的改变大小事件,图片会自动缩回330.
















