axure9怎么让页面上下滑动_【Axure9百例】4.简单交互

原型上一些简单的移动动画交互效果，我们其实都用不上使用移动的动作，只需要设置显示时的动画效果即可，例如下面这种效果：

不太熟悉的同学可能想到的是移动标题和描述信息来实现，当然也没有问题，只是复杂了点。

有两种方式可实现这样的效果。

方式一(推荐)

1)界面上放好标题和描述，初始状态设置为隐藏

2)添加鼠标移入事件，显示标题和描述信息，标题显示的方式为从右向左滑动，描述的显示方式为从下向上滑动

3)添加鼠标移出事件，隐藏标题和描述信息，标题隐藏方式和步骤2相反即可

移入移出事件中的动作设置如下：

方式二，复杂了点

可通过移动标题和描述的方式实现

1)界面上放好文本标题和文本描述，标题放在显示区域的最右侧，通过设置动态面板的样式“自动适应内容”为取消勾选状态，这样在显示区域之外不可见，同理描述信息放在显示区域的下方。

2)添加鼠标移入事件，从右向左移动标题，配合线性动画，从下向上移动描述信息，配合线性动画

3)添加鼠标移出事件，和步骤2相反即可，将标题和描述信息移出动态面板显示区域之外

移入移出事件中的动作设置如下：

如果我们希望移动的同时以淡入淡出方式显示的话，则需要结合移动+显示动画两种动作了，例如下面这样：

移入移出事件中的动作设置如下，移入时(移出时反之)：

1、显示标题和描述：淡入动画(逐渐)// 比方式二多出的显示和隐藏动作

2、移动标题和描述：线性动画

上面这种效果视觉上更好些。

以上示例中标题和描述默认状态请设置为隐藏。

PS：公众号中的图片压缩真是太厉害了，都不怎么看得清楚，:(

往期回顾

【Axure9百例】3.回到顶部

【Axure9百例】2.缩放效果

【Axure9百例】1.交互设置步骤