axure 图片切换图片的交互_【原创Axure教程2】用Axure做复杂有趣的交互动效—实例2:滑动切换中图片视差移动效果...

【补充：因为很多人说看不到附件，我把所有教程附件上传了百度云分享，有兴趣同学自取哈

地址：https://pan.baidu.com/s/1bqmWaE7】

【摘要·前言】

这一次要做的效果比较简单，就是一个常见的卡片滑动切换。但是在这个卡片滑动切换中，加入了一个图片与前层图标错层移动的效果，制造一个视差的效果。

在图文结合的卡片类元素中，在切换动画中加入这样的简单的细节效果，一下子就丰富了整个界面的层次感，为扁平化界面略显单调的界面增强了视觉效果。

我们先来看一下完成后的效果：

清晰版视频与教程中所用的素材，以及Axure工程源文件都在附件中提供下载。

【附件也已上传百度云盘分享，链接https://pan.baidu.com/s/1skWZRVR】

这个效果主要包含了以下几个关键技术点：

(1)如何利用变量实现循环连续切换多张卡片；

(2)如何利用动态面板做遮罩，实现图片的错层移动；

接下来是正文开始~~

————————————————————分割线—————————————————————

【Step1】

依然像上次教程提到的那样，第一步是用动态面板建立一个总的容器，命名为“dymp_总容器”。参数如图1中红线圈内所示：

图1：

—————————————————————————————————————————

【Step2】

接下来我们先来观察和分解我们要制作的动画效果，有哪些组成部分。

通过观察，我们可以得到如下几个要点：

(1)切换卡片的时候，上半部分的渐变色彩的随着一起变化，一张卡片对应一个渐变色背景；

(2)切换卡片的时候，卡片中上半部的图片相对卡片本身，也有一段位移；

附注：卡片的图标文字等其他元素均相对卡片不动，随着卡片一起移动；

我们一个一个来看如何实现这些效果：

(1)背景的渐变色变化动画——这个实现方法在axure中不止一种：一种方法是可以叠加三张不同渐变色的图片，分别在滑动的时候执行show/hide的action；另一种方法是三张图片分别放在动态面板的三个图层里，使用动态面板切换动画中的“fade”效果；在这里我推荐使用动态面板，毕竟管理一个部件比管理三个部件方便，不过动态面板的fade切换动画也有一个不足之处：无法使用“ease out cubic”等速率曲线；

(2)卡片内图片的错层移动这个效果也需要使用动态面板来实现，利用动态面板的遮罩作用，在卡片整体移动的时候，再对图片多加一段位移；

—————————————————————————————————————————

【Step3】

·1双击“dymp_总容器” 进入state1，如图2所示：

图2：

·2在“dymp_总容器”动态面板内，再添加一个命名为“”的动态面板，大小为540x320，位置(0，0)，作为渐变色的容器，如下图3所示：

同样记得一定要关闭“fit on content”属性

图3：

·3接下来为“dymp_渐变色” 添加三个state，并分别在三个state中添加三个图片部件，分别使用附件素材中的bg1-color1.png，bg2-color2.png和bg3-color3.png。如下图4和5所示：

(附注：图片部件添加外部图片的方法是双击图片部件，弹出选择窗口选择外部图片)

图4：

图5：

—————————————————————————————————————————

【Step4】制作卡片

·1完成step3后，接下来来只做三张卡片。新建三个大小为(462x638)的动态面板，分别命名为“”、“”、“”，按图6中的顺序排放：

图6：

平均的水平排放可以使用distribute的功能，如图7所示：

图7：

·2接下来分别制作每一张卡片，按照效果图，分别摆放好各个元素和部件(图片除外，因为图片也需要放在动态面板里)，如下图8：

图8：

