本文是实现动态文字在一个区域中滚动的效果,大概实现过程如下:

先准备一个区域,然后让文字在该区域内水平移动,本文是实现了从右到左的轮询的效果,其他雷同。

在Axure中,这种移动的过程需要动态移动,利用动态面板的状态切换来改变文本标签的值,从而实现了定时的功能

最后需要再页面加载的时候动态的触发动态面板的状态切换以及触发状态改变事件。貌似也可以不要触发状态改变事件。

具体流程如下:

1、打开Axure RP8软件后,系统自动创建了index页面,如图一所示:

图一 index页面

2、在内容区域内拖入一个矩形3,在拖入一个文本标签(将名称设置为:滚动文字),如图二所示:

图二 设置区域及文字信息

3、将文本标签转换为动态面板,操作为:选择“文本标签”,然后鼠标右键,选择“转换为动态面板”,然后将动态面板命名为“滚动文字动态面板”,如图三所示:

图三 转换动态面板

4、向“滚动文字动态面板”动态面板中添加状态,我采用了复制状态按钮实现,选择State1,然后State1中的“复制状态”按钮,如图四所示:

图四 复制状态

5、选择文字标签,然后再属性--交互--“状态改变时”双击,如图五所示:

图五 添加状态事件

6、向文本标签设置动作,在弹出框中添加动作一栏,找到 “移动”后点击,然后在右侧配置动作中选中“滚动文字动态面板(动态面板)”,如图六所示:

图六 添加移动事件

7、配置移动参数,还是在图六所示的图中,找到配置动作下方的移动选项,将移动选中设置为“绝对位置”,然后选中x:文本框后的fx,点击fx设置偏移量,

点击fx后弹出页面,在弹出页面中找到最上面的插入变量和函数并点击,然后选中元件中的x值,最后将This.x后增加“-10”

如图七所示:

图七 设置参数

8、增加全局变量my_move_x,将变量值设置为500(因为矩形3的宽度决定),如图八所示:

图八 添加自定义全局变量

9、添加判断条件,如图九所示:

图九 添加判断条件

10、将文本标签移动到右侧初始位置,如图十所示:

图十 移动文本标签

以上为文本标签移动配置,所有的准备好后,还需让让文本标签的“状态改变时”事件触发,下面开始触发“状态改变时”的事件。

11、选中矩形3,然后右侧属性--交互中选中“载入时”,如图十一所示:

图十一 增加触发事件

总结:

动态面板状态改变可当作定时器来使用

附件下载地址:https://files.cnblogs.com/files/-ShiL/%E6%96%87%E5%AD%97%E6%BB%9A%E5%8A%A8%E6%A1%88%E4%BE%8B.rar

在AxureRP8中实现广告文字滚动效果的更多相关文章

  1. Flash 开发环境搭建和文字滚动效果实例

    Flash 开发环境搭建和文字滚动效果实例 一.Flash 开发环境搭建 Flash发布的时候可以将资源(即将库中的元件)集成到swf运行文件中.Flash没有代码自动输入补全功能,因此需要一个英文一 ...

  2. android采用SurfaceView实现文字滚动效果

    前言 为了实现文字的滚动效果,之前也重写了TextView效果都不太好,后来对SurfaceView进行完善. 声明     欢迎转载,但请保留文章原始出处:)  小崔博客:http://blog.c ...

  3. 如何在HTML中实现图片的滚动效果

    <MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"& ...

  4. JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...

  5. js文字滚动效果实现

    纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...

  6. html笔记——网页中视频播放,文字滚动

    转载地址:http://blog.chinaunix.net/uid-191945-id-2792153.html <代码1无限次播放> <EMBED src="地址&qu ...

  7. TextView文字滚动效果

    ScrollText.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo ...

  8. 文字滚动效果,jquery和marquee标签

    链接:https://pan.baidu.com/s/1pMwHYH1 密码:r9ys marquee标签是微软创建的,后来大部分浏览器都适用后,微软在IE8把这个标签去掉了.为符合W3C规范,还是使 ...

  9. js文字滚动效果

    function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...

随机推荐

  1. 为什么要在函数内部声明 var that = this 呢

    看一个例子 $('#conten').click(function(){ //this是被点击的#conten var that =this; $('.conten').each(function() ...

  2. ubuntu 16.04 + 中文输入法

    在桌面右上角设置图标中找到"System Setting",双击打开. 在打开的窗口里找到"Language Support",双击打开. 可能打开会说没有安装 ...

  3. const 修饰成员函数 前后用法(effective c++ 03)

    目录 const在函数后面 const修饰成员函数的两个作用 const在函数前面 总结 const在函数后面 类的成员函数后面加 const,表明这个函数不会对这个类对象的数据成员(准确地说是非静态 ...

  4. C++函数的默认参数补充

    1.函数定义时指定默认参数 在C++中,定义函数时可以给形参指定一个默认的值,这样调用函数时如果没有给这个形参赋值(没有对应的实参),那么就使用这个默认的值.也就是说,调用函数时可以省略有默认值的参数 ...

  5. PHP计算两个日期相差的年月日时分秒

    $start_time = '2017-09-06 15:12:20'; $end_time = '2018-09-08 10:20:45'; get_time($start_time,$end_ti ...

  6. linux时区

    1. UTC时区切换到CST 时区# echo "export TZ='Asia/Shanghai'" >> /etc/profile # cat /etc/profi ...

  7. linux优化之优化开机自启动服务

    过滤出来需要的开机自启动项:chkconfig  --list|grep  3:on|grep  -v  "crond|sshd|network|rsyslog|sysstat" ...

  8. Goroutines和Channels

    原文链接 https://golangbot.com/goroutines/ Goroutines Goroutines 可以被认为是多个函数或方法同时允许.可以认为是一个轻量级的线程.与线程的花费相 ...

  9. Python学习笔记:open函数和with临时运行环境(文件操作)

    open函数 1.open函数: file=open(filename, encoding='utf-8'),open()函数是Python内置的用于对文件的读写操作,返回的是文件的流对象(而不是文件 ...

  10. python模块之pickle

    和json不同的是: json只支持str,int,tuple,list,dict. pickle支持python里所有的数据类型,但是只能在python里序列化,不跨平台,python独有. 代码示 ...