@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屏的感觉 。
本文插图
建议以上用动态面板做 , 做成元件后可以直接复用 , 跑马灯、滚屏消息、弹幕等都可以应用 。再以上基础上一般的广告会有一种效果 , 鼠标移入时会暂停 , 点击后可跳转 。
鼠标移入时暂停播放 , 移出时自动播放 。
推荐阅读
- 海峡生活汇印度对中国虎视眈眈,我国将如何迎接挑战,英国仍想着事后清算
- JEECG前端Chrome调试小技巧汇总
- 嘴强玩家马小跳如何才能绝地翻盘?萨满:简单,炉石传说:对手场上7个死亡之翼
- 购房置业▲社保未缴满15年如何补救,这4种方式都可以,劝你不要选第4个
- #青春有你第二季#青你2学员问杨天真“火了如何调整心态”,杨天真怒怼:等你火了再说吧
- 程程搞笑该如何废物利用,网友回答笑了,在家找到过期的洗面奶
- 崔元新不输当前5G新机的4款旧旗舰,你如何选择呢?,新一轮降价潮
- 炒米视角对国家没用”,此人如何评价?,王福重博士谈农民:“一身蛮力
- 讲故事的女人是如何对待她们的?说出来你绝对不敢相信,萨达姆俘虏美国女兵后
- 我家的猫叫皮蛋台积电急了,纯国产芯片来了,华为设计,中芯生产你如何评价?,ASML断供失效
