本文介绍用Axure来做一个移动端引导页的滑屏效果。
效果预览
预览地址:https://dsn3d3.axshare.com
制作元件
1、所需元件
矩形
动态面板
2、制作过程
拖入一个动态面板元件,命名为“”切换,大小设置为375×667,如图:
进入动态面板,背景颜色设置为#000000,不透明度30%,拖入四个动态面板,分别命名为1、2、3、4,大小设置320×500,分别进入每个动态面板,设置文案内容以及颜色(内容和颜色根据项目需要设置),如图:
在四个动态面板下方,拖入四个椭圆,分别命名为椭圆1、椭圆2、椭圆3、椭圆4,大小设置为12×12,默认颜色为#FFFFFF,本案例中当选中时设置颜色分别对应四个动态面板中的矩形颜色,如图:
在动态面板“切换”中整体设计,如图:
最终设计,如图:
交互设置
1、动态面板1
向左拖动结束时,动态面板1、2、3、4移动相对位置([[-This.width]],0),动画缓进缓出、时间为500毫秒,如图:
设置椭圆2的状态为选中状态,如图:
整体设置,如图:
2、动态面板2
向左拖动结束时,动态面板1、2、3、4移动相对位置([[-This.width]],0),动画缓进缓出、时间为500毫秒,如图:
设置椭圆3的状态为选中状态,如图:
向右拖动结束时,动态面板1、2、3、4移动相对位置([[This.width]],0),动画缓进缓出、时间为500毫秒,如图:
设置椭圆1的状态为选中状态,如图:
整体设置,如图:
3、动态面板3
向左拖动结束时,动态面板1、2、3、4移动相对位置([[-This.width]],0),动画缓进缓出、时间为500毫秒,如图:
设置椭圆4的状态为选中状态,如图:
向右拖动结束时,动态面板1、2、3、4移动相对位置([[This.width]],0),动画缓进缓出、时间为500毫秒,如图:
设置椭圆2的状态为选中状态,如图:文章来源:https://www.toymoban.com/news/detail-517565.html
整体设置,如图:
4、动态面板4
向右拖动结束时,动态面板1、2、3、4移动相对位置([[This.width]],0),动画缓进缓出、时间为500毫秒,如图:
设置椭圆3的状态为选中状态,如图:
整体设置,如图:
整体制作完毕,希望能帮助到您。文章来源地址https://www.toymoban.com/news/detail-517565.html
到了这里,关于Axure教程——滑屏效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!