PHP怎么设置字体走马灯效果,Axure:文字跑马灯效果

日常学习之——跑马灯的效果 ~ 希望内容能对大家有帮助。

效果如下图 o ( * ̄▽ ̄* ) o

思路:

文字元件移动 + 动画效果,实现滚动的效果;

利用动态面板控制跑马灯文字在规定区域内滚动;

设置文字的初始位置、  移动的终点位置,合适的动画时间(即文字滚动速度);

最后一个字从视野里消失后,文字从右侧重新滚动,将文字元件移动到控制面板的右侧;

通过动态面板的显示与隐藏,触发循环机制。

动态面板是个好东西 ~ 下面介绍 axure 通过动态面板实现跑马灯 ~

一 、拖一个控制面板到画布,设置合适的大小,作为跑马灯文字滚动的区域

双击控制面板,打开一个面板状态页,增加一个文字元件,输入内容,内容要长长长。

如下图:

动态面板的作用是限制跑马灯文字在规定区域内滚动,面板中的元件文字移动的范围超出面板时,也不会显示在画布当中。

我想要的效果是,初始状态的时候文字就在视野中,所以文字放在与面板左侧对齐的位置。如果想要从视野外滚动到视野内,可以将文字元件拖放到面板右侧。

二、设置文字移动的交互事件

选择面板的 " 载入时 " 事件,添加用例的触发动作,如下图:

等待 1000 毫秒。这个不重要,只是用来控制页面加载完,过 1 秒才滚动文字。

移动文字到(x,y)。

参考坐标系选择绝对位置。

文字元件的 x 值:文字元件是以动态面板的坐标系进行移动的,动态面板的起点是(0,0),文字完全从面板面板中移出,即向左位移文字元件的长度等于文字元件的宽度,x=0- 文字元件 .width,即 x=0-Target.width;

文字元件的 y 值:水平向左平移,y 的值一直不变,是原始 y 的值,即文字顶部到边缘的距离,y=Target.top;

动画选择线性:时间设置为 10000ms。线性是为了使文字元件匀速滚动,10000ms 是调试一个合适的滚动的速度,与视线扫描滚动文字的速度差不多即可。

添加边界:设置右侧匀速移动文字(文字离开视野)–>文字快速复位(文字移动到面板右侧)–>隐藏面板(隐藏面板执行了显示面板,所以实际是触发显示面板的动作)–>显示面板–>移动文字(从步骤 2 开始循环)….

总结

动态面板中拖放一个文字元件,对文字元件进行移动操作,而不是对面板进行移动;

设置文字元件移动的终点位置,即文字元件右侧离开动态面板视野,与动态面板左侧相切;

移动到动态面板右侧,即文字元件复位,准备进行新一轮的移动;

通过动态面板的显示、隐藏,触发移动的循环过程。

以上,就是跑马灯的实现过程 ~

本文由 @First_Step 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页