axure如何实现跳转_Axure 9 教程:如何做跑马灯广告、弹幕
怎么在Axure中,完成跑马灯广告,以及弹幕效果呢?一起来看看~
方案1:所需元件:1个动态面板内含1个文本,动态面板控制文本显示区域
(动态面板就是一个xy坐标轴,00代表与之接触初始位,正值时元件显示为负则隐藏。)
如何实现使文字从左到右移动?第1时间肯定想到的是移动,那让这个移动那循环起来就是跑马灯广告。
条件设置:
- 添加页面[载入时]用例,移动文本并设置事件循环;
- 为每个文字添加[移动时]用例,设置完全移出时回到初始值。
操作步骤:
第1步,在页面上添加[载入时用例],用例设置如下。因为是往左移所以(-4,0),如果是往上移则是(,0-4),往哪边移则哪些设为负数,具体值可以调整。
第2步,如上一直往左移,但是当文本完全移出时则一直显示空白。所以我们还得设置当文本移动时回归初始始位置。在文本部件添加[移出时]用例,设置如下。
文字完全移出有多种表达方式:
1)用位置标识,不在面板可显示区域内;
2)用跟目标面板有没有接触,元件范围表示,没有接触即代表完全移出。
以下为了方便我直接用数字表示,-200这个值应该是该文本部件的1/2左右,我为了方便直接显示具体数值,也可以用函数LVAR1.width/2表示。如果发现不够完美,可以再调整数值(最后一半文字移动时因为没有内容往前补充所以会有一段空白,所以需要修改值)。
按这种方式可以实现往左/右/上/下移动,操作逻辑一致。 如果是多个文本一起移动,就需要添加多个文本并需要在每个文本上加移出时用例,操作繁琐。有没有简单的模板可用了?把文本部件转化为动态面板就可以解决重复操作问题了。
方案2:所需元件:1个动态面板内含2个文本面板
条件设置:
- 添加页面[载入时]用例,移动文本面板并设置事件循环;
- 为每个文本面板添加[移动时]用例,设置完全移出时回到初始值。
操作步骤:
第1步:页面载入时移动多文本动态面板,并设置等待后重新载入该事件实现循环。
第2步:为每个文本动态面板添加[移动时]用例,设置如下。元件的左边位置小于元件的宽度,代表元件完全移出外部的显示区域( (0.0)是该文本移动到起始位置,如果想一段间隙显示完后出现一小段空屏,可调整x值,如果设置x值设为该部件宽度,则会达到一个显示完一屏再显示第2屏的感觉。
建议以上用动态面板做,做成元件后可以直接复用,跑马灯、滚屏消息、弹幕等都可以应用。 再以上基础上一般的广告会有一种效果,鼠标移入时会暂停,点击后可跳转。
鼠标移入时暂停播放,移出时自动播放。
所需元件:1个动态面板(控制文本显示区域),内含1个文字动态面板。
条件设置:
- 引入全局变量赋1,控制是否暂停;(新增) 统一鼠标移入为0,移出为1。
- 添加页面[载入时]用例并设置载入循环(同上),条件:变量值和文本面板是否全部移出。
- 调置动态面板移出时用例,将该元件移至最后。
- 为每个文字添加[移入移出]用例,并赋变量值;设置单击时跳转链接(新增)
操作步骤:
第1步:新建全局变量并赋值,也可用局部变量。
第2步:页面载入时移动多文本动态面板,设置变量值为1且未完全移出时移动文字动态面板,如下。 我这个axure版本有问题条件设置时不能设置&语句,注意看第2种情形是或者。
第3步:为每个文字动态面板设置[移动时]用例,如下。
第4步:为单独每个文字部件单独添加用例。
本文由 @流素 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议
axure如何实现跳转_Axure 9 教程:如何做跑马灯广告、弹幕相关推荐
- AXURE9原型教程:做跑马灯广告、弹幕
1.从左往右移动 方案1:所需元件:1个动态面板内含1个文本,动态面板控制文本显示区域 (动态面板就是一个xy坐标轴,00代表与之接触初始位,正值时元件显示为负则隐藏) 如何实现使文字从左到右移动?第 ...
- axure如何实现跳转_Axure教程:网易云音乐首页原型设计
作者利用Axure动态面板功能对网易云音乐首页进行了一个简单的原型设计,那如何利用Axure动态面板功能实现轮播效果及交互功能以及隐藏丑陋的滚动条呢?下面来和我一起研究一下~ 制作示例如下: 网易云音 ...
- axure如何实现跳转_Axure中继器实现APP中设置页面的各种列表
中继器是Axure中的一个高级元件,可以当做Axure中的小型数据库使用,用于实现一些增删查改的效果,同时可用于一些具有相同元件组合的组件的快速生成,比如APP中的设置,如下图所示.下面我们介绍一下怎 ...
- 微信小程序教程:文字跑马灯效果
当你的微信小程序内容中出现文字跑马灯效果,会不会觉得很拉风,接下来大家详细讲解下如何操作实现这效果. 效果: wxml <view>1 显示完后再显示</view> <v ...
- godaddy域名转发(域名跳转)设置教程
godaddy的域名跳转很多新手都不会设置,在这里用图文教程交下大家如何设置godaddy的域名转发.其实godaddy的域名跳转设置很简单,但是关键是,目前国外的域名跳转国内基本无法使用.比如说电信 ...
- Win11如何跳过开机更新 Win11跳过开机更新教程
已经有很多用户更新升级到win11系统了吧,但是有用户发现偶尔开机会出现自动更新,导致无法及时开机使用,那win11统如何跳过开机更新呢?可以先使用电源键取消这次更新,然后进入系统取消更新检测就可以了 ...
- python微信使用教程全图_微信跳一跳python怎么刷分_微信跳一跳python使用教程_飞翔教程...
最近,跳一跳,可以说是火爆了微信好友圈,Github大神wangshub分享了一个针对该游戏的开源项目,也就是一个Python脚本程序可以刷很高的分,下面飞翔铭月为大家带来跳一跳python使用教程. ...
- python学法用法 自动刷分_微信跳一跳python怎么刷分_微信跳一跳python使用教程
微信跳一跳python怎么刷分?要知道,游戏中这个Python脚本程序可以刷很高的分数,所以接下来小编要为大家介绍下python使用教程! 微信跳一跳python使用教程 工具介绍 Python 2. ...
- python学法用法 自动刷分_微信跳一跳python使用教程 微信跳一跳python怎么刷分
最近,跳一跳,可以说是火爆了微信好友圈,Github大神wangshub分享了一个针对该游戏的开源项目,也就是一个Python脚本程序可以刷很高的分,下面就为大家带来跳一跳python使用教程. 微信 ...
- 跳一跳python刷分_微信跳一跳python怎么刷分 跳一跳python应用教程
微信跳一跳python怎么刷分 跳一跳python使用教程 发表时间:2018-01-08 我要评论(0) | 我要分享: 跟着身边不少小伙伴都参加了微信跳一跳挑衅,友人圈最近都被刷爆了,为了刷分,良 ...
最新文章
- 思考一下消息中间件的设计
- 【转】胶片曝光时的排版!!!!!!!
- 自动驾驶汽车自主决策与规划技术(一):里程定位于全局定位简介
- SSM框架笔记09:初探Spring——采用Java配置方式
- ruby 在 windows 中 新建进程 打开其他程序
- JAVA语法基础作业
- jdk api 1.8中文手册
- steamcommunity 302占用端口
- SVM支持向量机原理(一) 线性支持向量机
- linux清除ip地址命令,ip 命令 和ifconfig 命令 删除IP
- Python的繁体简体转换
- nmap下载及安装过程。
- OpenMV 从入手到跑TensorFlow Lite神经网络进行垃圾分类
- 块加密 工作模式 ECB、CBC、PCBC、CFB、OFB、CTR
- telnet不是内部或者外部命令也不是可运行的程序
- perror和strerror的使用和区别
- 第4章 基础知识进阶 第4.1节 Python基础概念之迭代、可迭代对象、迭代器
- Structured Streaming简介
- 云数据库 Redis 版连接数据库-DMS登录云数据库
- Python爬取豆瓣Top250的电影
热门文章
- [UnityShader基础]04.ColorMask
- MyBatis学习(三)--MyBatis配置文件简介
- java的OutOfMemoryError: PermGen space实战剖析
- Python练习5-正则表达式
- LintCode Coins in a Line II
- oracle数据库创建表空间和表临时空间
- eclipse中输入@符号自动提示Annotation
- oracle 得到父节点和子节点
- 拓端tecdat|R语言分布滞后非线性模型(DLNM)研究发病率,死亡率和空气污染示例
- 拓端tecdat|Matlab建立SVM,KNN和朴素贝叶斯模型分类绘制ROC曲线