为什么要实现该效果?
刚开始是在公司项目中 有个点击飘心的效果,在飘心的同时,文字还能一致滚动【想象.png】。
在 Github 找了几个跑马灯的库,本以为都能实现,但是跑在项目上总会出现每次点击飘心动画后,滚动的文字都会重新开始滚动,这不是产品要的效果。(回到家后自己写了个 demo 测试 Github 上几个跑马灯效果很好的库都没问题,真真是打脸了)
先来推荐三个 GitHub 上实现跑马灯效果很不错的库
sunfusheng/MarqueeView 这是扩展了
ViewFlipper
实现的。实现的效果如下:MarqueeView.gif
gongwen/MarqueeViewLibrary 这也是扩展了
ViewFlipper
控件实现的,实现的效果如下:screen_shot1.gif
385841539/MarqueeView 这是继承了
View
去实现,作者说了实现该库的原因用TextView 出现了各种坑啊 , 尤其是在页面中同时存在EditText 的时候
,效果图如下:跑马灯.gif
膜拜以上几位大神,下面开始贴我实现的效果,一点都不丑,哈哈哈。
dongxi346/MarqueeLib 实现的效果:
demo.gif
简单介绍我实现思路
也是通过自定义View
实现,我实现的只有两种滚动方式,从左往右滚动,从右往左滚动。
从左往右滚动( x 轴是逐渐减增大 )
这个重点就在滚动的长度,我是利用View
的长度 +文本的长度
做滚动的长度,当超过这个长度,从头开始绘制View
从右往左滚动( x 轴是逐渐减小 )
这个滚动长度也是View
的长度 +文本的长度
做滚动的长度,当超过这个长度,从View
的 右边1/3
开始绘制View
作者:_龙衣
链接:https://www.jianshu.com/p/8dcdf20c81c1