我们来看看如何实现这种APP先容页面的效果，点击下方的链接查看完成后的效果，下面是完成后的效果图：
（内有源文件和干系资源素材）
一、实现思路
1、利用第一个动态面板显示7个先容页面
2、利用第二个动态面板显示背景图片的切换
3、在向上和向下拖动先容页面时，触发背景图片动态面板的状态切换
4、首页的向上箭头动画，通过元件的显示与隐蔽实现循环动画效果
5、准备资源：资源包括先容页面上的图片，通过查看源代码，样式表从中获取图片位置并下载，终极下载后的资源如下图所示（从演示页面下载源文件）：
二、实现步骤1、界面布局
（1）添加一个矩形框作为菜单栏，大小为48067，背景为蓝色，笔墨为白色，字体大小为18，设置笔墨内容为“I’m QQ – 每一天 ， 乐在沟通”。
（2）添加个动态面板
，大小为480680，放在标题栏下方，命名为main，取消“自动调度为内容尺寸”勾选状态，双击进入第一个状态，添加第一个先容页面。
导入背景图，设置大小480680，添加QQ的logo和先容笔墨图片，添加版本信息和发布日期，末了添加一个无边框矩形作为下载按钮，大小为25060，蓝底白字，笔墨大小为28，圆角大小30：
（3）为动态面板main添加第二个状态，在中间位置添加一个笔墨，大小为28，笔墨颜色为白色（为了教程看得清楚，将笔墨设置成了玄色）。
（4）重复第（2）（3）两步，分别添加第3到第7个状态，设置里面的图片和笔墨内容。
（5）添加页脚
，作为菜单栏，双击修正笔墨内容为”点击下载源笔墨“，单击后下载本实例源文件（在浏览器中打开页面后下载）。
2、首页向上箭头动画
双击动态面板main打开第一个状态，我们来处理向上箭头动画。
添加箭头图片，命名为arrow，右键转换为动态面板，双击进入动态面板状态一，添加一个热区元件用来干变乱掌握，命名为control，这个热区通过显示和隐蔽事宜来处理箭头动画的循环向上滑动显示效果。
（1）选择control，添加显示时势宜
a.移动箭头图片到（0，30）处
b.再移动到（0，0）位置，添加线性动画，时长1秒
c.隐蔽箭头图片和掌握元件control，箭头添加淡出动画效果，时长1秒，control的隐蔽时会触发它的隐蔽事宜。
d.等待1秒钟
（2）选择control，添加隐蔽时势宜
显示当前control元件和箭头图片，显示control时会触发它的显示时势宜，这样达到循环处理的目的。
（3）动态面板载入时势宜
先设置control为隐蔽状态，在动态面板载入时，显示control。
4、背景动态面板
添加一个新的动态面板，大小为480680，命名为back_img，添加三个状态，用来放置背景的三张图片，将该动态面板放在动态面板main之后。
5、事宜处理
（1）动态面板main的向上拖动结束事宜
（2）动态面板main的向下拖动结束事宜
（3）添加掌握事宜
在向上拖动和向下拖动动态面板main时，须要分别切换一下背景动态面板状态，显示不同图片。
添加两个热区，用来掌握向上和向下拖动结束事宜，给热区添加单击事宜，事宜里分别添加两个事宜分支，分别显示不同的背景图片。
给动态面板main的向上滑动结束和向下滑动结束事宜添加触发事宜，分别触发上面两个掌握事宜：
三、预览
统统准备就绪，按下F5键预览一下效果。
鼠标向上滑动查看，把稳背景图片的切换变革。
以上帖子内容是些思路性的勾引，请结合源文件查看以上步骤会更清晰。
（内有源文件和干系资源素）
本文由 @Axure 原型设计工场 原创发布于大家都是产品经理。未经容许，禁止转载。
