图片播放器 Photo Carousel6.5

本课程学习使用“设置面板状态为指定状态”动作，动作配置中的“下一个”“上一个”状态，制作滑动图片横幅。

图片播放器

步骤1：在右边三角按钮添加OnClick用例

首先，打开PhotoCarousel.rp文档Photo Carousel页面。
创建图片播放器，在右边箭头添加OnClick事件，当每次点击右三角时，切换下一张图片在播放器。
选中右三角按钮，添加OnClick事件。打开用例编辑器。

步骤2：设置面板状态到“下一个”

用户要看的任何图片，点击右边的三角按钮，一张张切换去看。实现上述交互，选择“设置面板状态为指定状态”动作，勾选Rotating Photos面板复选框，在选择状态下拉选单中，选择“下一步”选项。
选择状态下面，可以添加动画，进行动画和退出动画都选择“向左滑动”选项。持续时间都保持默认设置500ms。
点击确定，关闭用例编辑器。添加的OnClick用例如上图所示。

步骤3：重复步骤在左三角按钮

现在，在左三角按钮添加同样的交互。选中左三角按钮，添加OnClick事件用例。
在用例编辑器中，重复步骤2的动作设置。但这步设置选择“设置面板状态为指定状态”动作配置Rotating Photos面板切换到“上一步”，进行动画和退出动画都选择“向右滑动”。
点击确定，关闭用例编辑器。添加的OnClick用例如上图所示。
全部设置完成，生成原型，测试效果。

图片播放器 Photo Carousel6.0

本课程学习使用“设置面板状态为指定状态”动作和逻辑条件，制作6.0版本中的图片播放器。

图片播放器

步骤1：在右边三角按钮添加OnClick用例

首先，打开PhotoCarousel.rp文档Photo Carousel页面。
创建图片播放器，在右边箭头添加OnClick事件，当每次点击右三角时，切换下一张图片在播放器。
选中右三角按钮，添加OnClick事件。打开用例编辑器。

步骤2：添加逻辑条件检查当前状态

 在添加动作前，点击“添加条件”打开“条件生成器”。用下拉选单创建条件表达式：如果动态面板状态Photos等于值 Photo 1。
点击确定，关闭条件生成器。

步骤3：设置Rotating Photos面板状态

如果Rotating Photos面板在第一张图片，现在需要将它设置到第二张图片，选择动作“设置面板状态为指定状态”，配置设置Rotating Photos面板的第二张图片所在状态。
在下面，添加面板切换动画，选择“向左滑动”选项。持续时间保持默认设置500ms。
点击确定，关闭用例编辑器。添加的OnClick用例如上图所示。

步骤4：添加其它设置面板状态用例

 每个条件逻辑都要做同样的设置（例如：“如果 Rotating Photos状态等于Photo 1、Photo 2、Photo 3”），重复设置逻辑条件检查当前面板状态，设置面板状态到当前状态的下一状态，并设置向左滑动的动画。
完成剩下的用例设置后，添加的OnClick用例如上图所示。生成原型，测试效果。

步骤5：在左边三角按钮添加OnClick用例

同样的，在左边三角按钮添加OnClick用例。选中左边三角按钮，添加OnClick事件，在用例编辑器顶部点击“添加条件”。
在条件生成器，用下拉选单创建条件表达式：如果动态面板状态Photos等于值END。关闭条件生成器，用例编辑器中，选择“设置面板状态为指定状态”动作，配置设置Rotating Photos面板的第四张图片状态。添加面板切换动画，进行动画和退出动画都选择“向右滑动”选项。
点击确定，关闭用例编辑器，添加的OnClick用例如上图所示。

步骤6：用例2-4添加相同的条件

每个条件逻辑都要做同样的设置，从最后一张图片到第一张图片逐张切换（“如果动态面板状态Rotating Photos等于Photo 4”，“如果动态面板状态Rotating Photos等于Photo 3”等），添加设置动态面板状态到当前面板的上一个状态动作。
设置完成，生成原型，测试效果。