1.4_20 Axure RP 9 for mac 高保真原型图 - 案例19 【放大效果】

相关链接


案例目标

 1. 了解 放大效果 的实现原理

一、成品效果

Axure Cloud 案例19【放大效果】

版本介绍

 一、放大效果
  1.1 鼠标在商品图片上移动,右侧显示对应区域放大镜效果
  1.2 限制放大器的移动范围,不可超出商品图片

 二、商品切换
  2.1 鼠标点击商品小图,大图切换至相应商品
  2.2 默认选中第一个商品
  2.3 选中的商品会显示对应效果(边框+变灰)

在这里插入图片描述


二、素材准备

  准备若干商品图片,处理成大小相等的正方形。再去iconfont 下载一个放大镜图片(色号#7F7F7F、PNG格式)。
  图片准备三份:小图(50x50),中图(300x300),大图(900x900)

在这里插入图片描述


三、制作方法

3.1 结构

页面大致分为4部分:【小图区域】、【中图区域】、【大图区域】、【背景】

在这里插入图片描述

【小图区域】:分为热区边框悬停图片

1. 热区点击热区,设置边框和悬停效果的选中状态(注意至于同一选项组内)

在这里插入图片描述

2. 边框选中后体现蓝色边框效果。同时切换中图、大图的动态面板到对应页面(注意至于同一选项组内)


在这里插入图片描述

3. 悬停默认透明色,位于图片上层。选中通过改变背景色,体现出置灰的效果


在这里插入图片描述

4. 图片不需要任何交互,仅作为图片展示。


在这里插入图片描述


【中图区域】:分为热区放大镜其他图片

1. 热区


x:[[Cursor.x - Target.height /2]]
y:[[Cursor.y - Target.height /2]]

其中:
Cursor.x:表示获取鼠标在坐标系中的x轴坐标值。
Cursor.y:表示获取鼠标在坐标系中的y轴坐标值。
Tartget.height:表示目标元件的高度值,由于是正方形,其宽高都一样;
注意:设置边界范围,放大镜不能超出中图区域范围。具体数值自己多测试就明白了。
在这里插入图片描述
计算放大镜移动坐标时,进行了一个偏移校正的操作。
偏移校正:指让鼠标处于放大镜中心位置。
为了更直观的说明什么是偏移矫正,现假设。x轴=[[Cursor.x]],y轴=[[Cursor.y]],则会出现以下情况:
在这里插入图片描述

2. 放大镜移动时,右侧大图(所有分页一起)都移动到相应位置


x:[[(This.x - 100) * (-3)]]
y:[[(This.y - 100) * (-3)]]

这里就是一个简单地数学计算,但解释起来比较麻烦,自己根据实际情况测试吧

在这里插入图片描述> 
放大原理:看似是先读取放大镜部分图片,再放大展示到右侧。其实是利用动态面板特性,右侧图片在移动。

动态面板特性: 只显示动态面板框的位置。
为了更直观的说明什么是动态面板特性,使用gif动图演示:
红框: 动态面板实际范围
蓝框: 为了演示,调大之后的动态面板范围
在这里插入图片描述
通过上面动图可以清晰的看出来放大效果的原理。

3. 其他一个图片外边框(矩形),一个准备的素材(iconfont 搜索放大镜)


在这里插入图片描述

4. 图片不需要任何交互,仅作为图片展示。


在这里插入图片描述


【大图区域】: 只有图片

1. 图片不需要任何交互,仅作为图片展示。


需要注意,默认左侧放大镜处于中图的中央位置,所以右侧大图默认也处于中央位置。在这里插入图片描述


以上所有尺寸,初次调试时建议使用整数,方便计算,调整完毕后可以尝试使用变量,再改为需求实际尺寸。


22/09/29

M

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值