养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Axure RP9.0 制作上下滑动,弹回效果

时间:2024-11-10 22:59:01

实现AxureRP9.0制作上下滑动及弹回效果

工具/原料

AxureRP

方法/步骤

1、为了使效果显著一点,在实现原型效果之前,先做2页简单的原型图如下。

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

2、双击Page1中的“内联框架”,选择Page2使Page2与Page1建立链接,点击确定。

Axure RP9.0 制作上下滑动,弹回效果

3、仇荸驼惦双击Page2,进入Page2编辑页面,将页面中要做滑动的内容选好,点击鼠标右键‘转化为动态面板’,并把这个动态面板命名为‘pingmu’,在右上角尺寸处将W、H尺寸调整为P锾攒揉敫age1内容区域尺寸。

Axure RP9.0 制作上下滑动,弹回效果

4、双击进入动态面板‘pingmu’,再次将页面中要做滑动的内容选好,点击鼠标右键‘转化为动态面板’,并把这个动态面板命名为‘neirong’

Axure RP9.0 制作上下滑动,弹回效果

5、上下拖动效果:选中动态面板‘pingmu’,在右侧交互面板:单击新建交互—拖动时—移动—目标选择“neirong”—移动选择‘跟随垂直拖动’—确定。

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

6、弹回效果(向上弹回):选中动态面板‘pingmu’,在右侧交互面板:单击新建交互—向蛴蛩钔淞下拖动结束时—移动—目标选择“neirong”—移动选择‘到达‘坐标(0,0)—动画选择‘弹性’—确定。

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

7、弹回效果(向下弹回):选中动态面板‘pingmu’,在右侧交互面板:单击新建交互缇吾怩舭—向上拖动结束时——移穰惩较瘁动—目标选择“neirong”—移动选择‘到达‘坐标X数值为0,Y数值为fx函数,双击fx进入编辑值面板—添加两个局部变量LVAR1(元件pingmu)、LVAR2(元件neirong)—插入变量函数为[[LVAR1.height-LVAR2.heigt]]确定完成—动画选择‘弹性’—确定。建立条件—点击“+IF”键入情形编辑面板—添加值(函数为[[LVAR1.y]],其中LVAR1为‘neirong’元件)<=值(函数为[[LVAR1.height-LVAR2.heigt]],其中LVAR1为‘pingmu’元件,LVAR2为‘neirong’元件)—确定完成

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

Axure RP9.0 制作上下滑动,弹回效果

8、交互制作完成。

© 一点知识