本
文
摘
要
前几天有朋友问到歌词滚动应该怎么做，针对歌词滚动这个功能做了一个简单的案例，仅供参考，大家如果有更好的做法记得call我们一下！
按照惯例，我们先看一下这个效果是怎样的
点这里预览：https://o0piel.axshare.com
看到效果了，咱们一起来看看在怎么做。页面的搭建这里就不细说了，相信大家都是没有问题的。只跟大家说要注意的地方。
第一、最重要的歌词部分。这里的做法是将歌词转化成了动态面板，这个那么长的歌词可以在动态面板的范围内进行滚动。
第二、播放和暂停按钮，这里的做法是用动态面板的不同状态去做，切换面板状态即可。当然你可以不这么做，没有绝对。
再来看一下，歌词在滚动的时候应该如何滚动。实际上我们是让歌词在动态面板中从下往上移动，关键是需要怎么移动。我们先看一下起始位置和结束位置。
起始位置就是我们刚开始放置的位置，在这里是y=100。结束位置这里用的是y=-1200，也就是说歌词是从100移动到了-1200，移动的距离是1300。
这首歌的时间是5:25，所以是在325秒的时间里需要移动1300，可以得出每1秒钟，歌词需移动4个像素。
我们可以借助另一个动态面板，让面板进行状态切换，每切换一次就让歌词向上移动一点，比如可以1秒切换一次，每次切换歌词移动4个像素。所以在页面中我们要增加一个辅助用的动态面板，创建2个或2个以上的状态。
在开始按钮上进行设置，一要设置按钮变成暂停。前面说了这里用的是动态面板去做的，所以这里是设置面板状态切换到相应状态。另外，要设置辅助用的动态面板进行不断进行状态切换，只需循环到next状态即可。
这里的配置是1秒钟切换一次。回到辅助的这个动态面板，在面板状态改变的时候，歌词移动就可。前面我们分析的，每一秒钟歌词移动4个像素，也就是在y轴上移动相对距离4，x轴不用移动。这里可以添加边界，就是起始位置和结束位置。
注意这里是从下往上移动，所以y轴的移动位置是-4。如果你做出来不对，不妨检查一下这个数值。记住，正值是向下移动，负值是向上移动。
要让歌词停止滚动，很简单，只需要让辅助的动态面板停止循环即可。停止之后就不再改变状态了，所以辅助用的动态面板上设置的改变面板时的动作不再执行。
这个案例比较简单，但是非常实用，还可以用在诸如进度条等案例中。只要掌握了这个原理，一切就会迎刃而解。
】留言哦~
