受团队信任
触发器和动画构成了任何交互的两个主要方面:触发器是开始或继续动画的。
设计器中的交互面板允许您使用触发器和动画构建复杂的交互。触发器——如单击一个元素或向下滚动页面——可以启动页面上的一个或多个元素，甚至可以连续使其呈现动画效果。
在本指南中，我们将介绍与构建交互相关的触发器和动画。
交互面板分为两个主要部分:
元素触发器和页面触发器。
让我们来看看每种类型的触发:
交互面板的顶部部分允许我们进行添加
元素触发器，它在与对象交互时触发动画
类似元素的悬停或点击。
添加元素触发器有两个主要步骤:
当您与导航栏、下拉菜单、选项卡和滑块交互时，还可以触发自定义动画。默认情况下，这些触发器类型是隐藏的。一旦你在画布上选择相应的元素，你就可以访问它们:
我们可以在交互面板的较低部分进行操作
添加页面触发器，当页面发生更改时触发动画
加载页面时的状态。
与元素触发器不同，添加页面触发器只涉及
一个步骤:只需按+来选择触发器类型。
在我们选择要添加的触发器类型之后
交互面板，我们可以精确地指定我们想要发生的事情。的选项
这取决于所使用的触发器的类型。例如,一个
，是连续的——它们会连续地跟随鼠标移动
或滚动位置影响动画。
默认情况下，如果您在一个元素上设置了一个触发器，那么交互将在所有设备上发生—并且仅当您与该特定元素交互时才会发生。
若要在特定设备上触发动画，请取消选择不希望在其上发生动画的设备。
如果您想在具有相同类的所有元素上触发动画，只需在一个元素上设置一个交互，并将其应用到该元素的类上。只需在触发器设置中更改触发器的目标，并将其设置为影响类的。
查看示例并阅读更多内容:对重用交互
根据触发器来设置动画，你只需要
创建、打开
或者，如果你已经为这种类型的触发器创建了动画
您可以从列表中选择您的项目:
无论你是在创建一个新的动画还是编辑一个
现有的动画，动画时间轴是一个界面，在其中你可以
使用关键帧(或
)动画
不同的元素。
在这个例子中，我们创建了一个动画
页面滚动。当我们向下滚动页面时，顶部的文本水平移动
透明度降低。正如我们在下面看到的，播放头(绿色)显示了页面的当前位置。
虽然我们可以创建基于一些
触发器(使用毫秒、秒等)，我们的示例使用百分比来
指示当前滚动位置。
在这种情况下，0%表示我们在页面顶部，
100%表示我们已经向下滚动到页面底部。
在0%时，我们有四个操作——文本背景和文本背景各有两个操作
文本的前景。这些操作只是将位置设置为0px(没有移动)和
不透明度为100%(完全不透明)。下面，我们可以看到滚动动画的开始动作:
在100%的情况下，我们还有四个动作——每个动作都是对
我们已经在上面配置了操作。在本例中，每个元素移动900px
任意方向，不透明度设置为0%。让我们看看滚动动画的结束动作:
如下面所示，在任何时候，我们都可以通过按+来添加操作
在交互面板的右上角，或者我们可以简单地在
在现有操作之前、上面、之间或之后的时间轴，以内联添加操作。
默认情况下，任何添加到动画时间轴的动作都会影响所选元素。然而，你可以通过两种方式改变操作的目标:
要替换动作影响的元素，请在动画时间轴中右键单击动作，选择改变目标，然后在画布上选择一个不同的元素。
必须知道
更改动画时间轴内的任何设置都会影响触发该动画序列的所有交互。
创建操作后，可以选择该操作是否影响:
这是您创建的任何动画动作的默认目标。
设置为影响所选元素的任何操作将始终影响该特定元素。因此，当您使用影响所选元素的动作重用任何动画时，无论什么元素触发交互，动作仍然会影响这个特定的元素。
您可以选择以所选元素的类为目标。该选项确保特定的动画动作影响具有相同属性的所有元素类作为所选元素。
您还可以将受影响的元素限制为交互触发器的子元素、兄弟元素或父元素。
比方说，当页面加载时，您希望许多元素以相同的模式移动。
您可以将相同的类分配给所有这些元素。然后，使用组合类来改变它们的初始位置。这将允许您对基类应用相同的操作，并让每个元素以相同的模式从不同的位置开始移动。
通过指定类是触发元素的子类、兄弟类还是父类，可以选择限制受操作影响的类。
现在，回到按钮的例子。当鼠标悬停在一个按钮上时，您可以使用类目标将所有按钮箭头动画化。然而，在这里你会注意到鼠标悬停在一个按钮上将使页面上所有按钮中的所有按钮箭头呈现动画效果。若要将操作限制在您悬停的按钮上，请确保选择只有这个类的孩子选项。
您可以使用只有这个类的兄弟姐妹选项，当您想要动画的元素是触发元素的兄弟元素时，例如菜单下拉菜单或弹出式模式。您可以类似地使用只有父母才有这个班选项，当您想要动画的元素是触发器元素的父元素时。
的交互触发选项允许您创建仅影响交互触发器的操作。在任何其他交互中重用此动画将用新交互的触发器元素替换操作元素。这可以帮助您快速地将相同的动画应用到任何元素，而不需要创建新的动画。
