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

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

在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. Chunky Monkey-freecodecamp算法题目

    Chunky Monkey(猴子吃香蕉, 分割数组) 要求 把一个数组arr按照指定的数组大小size分割成若干个数组块. 思路 利用size值和while语句确定切割数组的次数(定义temp将siz ...

  2. OwinStartupAttribute出错

    尝试加载应用时出现了以下错误.- 找不到包含 OwinStartupAttribute 的程序集.- 找不到包含 Startup 或 [AssemblyName].Startup 类的程序集.若要禁用 ...

  3. 【Windows7注册码】

    [文章转载自 http://www.win7zhijia.cn/jiaocheng/win7_19324.html] 一.神Key: KH2J9-PC326-T44D4-39H6V-TVPBY TFP ...

  4. vscode 实时预览 编辑markdown 插件 Markdown Preview Enhanced

    说明地址: https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/?id=markdown-preview-enhanced

  5. dict 方法总结整理

    #!/usr/bin/env python __author__ = "lrtao2010" #Python 3.7.0 字典常用方法 #字典的key是唯一的,且不能被修改,val ...

  6. i2c drivers

    Linux设备驱动程序架构分析之一个I2C驱动实例   转载于:http://blog.csdn.net/liuhaoyutz 内核版本:3.10.1   编写一个I2C设备驱动程序的工作可分为两部分 ...

  7. debian7安装icedove

    stable --icedove --esr $ cat /etc/apt/sources.list | grep "deb http://security.debian.org/ whee ...

  8. 如何查看Android apk的包名?

    有以下四种方法可以查看apk的包名,之后有别的方法,会接着更新文档的. 1. 安装APK包名查看器; 2. 源码AndroidManifest.xml中查看package包名; 3. 利用" ...

  9. JAVA中变量的类型及命名规范

    1. 计算机是一种极度精确的机器;2. 要将信息存储在计算机当中,就必须指明信息存储的位置和所需的内存空间;3. 在JAVA编程语言当中,使用声明语句来完成上述的任务; 4. 变量的类型: 5. 变量 ...

  10. JavaSE——final修饰符

    一.final 修饰变量,被final修饰的变量在被赋初始值之后,不能对它重新赋值 修饰实例变量,必须显示指定初始值,可以在三个位置指定初始值:         1.定义final实例变量时指定初始值 ...