事件 #

事件会触发画板之间的过渡转换。要添加一个事件，先在画布上选择一个图层，点击出现在它右边的闪电按钮，然后选择一个圆圈拖到目标画板。一个从源画板到目标画板的过渡箭头将被添加到画布上。

将 outlet 箭头拖到所选图层的画板上，将创建一个重复的画板。

不透明度为 0% 的图层不具有交互性。所以不要使用不透明度为 0% 的图层。

有几种不同类型的事件：

  • Tap：当图层被点击然后抬起，中间不产生移动时触发。常用于按钮。

  • Drag Begin：当手指放在图层上并开始移动时，该事件就会触发。将此事件添加到一个图层将使该图层可被拖动。如果目标画板中有同名图层，则其可拖动状态将决定事件触发后拖动交互是否继续。

  • Drag End：当在图层上移动的手指被抬起时触发。将此事件添加到图层会将其垂直和水平属性设置为拖动。

  • Scroll Begins：当一个可滚动的图层开始滚动时触发。将此事件添加到图层会将其垂直和水平属性设置为滚动。

  • Scroll Released：当手指滚动图层时触发。此事件适用于滚动和分页。由于减速或分页动画，此事件后内容可能会继续滚动。将此事件添加到图层会将其垂直和水平属性设置为滚动。

  • Scroll Ended：当滚动完全停止时触发。这个事件对滚动和分页都有效。因为减速需要一段时间才能完全停止，这个事件在触发之前可能会有一个比预期更长的延迟。将此事件添加到图层会将其垂直和水平属性设置为滚动。

  • Touch Down：当手指接触到该层时就会触发。

  • Touch Up：当手指从一个图层上移开时触发。

  • Long Press：当手指在图层上按下超过半秒时就会触发。

  • Hover Inside：当鼠标在图层内时会触发。

  • Hover Outside：当鼠标在图层外时就会触发。

  • Auto：自动触发，无需用户有任何动作。这个可用于循环播放的原型和动画。但自动事件只在鼠标停留在预览区时触发，以节省电量。

    要给自动事件添加延迟，请点击自动事件的箭头，在 Animate 面板中添加延迟。

    为了在没有动画的屏幕之间延迟自动事件，你可以在屏幕外的两个画板上添加一个虚拟层，位置稍有不同。这将创建一个可以延迟的动画。

消息事件 #

从 Principle 3.0 开始，组件和它们的父级可以用消息事件进行交流。消息事件大大降低了原型的复杂性，它允许组件之间相互控制，而不需要导航到一个完全不同的画板。消息事件可以从组件到父级，父级到组件，或者从组件到组件。

事件可以发送消息，监听消息，或两者兼而有之。事件监听并向一个特定的层发送消息：要么是一个组件，要么是该组件的父级。为了使消息发挥作用，必须同时有一个发送和监听事件。例如，一个电子邮件组件可以发送一个 “发送邮件 ”信息给父类，而父类有一个来自组件的事件来监听 “发送邮件 ”信息。仅仅因为一个组件发送或监听一个特定的消息，并不一定意味着在该消息的另一端有一个事件。Principle 将在创建进入和离开组件的事件时为你创建发送和监听事件。

向父级发送事件 #

要把一个事件从一个组件发送到它的父级，进入该组件，像往常一样开始创建一个 Tap 事件，但把箭头拖到画布左上方的 “Send to Parent” 按钮上。悬停在该按钮上将显示一个弹出窗口，让你在父级中选择一个画板。这将创建两个事件：一个在组件中，当 Tap 触发时向父级发送消息，另一个在父级中，监听相同的消息，然后转到父级中的另一个画板。

向组件发送事件 #

要向一个组件发送事件，把事件箭头拖到一个有闪烁蓝边的组件上，以显示组件画板的弹出窗口。然后在所需的目标画板上释放。

在现有组件信息上触发 #

点击组件上的闪电按钮将显示一个弹出窗口列出传统的事件，比如 Tap，但也会显示该组件向父级发送的所有信息。

重命名消息事件 #

Principle 给信息提供了独特的默认名称，如 “事件 1”，但你可以改变这一点，给事件提供更有意义的名称，或从一个信息切换到另一个。

双击事件箭头上的蓝色信息，可以编辑该信息。Principle 有一个小魔法，使其重命名一个已发送的信息将自动重命名监听的信息，反之亦然。

由于消息只是文本，文本必须与发送事件完全匹配，以触发监听事件。发送 “Send Mail ”的事件不会触发监听 “Send-Mail ”的事件。

改变事件类型 #

如果你想改变触发转场的事件类型，你可以删除转场（点击转场箭头并按键盘上的删除键），然后用所需的事件类型创建一个新转场。你的动画关键帧和曲线不会丢失，因为它们存储在画板中，而不是在过渡中。

触摸的优先级 #

让我们来看看几个例子。

组（有 Tap 事件） - 子图层（有 Tap 事件）

点击图层将触发该图层的点击事件。只有在不接触图层的情况下，可以点击组的事件才能被触发。

另一方面，考虑这种情况。

组（有 Tap 事件） - 子图层

敲击图层会导致组的敲击事件触发。由于图层不使用触摸，它被传递给组，组将其用于 Tap 事件。

组件的工作方式也是如此。

组（有拖动事件）-- 子组件 -- 子图层（在组件中有拖动事件）

拖动图层只会触发图层的拖动事件，因为它是最内层的图层，而组上的拖动事件将不会触发。

可触摸 #

可触摸属性允许你控制一个图层是否捕获触摸，或允许触摸通过它。给一个图层添加一个事件（比如点击）或一个内置的交互（比如拖动）会把这个图层标记为可触摸。取消勾选可触摸将移除事件并清除其水平和垂直属性。一个图层的可触摸属性并不影响它的子图层的可触摸属性：一个可触摸的图层将永远是可触摸的，即使它的父层不是这样。

对于有一个大的透明画板的组件来说，不勾选可触摸是很有用的，这样组件就不会阻止触摸到它后面的其他层。另一方面，有时你希望图层是可触摸的，这样它们就能阻止其他图层得到触摸，比如在为模态弹出式用户界面设计覆盖层时。

动画