Axure PR 9 卡片翻转效果 设计&交互

---

大家好，我是大明同学。

这期内容，我们将深入探讨Axure中卡片翻转设计与交互技巧。

创建卡片翻转所需的元件

1.打开一个新的 RP 文件并在画布上打开 Page 1。

2.在元件库中拖出一个矩形元件。

3.选中矩形元件，样式窗格中，将宽(W)设为200，高（H）设为300，填充颜色为红色（HFF0000）,线宽为0，输入文本“正面”字号的值尽量设置的大一些，便于区分，字体颜色为白色。

4.右键“正面”矩形，转为动态面板，双击动态面板，复制State1正面矩形，添加State2粘贴。

5.将State2矩形填充颜色改成蓝色（#0052D9），“正面”文本改为“反面”。

创建交互

创建卡片交互状态

选中卡片元件，在交互窗格点击新建交互，单击时，设置面板状态 下一项，勾选向后循环，向左翻转 500毫秒。

预览交互

点击预览，每次点击卡片时，卡片都会触发翻转效果。

创建左右间隔翻转卡片交互状态

1.在以上基础上添加情形判断。

情形1：如果 卡片面板状态于 当前 ==State1

移动卡片（动态面板） 经过 （500,0）线性 300毫秒，设置卡片（动态面板）到 下一项 循环 向右翻转 300毫秒。

情形2：如果 卡片面板状态于 当前 ==State2，移动卡片（动态面板） 经过 （500,0）线性 300毫秒，设置卡片（动态面板）到 下一项 循环 向右翻转 300毫秒。

预览交互

点击预览，每次点击卡片时，卡片都会触发翻转效果。

创建上下左右翻转卡片交互状态

1.选中左右间隔翻转间隔卡片元件，删除全部交互。

2.在元件中拖入四个热区元件，将卡片分成上下左右四份。

3.选中“上”热区元件，在交互窗格中新建交互，点击时，卡片（动态面板） 到State2 向上翻转 500毫秒。

选中“下”热区元件，在交互窗格中新建交互，点击时，卡片（动态面板） 到State1 向上翻转 500毫秒。

选中“左”热区元件，在交互窗格中新建交互，点击时，卡片（动态面板） 到State2 向左翻转 500毫秒。

选中“右”热区元件，在交互窗格中新建交互，点击时，卡片（动态面板） 到State1 向右翻转 500毫秒。

预览交互

点击预览，点击卡片上下左右方向时，卡片都会触发翻转效果。

预览地址：https://x1sds0.axshare.com

OK，这期内容到这里就结束了。

我是大明同学

下期见