·3接下来为每一张卡片里各再添加一个动态面板，用来放置图片(为了实现移动的时候不穿帮露底，图片本身的宽度大于卡片宽度)，分别命名为“dymp_卡片1-图片”，“dymp_卡片2-图片”，“dymp_卡片3-图片”，尺寸大小为(420，298)，在卡片动态面板内的位置均为(21，18)，如下图9所示：

图9：

然后添加图片素材进来，放置一个合适的位置，注意：卡片内的图片都要左边缘贴边放置，也就是图片的位置x的值都等于0。接着再在合适的位置加上一个播放图标，设置透明度为75%，放在最前层，如下图10所示

图10:

按照同样的方法制作完成三张卡片，如下图11所示：

图11：

—————————————————————————————————————————

【Step5】制作卡片切换动画(主要部分)

OK，从这一步开始我们开始制作动画。

·1首先，制作主体动画部分，卡片的移动。这部分动画比较简单。

因为是全屏的滑动切换，所以看做整个屏幕都是交互响应热区，因此需要在最外层的动态面板总容器“dymp_总容器”添加case。先制作向左滑动切换，所以选择在”OnSwipeLeft“上添加case。双击点开开始编辑。

图12：

那么分析一下卡片切换动画需要涉及哪些参数变更呢？主要有以下几部分：

(1)第一张卡片向左移动，位移距离为-462像素(相对位移中，从右向左移动为负数)，这里可以用相对位移，制作起来更方便些。三张卡片的移动距离是一样的。均为-462像素，animation选择“ease out cubic”速率曲线，时长500ms，如下图13所示：

图13：

·2第二步，向右滑动，则应该将case添加在”OnSwipeRight“上，卡片的相对位移则应当相反为462像素。曲线和时长均与向左滑动相同。向右滑动的Case命名为Case2，方便后面管理。如图14所示：

图14：

—————————————————————————————————————————

【Step6】

ok，现在我们制作完成了向左一次和向右一次的滑动切换动画，但是我们想要的是那种可以连续滑动的交互效果。现在如果连续滑动则会让卡片一直向左或者向右移动。如何实现正确的连续滑动切换呢？这里又要用到全局变量作为条件来实现了。关于全局变量和逻辑条件，上一个教程已经有所涉及，这一次我们再练习一下。

·1首先新建一个全局变量，命名为“Swipe”。如下图15和16所示：

图15：

图16：

·2接下来添加条件。变量Swipe的默认值为0。我们设定此为滑动切换第一张卡片，也就是第一张卡片在默认起始位置时候的条件，即如果swipe为其他值的时候，不执行滑动切换第一张卡片的动作。在case1上添加condition，并编辑condition为如下图17所示：

图17：

即条件是“当Swipe的value等于0”的时候。

·3但是这里只有三张卡片，不可能连续一直向左滑动下去，所以我们需要设定在滑动第三张卡片到屏幕中央位置时候，改变变量值Swipe，以此使得无法再向左滑动。但是还有个问题，我们怎么又能知道此时正是第三张卡片滑动到中央位置的状态呢？所以，我们要让每一张卡片的位置，都对应一个变量值，这样，就不会出现错误的连续滑动了。因此，我们需要再case1的最后再添加一个action：改变变量值Swipe为1。如下图18所示：

图18：

之后再复制case1(复制case的动作可以直接ctrl+c，ctrl+v，MAC是command+c，command+v)，重新命名为case_2nd_swipe_left，同时改变condition为“当Swipe的value等于1”，这是滑动切换第二张卡片的动作。如下图19所示：

图19：

同样也需要在这个case的最后改变变量值为2，如图20：

图20：

因为我们总共只有三张卡片，因此在两次滑动后，第三张卡片即最后一张卡片已经到了屏幕中央的位置，此时因为变量值Swipe已经变成了2，而向左滑动切换的条件只能在变量值Swipe为0和1的时候，所以我们现在已经实现了滑动到顶不能再滑动的效果。可以运行测试体验一下。

—————————————————————————————————————————

【Step7】制作向右连续滑动切换

