Axure RP官方教程翻译(10):旋转式幻灯放映机

建立一个图片旋转式幻灯放映机,轮换广告或者内容幻灯片。你可以设置成自动前进或者通过点击按钮来实现。实现的效果如下:

Axure RP官方教程翻译(10):旋转式幻灯放映机

STEP 1:设置

打开培训文档中的“Carousel”页面。

在这个页面有两个来自图标库的图标和三张图片。

STEP 2:创建Carousel动态面板

  • 创建一个carousel动态面板,将每一张图片放在它各自的状态里。
  • 在“Image 1”上右键选择“转化为动态面板”,命名为“Carsouel”。
  • 双击动态面板打开动态面板状态管理器。
  • 点击绿色的“+”号两次,使动态面板一共有三个状态。
  • 点击确定关闭对话框。
  • 右键单击“Image 2”选择“剪切”。
  • 双击目录中的”状态2“打开进行编辑。
  • 粘贴“Image 2”到“状态 2 ”的画布里。确定图片的坐标是(0,0)。
  • 重复上面的步骤,将“Image 3”粘贴到“状态 3” 。

Axure RP官方教程翻译(10):旋转式幻灯放映机

STEP 3:创建可交互的后退键

  • 返回“Carousel”页面,选择“Back arrow”组件,在属性标签栏下,双击“单击”添加一个新的单击实例。
  • 在左边栏,点击“设置面板状态”。
  • 在右边栏,点击“Carsousel(动态面板)”。
  • 在右边栏的底部,点击“选择状态”的下拉选项选择“前一个”。然后点击复选框“包括从最后一张到第一张”。这样图片能循环起来了。
  • 给状态应用切换效果,使用“进入动画”和“退出动画”控制。将两个都设置成“向右滑动”(因为这是你的后退键)并且将持续时间设定500ms。
  • 点击确定关闭实例编辑器。

Axure RP官方教程翻译(10):旋转式幻灯放映机

STEP 4:创建可交互前进键

  • 对右边的箭头重复上面的步骤。这个过程大部分是类似的。
  • 在“选择状态”下拉选项框,选择“后一个”代替“前一个”。
  • 在动画设置项选择“向左滑动”代替“向右滑动”。

Axure RP官方教程翻译(10):旋转式幻灯放映机

STEP 5:让Carousel自动轮播起来

  • 选择动态面板。在属性标签栏双击“Onload”来添加一个加载实例。
  • 在左边栏,点击“设置面板状态”。
  • 在右边栏,选择“这个组件”。
  • 在右边栏的下面,点击选择状态的下拉选项框选择“下一个”,点击复选框“包括从最后一个到第一个”和“重复每一个”。这个默认设置是让图片每秒前进一次。你可以在这个区域自主设置时间长短。(尝试4000毫秒。)
  • 如果勾选了“延迟1000毫秒改变状态”,在页面加载时,动态面板会先停留在第一个状态1秒,而不是马上切换到下一个状态。这个时间“1000毫秒”是根据上面“重复每一个”区域的修改而变化的。
  • 设置你的“进入动画”和“退出动画”的值为“向左滑动”和“500毫秒”。

STEP 6:预览

点击预览。

这个旋转式幻灯放映机会自动轮播。

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

 

QR code