快好知 kuaihz

Axure:APP图片动态切换场景

本文主要介绍了APP中图片动态切换的运用,一起来看看~

效果图:

操作分析

鼠标向左/向右滑动,图片动态切换至下一张/上一张,且当前图片尺寸变大,清晰度由透明变不透明。

图片上面人物简介以上滑的形式切换。

关键要素

动态面板

准备阶段

1、首先拖入一个矩形,设置其宽高为375*667,取消边框,设置阴影(偏移x:0,y:0,模糊:20,颜色:默认灰色)作为APP背景。

2、然后拖入下图所示的元件至指定位置,这里就不做详细的介绍。(icon可到iconfont-阿里巴巴矢量图标图中去下载)

3、拖动两个动态面板,放置在在下图所示的位置。分别取名:人物简介(上),人物图片(下)。

4、在人物简介动态面板中设置3个state,内容分别如下所示:

state 1

state 2

state 3

5、在人物图片动态面板中拖入一个动态面板,取名为拖动,设置其宽高为727*332,位置为:x=-178,y=0。

6、在拖动动态面板中放置三张图片,如下图所示:(中间图片尺寸:241*332,不透明度:100%,其余图片尺寸:220*303,不透明度70%)

7、以上设置完毕后,效果如下图所示:

交互设置

回到index页面,选中人物图片动态面板,设置如下所示交互:

拖动时:

向左拖动结束时:

向右拖动结束时:

交互设置完毕,预览就ok了~

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:切换  切换词条  场景  场景词条  动态  动态词条  图片  图片词条  Axure  Axure词条  
原型

 Axure教程:简单开关按钮的实...

笔者在本文中介绍了如何用Axure实现开关按钮效果的操作步骤,与大家分享。所需元件一个命名为“容器”的矩形一个命名为“关”的椭圆一个命名为“开”的椭圆操作步骤(...(展开)

原型

 Axure教程 | 制作一个商品...

本期给大家带来的是点击购买按钮后,“商品飞入购物车的动效”。一、照例先上gif二、制作方式我们准备三个需要用到的元素,分别为右侧的购物车(包括鼠标移入的样式),...(展开)