axure效果展示(axure rp8动态面板怎么使用)

感谢作者罗罗诺亚索分享文章【Axure教程：图片局部光照的交互效果】；由于原型是用AxureRP9实现的，本文将结合文章的实现方法使用AxureRP8.0，并将实现方法升级为引用全局变量，使原型不受位置限制，可以更灵活地复制和应用。在此感谢作者罗罗诺亚索的分享。
效果如下：
一、界面布局(1)拉入一张图片2作为底图，然后拉入一个矩形，命名为黑色层，大小与图片的宽度和高度一致。填充颜色为黑色，不透明度为60%。
(2)复制图片2，命名为图片1。从左侧目录的基本元素中拉入一个矩形，宽度和高度设置为80*80，从目录的图标中拉入一个心形矩形，宽度和高度设置为60*60。两个矩形都用黑色填充，不透明度为60%。选择这两个矩形，用布尔运算去掉顶层得到一个空心矩形。
(3)选中[图片1]和空心矩形[心形]，右键将其变成动态面板，命名为灯，宽高80*80。双击动态面板[灯]将[心]移动到(0，0)位置。如下图所示：
静态原型如下：
二。互动实现1。拖动事件，选择动态面板【灯光】，添加交互事件【拖动时】，在组件中选择“当前组件”，移动到：拖动，动画：无。
注意：为了防止面板[lamp]移出黑色层边界，边界上要加四个边界，即top大于等于[[LVAR1.top]]，其中LVAR1是元素的黑色层。同理，底部小于等于[[LVAR1.bottom]]，左侧大于等于[[LVAR1.left]]，右侧小于等于[[lvar1]。
2.根据作者的实践，选择[图片1]移动动态面板中的图片1。机芯为：绝对位置，X轴：[[-LVAR1.x]]，Y轴：[[-LVAR1.y]]。
当原型的位置不在(0，0)位置时，会出现以下异常情况，出现图1的位置偏移：
所以为了让原型的位置不受限制，可以更灵活的应用。本文将引用全局变量，从顶部菜单【项目】【全局变量】添加变量dengX和dengY，获取动态面板【灯光】的位置参数。
选择动态面板[Light]，添加[加载时]，设置全局变量dengX等于[[LVAR1.x]]，Deng等于[[lvar 1]。Y]]。其中LVAR1是元素This。
接下来只需将组件[图片1]的拖动交互事件更改为：x轴上的[[dengX-LVAR1.x]]，y轴上的[[Deng 1-lvar 1 . y]]。也就是需要减去初始位置。
最终效果如下：
3.呼吸动力学选择长方形【心脏】，添加【加载时】，改变大小，控制循环。如下图所示：
三。作品链接：https://pan.baidu.com/s/1KV2lZm_lkFewybSs2hTF4Q
提货代码：uqx6
作者：火星人~ Ace，微信官方账号：Axure Canyon of Ace
本文由@ Martian ~ Ace原创发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。