主页 > 建站知识 > 建站指南 > 策划方案 >

Axure教程:Banner图片联动伸缩效果

作者/整理:07fly 来源:人人都是产品经理 2018-10-19 Tag:


QQ截图20181010140918.jpg

图片来源图虫:已授站长之家使用

Axure做动态效果,只要了解了其动作规律就很好实现。

一、分析动作

1. 分析整体如下所示,是图片宽度和位移的改变;

2. 分析细节1,图片初始只显示一部分,移上去才显示完整;

3. 分析细节2,初始无按钮,移上去有按钮;

二、准备

1. 添加n个(这里是4)动态面板,分别命名“1”、“2”、“3”、“4”;

2. 添加一个矩形元件,命名“事件触发器”,初始为显示状态;

我个人有时候比较喜欢将所有事件写在一个元件上,可以把它叫做事件触发器,有点像程序开发中的function(),逻辑如下:

它的显示隐藏状态变化来做事件触发的动作。

设置几个局部变量值,橙色“值”的元件需要命名,对应英文“w”、”wplus”、”n”、”h”、”x”。

使用/局部变量/方便将整个动画打包为一个组件使用在任何地方,使用/变量/方便根据需要一键改变图片大小等。“x”的值时组件加载时动态获取的,计算公式为:


上一篇:如何利用网格系统科学地打造APP界面?

下一篇:分享功能,你可能了解的还不够多

相关新闻

2008-2020 © 成都零起飞科技有限公司 网站建设 开源CRM 建站系统 旅行社ERP系统 虚拟主机