·1ok，那么在起始Swipe的value等于0的时候，如果先向右滑动，会怎么样呢？应当是不能再滑动了。所以我们也要给OnSwipeRight设定适当的条件：只有在变量Swipe的值等于1或者2的时候(也就是已经向左滑动了1张或者2张卡片的时候)。先制作已经向左滑动一次的时候，向右滑动。先设定OnSwipeRight的Case2的条件为“当Swipe的value等于1”如下图21所示：

图21：

· 2然后在case2的最后也要设定改变变量Swipe值为0，也就是说当向左滑动一次，再向右滑动一次，就又回到开始的起始状态。如下图22所示：

图22：

· 3再复制Case2重新命名为“case_2nd_swipe_right”，设定条件为“当Swipe的value等于2”，如下图23所示：

图23：

· 4然后在case_2nd_swipe_right的最后再设定改变变量Swipe值为1，也就是说当向左滑动2次，再向右滑动一次，回到向左滑动第一张卡片的装填。如下图24所示：

图24：

到此为止，向左和向右连续滑动切换的交互效果就都制作完成了。运行preview体验一下效果。

—————————————————————————————————————————

【Step8】制作卡片内图片的错层移动效果。

·1先制作向左滑动第一张卡片时候，卡片1和卡片2内的图片的错层位移。在OnSwipeLeft的Case1中，再为卡片2内的图片“卡片2-图片”添加move动作。为了能让卡片内图片的错层移动效果更明显，我们可以设定在滑动切换动画结束后，等待一小段时间再做卡片内图片的位移动画。

因此先添加一个wait动作，设定wait的值为300ms，再移动卡片1内的图片“卡片1-图片”和卡片2内的图片“卡片2-图片”位移-60像素，设定animation的速率曲线为ease_out_cubic，时长500ms，参数设定如下图25所示：

图25：

(附注1：axure中，一个case所包含的action是从上到下按序开始执行的)

(附注2：因为被移动出去的卡片1等会儿还要再移动回来，所以也需要设定向左位移-60像素。而对于第三张卡片3，刚移动进来一小部分的卡片3里的图片错层移动效果都不明显，因此就不需要再做错层移动了，也可以使得用户的注意力被集中在进场的主角——卡片2上，对于交互体验也更好。)

·2接下来为第三张卡片的进场制作卡片3内图片的错层移动动画。在OnSwipeLeft的case_2nd_swipe_left中为“卡片3-图片”添加move动作，移动距离同样为-60像素，设定animation的速率曲线为ease_out_cubic，时长500ms，当然也别忘了之前要先添加wait 300ms的动作，参数设定如下图26所示：

图26：

·3向右滑动的卡片内图片移动效果制作方法基本也是一样的，注意何时移动“卡片1-图片”和“卡片2-图片”，何时移动“卡片2-图片”和“卡片3-图片”，如下图27和图28所示：

图27：

图28：

—————————————————————————————————————————

【Step9】制作卡片切换时的渐变色变化效果。

这个效果就比较简单了，直接使用动态面板本身自带的fade效果就可以了。先分别在第一次向左滑动、第二次向左滑动的时候制作动态面板“dymp_渐变色”的渐变效果。

注意一定要在wait 前添加渐变色动画。为“dymp_渐变色”添加“Set Panel State” 动作，即设定改变动态面板的state的动作。第一次向左滑动、第二次向左滑动的时候的参数属性设定如下图29、图30：

图29：

(卡片1切换为卡片2时，背景渐变色由state1变成state2，即从红黄渐变色变为红蓝渐变色，in 和out都采用fade即淡入淡出的方式，动态面板的state切换 动画方式有很多种，后面的教程我们会一一涉及)

图30：

两次向右滑动时候的渐变色动态面板参数设置如下图31和图32：

图31：向左滑动一次后，向右滑动——

图32：向左滑动2次后，向右滑动——

OK，到此为止，基本上我们的这个交互动画就全部制作完成了。