Axure动态面板的花式使用方法

动态面板可以用来干什么呢？在原型图的绘制过程中，动态面板是十分常用的原件，可以通过动态面板实现图片的轮播，实现动图的展示效果。那么接下来我们看一下动态面板不同的使用方法能带来哪些不同的效果。

一、动态面板的基本简介

信息基本简介：动态面板在前端开发中的地位相当于是一个div容器，里面可以存放很多其他的原件，也就是说动态面板里面可以再放置动态面板。动态面板是可以嵌套使用的。

//注意：动态面板只能显示在动态面板内的东西，超出动态面板范围的原件不会进行显示。

• 嵌套使用方法： 首先打开Axure软件并新建一个页面，
  然后在该页面中拖入一个动态面板（大小可以自己设定或者拖拽改变大小）。
  为该面板命名为out，
  然后双击out这个动态面板，选择State1 （State1是面板的状态，一个动态面板可以有多个状态，可自己命名），
  进入动态面板的编辑区域。在此区域内可以再进行动态面板的拖动。
  

除此之外其余的原件均可放置在动态面板内。

二、使用动态面板实现轮播效果

上一篇博客已经介绍过了，就不重复介绍了。链接

三、使用动态面板实现图片缩放效果。

前面已经介绍了，动态面板内的原件一旦超过动态面板的边框，就不会被显示出来。那如何实现动态面板的图片所效果呢？

• 1、首先新建一个动态面板进入编辑区域。

• 

• 2、在动态面板内放置一张图片，调节图片/动态面板的大小，使二者宽高一致。
  
  双击被放置的图片，选择一张想要演示的图片，点击确定。成果如下：

• 3、设置交互，选中图片，添加交互用例。首先选中照片得图层，然后添加用例，选择鼠标移入时，选择设置尺寸，尺寸一定要比原图片大或者小，才能看的到效果，此处选择比原图片大，选择动画效果。点击确定保存。

• 4、设置移出交互效果。步骤和上一步一样。
  
• 5、点击预览，在浏览器上就可以看见效果啦~
  
  如何使用动态面板实现各种动画的分享大多如此啦，如果有什么动画效果想学但是又在晚上找不到资料的，可以私信博主出教程哦~博主也还是学生，不太了解市场上的需求，只能根据个人意见出教程，嘻嘻嘻嘻，今天也是认真的一天呢！