9.10Axure动态设置

最新推荐文章于 2023-12-15 13:51:51 发布

原创最新推荐文章于 2023-12-15 13:51:51 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在Axure中动态设置面板状态，通过选择图标并设置‘鼠标单击时’的用例，实现图标进入效果，如滑入、滑出、淡入淡出等动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2015年9月10日

动态设置汇总

回顾：
    （1）经过两天的学习，对PS切片，markman测量都已经清楚掌握，缺乏的是重复操练，熟练应用，其中PS切片两种方法：
        a.有直接对图片进行切片，优点快速简单，缺点是切出的图形只针对矩形图框，或者切出的图标带有背景图案，使用上很不方便。
       b.针对psd格式的图片切片，在PS中打开，能选中单独的图层，切出的图标不带背景。
          一般使用一个文件夹下的图层用脚本方式批量导出。选中某一个文件夹（下级为图片，文字），将其他文件夹隐藏可见→新建图层→脚本→导出到文件→选择Png-24格式。
    （2）静态网页制作
       略！（已掌握）
今日重点掌握：
1.图标动态设置

目标：点击图标图片向左滑动

步骤：选中该图标（命名为图标1），同时选中“鼠标单击时”，→双击用例1→设置面板状态→选中“图标1”→进行进入的方式（滑入滑出淡入淡出等的设置）→确定

目标：鼠标移至圆圈处，动态图片相应的变化（命名为圆圈1，圆圈2，圆圈3等，动态1，动态2等）
    步骤：选中“圆圈1”，选中“鼠标移入时”，→双击用例1→设置面板状态→设置“image4”到动态1.其他同理。
        注：因为在未进行任何操作时，默认第一颗按钮呈蓝色，所以需要在部件属性里设置为“选中”。
        注:在打开网页不进行任何操作的情况下，假设上图动态图片自行循环切换，这个设置是在页面下方“页面交互”“页面载入时”新建用例设置。

目标：鼠标移至圆圈处，圆圈变为蓝色，移出时则恢复白色。
    步骤：选中“圆圈1”，选中“鼠标移入时”，→双击用例1→设置面板状态→编辑条件

同理对其他相应的图标进行类似操作。

目标：当鼠标移至图片上，显示浅色的加号且图片变浅，将鼠标继续移至加号上，加号颜色变深，鼠标移出图片，恢复最初。
步骤：将加号图标打开，再打开图像热区，将大小调至一致并重合，设置为隐藏，同理浅色加号图片作同样的处理（得到图像热区1，2）；将两部分图片重合并组合（拖拉方便），与网页原图片重合，此时组合图片为隐藏状态，仅原图片可视。分别选中“图像热区1，2”，鼠标移入时，用例1，显示/隐藏，进行相关设置。
图像热区1，2可直接复制到其他相同效果的图片上，并检查交互效果。