在本章中，你将学会使用动态面板和交互动作构建一个GuidePage引导页。
项目背景
在常用的移动端产品设计中，用户首次下载并打开App时，客户端常常采用启动页+引导页的方式呈现给用户。
一方面可以缓解加载App数据内容时的等待焦虑，另一方面可以通过几张图片简介介绍产品的亮点，或者核心功能。
可以说，启动页和引导页是当前客户端设计中不可或缺的一部分。
那么本章中，我们就来创建一个GuidePage引导页。
项目搭建
首先，创建一个新项目，命名为GuidePage。
页面框架
为了更加符合移动端设计，这里加入手机壳框架，日常工作中也可以储备一些目前主流手机机型的框架原型。
这里引用的是网络下载的iPhone机型的外壳，下面我们就在这个外壳框架内完成页面及交互。
拖入一个“动态面板”组件，命名为“主体框架”。
将主体框架动态面板放在手机壳中，设置尺寸大小为375*745，并添加2个状态和重命名。
这样，我们就得到了一个主体框架动态面板和三个状态页面：启动页、引导页、登录页。
页面样式-启动页
接下来，我们完成下每个页面的样式，首先是启动页。
在App产品设计中，启动页常常一闪而过，因此不需要做太多设计，常见的启动页有展示应用logo、展示应用名称、展示应用slogan等。
这里，我们就放一个logo图片。
拖入一个“图片”组件，命名为logo。
设置它的位置为页面居中，上边距为200。设置它的尺寸为100*100。
双击图片，即可打开本地选择图片载入，这里我们选择一张logo图片。
页面交互-启动页
页面样式完成后，我们来看下启动页的交互。
启动页与引导页的关系是，当页面展示的时候，启动页加载展示差不多1秒钟，然后自动跳转到引导页。
明白了这个交互逻辑后，我们来实现它。
我们以logo图片为中间件，新建了2个载入时的交互动作。
选中logo图片，在“交互”工具栏中选择新建交互，选择“载入时”，选择“等待”，设置等待2000ms。
再在下面新建动作，选择“设置面板状态”，目标为“主体框架”，选择状态为“引导页”，进入动画为“逐渐+500毫秒”，退出动画为“逐渐+500毫秒”。
在浏览器中预览下效果：
页面样式-引导页
启动页完成后，我们来完成引导页的基础样式。
在动态面板中，切换面板状态为引导页。
我们先分析下引导页的逻辑。
引导页一般由3～4个页面组成，自动向左滑动展示下一页，最后一页有个按钮“立即体验”，点击“立即体验”，跳转到登录页。
我们发现引导页每个页面也很简答，基本由图片+文字说明组成，那我们先完成前面3～4个页面的样式。
我们依旧可以使用动态面板来完成多个页面。
拖入一个“动态面板”组件，命名为“引导页”。
设置位置为（0，0），尺寸为375*745。
这里科普一个知识点。
动态面板是可以叠加的，也就是一个动态面板内部可以放一个动态面板，面板里面再可以放面板，循环嵌套。
我们这里是在主体框架的动态面板中，放了一个引导页的动态面板。
我们双击进入引导页动态面板，创建4个状态，用来防止我们不同的引导页的页面。
然后在第一个面板中，我们放一张图片和文字。
拖入一个“图片”组件，两个“文本标签”组件，下面页面的轮博的点，可以用1个“矩形2”组件和2个“圆形”组件来绘制，这里就不赘述了。
图片部分，这边选择了网上开源免费的插画作为引导页的图片。
同理，我们在面板2、面板3、面板4，也绘制页面。
不同的是，我们面板4就需要加一个按钮，其实也是矩形组件罢了。
页面交互-引导页
下面我们实现下引导页滑动的交互动作。
选中引导页，在“交互”工具栏中，新建交互 ，选择“载入时”，选择“设置动态面板”，目标为“引导页”，设置状态为“下一项”，勾选“向后循环”。
顺便加入些动画，让交互更加友好些。设置进入动画为“向左滑动+500毫秒+缓进缓出”，设置退出动画为“向左滑动+500毫秒+缓进缓出”。
在更多选项中，勾选“循环间隔3000毫秒”，勾选“首个状态延时3000毫秒后切换”。
交互动作好像很多的样式，其实也就实现了引导页在展示的时候，首先延时等待3秒，然后自动向左切换动态面板状态罢了。
我们再加入一个交互动作，即当我们鼠标移入时，停止轮博，免得一直滚动不停。
在“交互”工具栏中新建交互，选择“鼠标移入时”，选择“设置面板状态”，目标为“引导页”，设置状态为“停止循环”。
这样，我们就完成了引导页的自动轮博和停止了。
下面我们完成引导页到登录页的跳转。
我们双击“引导页”动态面板，进入内页，选择状态4。
选中“立即体验”的按钮，在“交互”工具栏中新建交互，选择“单击时”，选择“设置面板状态”，目标为“主体框架”，状态为“登录页”。
进入动画为“逐渐+200毫秒”，退出动画为“逐渐+200毫秒”。
这样，当我们点击“立即体验”按钮时，主体框架就可以跳转到登录页了。
页面样式-登录页
登录页的样式也比较简单，我们放了1个logo图片（图片组件）、两个按钮（矩形2组件）、勾选图片（图片组件）、阅读条款（文本标签组件）。
我们整体在浏览器中预览下效果：
哈哈哈，效果不错！
为了让这个网站能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网站地址
引导页： ricardowesley.gitee.io/guidepage
快来动手试试吧！
