事件是触发画板之间的过渡。要添加事件,请在画布上选择一个图层,然后单击其右侧显示的闪电按钮,然后从其中一个圆圈拖动到目标画板。将从源画板指向目标画板的画布添加过渡箭头。
将出口箭头拖动到所选图层的画板将创建一个复制画板(例如从A画板拖到指向A画板本身,会额外复制一个A画板 copy)。
134179-d85bf18ec6a90dd3.gif
添加触发事件
不透明度为0%的图层不是交互式的。要创建清晰的可点击区域,请使用清除填充的方式而不是0%不透明度。
134179-92d839d903da8ea8.png
该设置可仿“热点”选区


触发事件的类型:

1、Tap
点击,当图层被点击、轻触时,常用的按钮。
2、Drag Begins
拖动开始,当手指按住图层开始移动时,添加此事件要确保图层已设置可拖动,如果目标画板有相同名字的图层,拖动交互在事件发生之后,拖动状态将被结束。
3、Drag Ends
拖动结束,当手指在图层上移动并抬起时,添加此事件要确保图层的垂直和水平属性已设置可拖动。
4、Scroll Begins
滚动开始,当图层开始滚动时,添加此事件要确保图层的垂直和水平属性已设置可滚动。
5、Scroll Released
滚动释放,当手指在图层上滚动并抬起时,此事件同事对滚动和翻页起作用。在事件发生之后,页面内容可能继续滚动。添加此事件要确保图层的垂直和水平属性已设置可滚动。
6、Scroll Ends
滚动结束,当滚动完全停止时,此事件同事对滚动和翻页起作用。由于从减速到完全停止需要一点时间,所以此事件可能需要较长时间的延迟才发生。添加此事件要确保图层的垂直和水平属性已设置可滚动。
7、Touch Begins
按下,当手指接触到图层时,可用于制作高亮状态的转换效果按钮。
8、Touch Ends
抬起,当手指从图层抬起时,可用于制作非高光按钮。如果是没有添加触发事件的图层则不会生效。
9、Long Press
长按,当手指按住图层0.5秒后。
10、Hover Inside
鼠标移入,当鼠标移进一个图层时。
11、Hover Outside
鼠标移出,当鼠标移出一个图层时。
12、Auto

  • 自动跳转,当页面打开时自动触发,适用于循环动效,只有当鼠标进入预览框时才触发事件,目的是节省电池寿命,也让你更理智的进行设计。
  • 给自动触发事件添加延迟,可以点击箭头连接线展开动画面板。你可以在每个画板上创建一个位置有细小差异的虚拟图层,来实现自动跳转事件的延迟动效。

    1. ![134179-6079eda9855c1c1f.png](https://cdn.nlark.com/yuque/0/2020/png/722066/1598411933560-9d935779-8f85-4828-ad2e-30e001dc01ef.png#align=left&display=inline&height=767&margin=%5Bobject%20Object%5D&name=134179-6079eda9855c1c1f.png&originHeight=767&originWidth=454&size=132507&status=done&style=shadow&width=454)<br /> Principle5.6中触发事件的名称发生了变化

消息事件(Message Events)

  • 从Principle3.0开始,组件及其父级可以与消息事件进行通信。消息事件通过允许组件相互控制而无需导航到完全不同的画板,大大降低了原型的复杂性。消息事件可以从组件发送到父组件,父组件发送到组件,或从组件发送到组件。

                                           ![134179-3f9684aed45ff720.gif](https://cdn.nlark.com/yuque/0/2020/gif/722066/1598412069966-2785c331-2743-4ecf-8c87-6af569c48b1a.gif#align=left&display=inline&height=217&margin=%5Bobject%20Object%5D&name=134179-3f9684aed45ff720.gif&originHeight=217&originWidth=420&size=3121629&status=done&style=shadow&width=420)<br />                                                                                         子集与父页面添加消息事件
    
  • 事件可以发送消息,侦听消息,或两者兼而有之。事件侦听并向特定层发送消息:组件或组件的父级。要使消息起作用,必须同时发送和侦听事件。例如,电子邮件组件可以向父母发送“发送邮件”消息,并且父母具有来自侦听“发送邮件”消息的组件的事件。仅仅因为组件发送或侦听特定消息并不一定意味着该消息的另一端存在事件。在创建进出组件的事件时,Principle将为您创建发送和侦听事件。

    将事件发送给父组件(Sending events to parent)

  • 要将事件从组件发送到其父组件,请输入组件并像往常一样开始创建点击事件,但将箭头拖动到画布左上角的“发送到父级”按钮。将鼠标悬停在按钮上会显示一个弹出窗口,您可以在其中选择父级画板。这将创建两个事件:一个在组件中,当由tap触发时向父组件发送消息,另一个事件在父组件中侦听同一消息然后转到父组件中的另一个画板。

    将事件发送到组件(Sending events to component)

  • 要将事件发送到组件,请将事件箭头拖到具有闪烁蓝色边框的组件上,以显示组件画板弹出窗口。然后在期望的目标画板上释放。

    触发现有组件消息(Triggering on existing component messages)

  • 单击组件上的闪电按钮将显示列出传统事件(如tap)的弹出窗口,但还将显示组件发送给父组件的所有消息。

    重命名消息事件(Renaming Message Events)

  • Principle为消息提供唯一的默认名称,如“事件1”,但您可以更改此选项以为事件提供更有意义的名称或从一个消息切换到另一个消息。

  • 双击事件箭头上的蓝色消息可以编辑消息。原则有一点神奇之处,因此重命名已发送的消息将自动重命名侦听消息,反之亦然。
  • 由于消息只是文本,因此文本必须与发送事件完全匹配才能触发侦听事件。发送“发送邮件”的事件不会触发和事件侦听“发送邮件”。

    更改事件类型(Changing an Event Type)

  • 如果要更改触发转换的事件类型,可以删除转换(单击转换箭头并按键盘上的删除),然后创建具有所需事件类型的新转换。您的动画关键帧和曲线不会丢失,因为它们存储在画板中,而不是存储在过渡中。

    触摸传递(Touch routing)

  • 触摸被传递到最顶部,最内部嵌套的图层,这些图层被标记为可触摸,然后向上传递父图层,直到其中一个图层可以使用触摸。

我们来看几个例子:

组(具有点击事件)

  • 图层(具有点击事件)

点击图层将触发图层的点击事件。只有在无需触摸图层的情况下点击该组时,才能触发该组的事件。

另一方面考虑这种情况:

组(具有点击事件)

  • 图层

点击图层会导致组点击。由于图层不使用触摸,因此它会传递给Group,后者将其用于tap事件。

组件的工作方式相同:

组(具有拖动事件)

  • 组件
  • 图层(在组件中具有拖动事件)

拖动图层将仅触发图层的拖动事件,因为它是最内层,并且组中的拖动事件不会触发。


可触摸(Touchable)

  • 可触摸属性允许您控制图层是否捕获触摸,或允许触摸通过它。向图层添加事件(如点按)或内置交互(如拖动)会将图层标记为可触摸。取消检查可触摸将删除事件并清除其“水平和垂直属性”。图层的可触摸属性不会影响它的孩子的可触摸属性:即使它的父级不是,也可以触摸可触摸的图层。

  • 对于具有大型清晰画板的组件,保持可触摸不受控制是有用的,这样组件不会阻止触摸到达其后面的其他层。另一方面,有时您希望图层可以触摸,以防止其他图层被触摸,例如在为模态弹出UI设计叠加层时。