旋转木马

在本教程中，您将使用州和的相互作用创建三种不同类型的旋转木马:

• 旋转木马与上一个和下一个按钮
• 带有滑动点的旋转木马
• 自动旋转木马

为本教程下载一个准备好的。uxp文件。

设置设计

1. 在UXPin中从左侧打开一个原型快速工具菜单添加一个矩形到画布上。然后，复制它，这样你就有三个矩形。您可以水平或垂直放置它们。
2. 通过单击用图像填充每个矩形填充图像，或单击填写数据在顶部栏。
3. 选择所有三个矩形并使用Ctrl”G”快捷方式或从顶部栏。
4. 然后，检查裁剪所选内容复选框，并将其裁剪为想要作为第一张幻灯片的幻灯片。

5.单击添加状态图标或使用快捷方式Ctrl”转变””年代”。您已经创建了状态1(基础)。类型状态2对于第二个状态，单击输入。

6.然后单击新状态创建状态3，设置状态3的名称，单击输入。

7.点击状态2，抓取所有的幻灯片，同时移动它们并放下，这样第二张幻灯片就会出现在浅蓝色的帧中。对状态3的第三张幻灯片做同样的操作。

带有Next/Previous按钮的旋转木马

1.从状态1 -基础的快速工具菜单中添加两个图标。转到属性面板的图标部分，将它们转换为向上箭头和向下箭头。确保在基本状态中添加它们，以便它们也出现在其他状态中。

2.选择向上的箭头，在Properties面板的顶部单击+添加一个新的交互。

3.在Action部分中，单击更多的并选择以前的状态。

4.在“元素”下，选择“幻灯片组”。

5.点击添加。

6.现在选择向下的箭头并添加相同的交互，但是选择下一个状态在“操作”部分的“更多”下。

7.点击添加。

8.预览你的旋转木马。

旋转木马与幻灯片点

1.使用快速工具菜单中的椭圆形添加三个圆点到状态为1-Base的幻灯片组。

2.选择第一个点并单击+在Properties面板中添加新的交互。

3.在Action部分选择设置状态。

4.在“元素”下，选择带有幻灯片的组。

5.在“设置状态”中选择“状态1-Base”。点击添加。

6.然后，在另外两个点中添加相同的交互，在设置状态下拉框中分别选择状态2和状态3。同样，这些交互将自动出现在另外两种状态中。

7.当仍然处于基本状态时，选择另外两个点并将其不透明度更改为25% -这将使它们在该状态下显示为非活动状态。

8.在状态2中，只有第二个点的不透明度应该设置为80%。在其他状态下，根据这些状态所代表的幻灯片设置不透明度。

9.预览你的原型。

自动旋转木马

1.单击画布上的任何位置以选择页面，然后单击+在Properties面板中添加新的交互。

2.选择页面已加载从触发列表中删除。

3.在Action部分的More下拉菜单中，选择下一个状态。

4.在“元素”下，选择带有幻灯片的组。

5.在“动画设置”中，将延迟设置为2000毫秒。否则，第一张幻灯片会快速跳到第二张，而不会被看到。

6.点击添加。

7.现在，单击原型上的Group with States并向其添加新的交互。

8.从“触发器”列表中选择状态改变。

9.在Action部分的More下拉菜单中，选择下一个状态。

10.在“元素”下，选择带有幻灯片的组。

11.在动画设置下，将延迟设置为2000毫秒。

12.点击添加。

13.预览你的旋转木马。

您的旋转木马将在第一次状态更改后继续自动旋转。第一次状态更改将延迟到前一个状态更改后的两秒钟。此外，在到达最后一个状态后，旋转木马将返回到第一个状态。