Axure图片缩放

 时间:2026-04-23 15:08:41

1、首先,要完成这个效果我们需要先放入动态面板,命名为“zoomimage”,然后设置其背景图片,然后设置【重复】为“填充”或“适应”。这样能够保证动态面板改变尺寸大小时,背景图片能够跟随改变尺寸大小

Axure图片缩放

2、然后,我们来分析一下在图片缩放的原理。图片(动态面板背景)放大前尺寸为200*200,放大后尺寸为300*300,因为是中心点缩放,放大前与放大后位置相对移动了x50、y50

Axure图片缩放

3、在之前做好的动态面板“zoomimage”上点击鼠标右键,选择“转为动态面板”完成嵌套,为新的外层面板命名为“moveimage”,然后再次点击鼠标右键设置外层动态面板“自动调整为内容尺寸”

4、为外层动态面板“moveimage”添加【鼠标移入时】事件的用例动作为【移动】动态面板“moveimage”【到绝对位置】【x】“50”【y】“50”,并为其设置【动画】【线性】“500”毫秒

Axure图片缩放

5、继续为上一步中的用例添加动作为【设置面板尺寸】动态面板“zoomimage”【宽】“300”【高】“300”,【动画】同样设置为【线性】“500”毫秒

Axure图片缩放

6、通过以上步骤,就完成了鼠标移入图片时中心点放大的效果

7、参照图片放大这个原理,我们继续完成鼠标移出图片时按中心点缩小为原来尺寸的效果。我们设置【鼠标移出时】【移动】动态面板“moveimage”【到绝对位置】【x】“100”【y】“100”,同时【设置面板尺寸】动态面板“zoomimage”【宽】“200”,【高】“200”。不要忘记,以上两个动作都要添加【动画】【线性】“500”毫秒

Axure图片缩放

  • ih5怎样在场景中添加操作提示
  • Animate如何通过遮罩改变图片外观形状
  • Animate如何制作单击显示文字的交互效果(AS3)
  • iH5中级教程:自制手写贺卡H5
  • 在unity3D中设计地面
  • 热门搜索
    荷叶茶减肥吗 哥本哈根减肥法食谱 云南自驾游攻略 吃黄瓜能减肥吗 泰山学院怎么样 问道手游通天塔攻略 我的世界生存攻略 手肿了怎么快速消肿 15岁怎么长高 鱼骨头卡喉咙怎么办