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

效果图：

操作分析

1. 鼠标向左/向右滑动，图片动态切换至下一张/上一张，且当前图片尺寸变大，清晰度由透明变不透明。
2. 图片上面人物简介以上滑的形式切换。

关键要素

动态面板

准备阶段

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了~

本文由 @ lily_wan 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议