快好知 kuaihz

Axure教程:同一锚点等比例缩放并同时改变内容的效果

本文主要分享一种不需要设置变量做出的实用动态交互效果。enjoy~

相比于用各种变量来做复杂的动态交互,我在这里分享一种不需要设置变量做出的实用动态交互效果。

首先,我们来看一下效果:

1. 动效理解

从点击效果可以看出,这里主要包括两个变量:大小&颜色,并且是在大小改变的同时进行颜色的切换。

我们都知道,在axure中要想控制变量,一定要把元素转化成动态面版,而这里一个点击动作对应了两个变量的同时改变,我们先用传统的方法来试一次看看会出现什么效果:

(1)画两个矩形,一个小尺寸(黄色),一个大尺寸(蓝色)

(2)将黄色的矩形转化为动态面版(不要忘记命名,这里将其命名为面版1),并增加一个状态,将大尺寸的蓝色矩形剪切到状态2中:

(3)再画一个灰色的矩形当做按钮,并为点击(onclick)添加事例:

此时,我们看到的效果是这样的:

之所以会出现这样的问题,是因为在axure中动态面版的可视区域的锚点坐标都是(0,0),即

所以在动态面版尺寸变大并将黄色状态(状态1)切换到蓝色状态(状态2)的时候,动态面版会将初始状态的可视区域的锚点坐标记忆到状态2,所以便会出现小尺寸的黄色矩形往上下移动并渐消渐现的视觉感受。

那正确的姿势是怎样的呢?我来给大家诠释一下一种便捷的方式:

2. 正确的打开方式

(1)直接从库中拖取一个动态面版出来(不要忘记命名,这里姑且命名为面版2),将尺寸设置为一个较小的数值,并为其添加状态2;

(2)将状态1的背景色设置为橘色(在样式tab中,这里还可以插入图片);

(3)同样的手法,将状态2的背景色设置为蓝色

(4)再画一个灰色的矩形当做按钮,并为点击(onclick)添加事例:

好了,大功告成~

这里的关键就是对动态面版的不同状态进行颜色填充或者图片填充,让其在基于同一锚点的尺寸+内容/颜色两个变量进行控制的时候不会由于axure对可视区域特有的坐标记忆而产生的视觉瑕疵~

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:并同  并同词条  等比  等比词条  缩放  缩放词条  同一  同一词条  改变  改变词条  
原型

 Axure 教程:使用动态面板实...

本文教大家如何使用动态面板实现密码可见性切换,一起来看看~使用到的元件一个文本框:一个睁眼Icon:一个闭眼Icon:PS:许多需要用到的Icon都可以在阿里巴...(展开)

原型

 Axure模拟微信聊天效果

在Axure中实现微信聊天效果,需要对中继器,动态面板,变量,函数等有一定的认识,同时可以将这些知识融会贯通使用。产品经理是站在上帝身边的人。(上帝了解人性,懂...(展开)