滚动弹幕的实现方法可以有多种，但是我个人觉得性能好点的是用css3 的@keyfrom transform写动画实现。
我觉得横屏显示效果好点
在.json中
"pageOrientation": "landscape"
image.png
css动画
两个动画是因为我想在手机上和平板上都能正常运行
@keyframes wordsLoopForAndroid {
0% {
transform: translateX(750rpx);
-webkit-transform: translateX(750rpx);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@keyframes wordsLoopForIpad {
0% {
transform: translateX(2048rpx);
-webkit-transform: translateX(2048rpx);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
wxml
利用style根据你自己的需求生成动画animationData
<view class="animate" bindtap="swithIsshow" style="font-size:{{fontSize}}rpx;color:{{fontColor}}; animation:{{animationData}};font-weight:{{isBold?'700':''}}">{{str}}</view>
</view>
用设备的屏幕高度减去设备的导航栏高度得到最大的字体大小
闪烁效果 用了setInterval（）每300毫秒设置一下字体所取的index值，形成闪烁效果。
第一版出现bug ：动画因为我调整字体大小或者时长后它会叠加然后乱掉。
后来优化的时候，每次调整都把animationData置为空，bug就消失了。
然后加了是否是刘海屏的判断，如果是刘海屏，padding-left就加上刘海的高度，设置面板的文字就不会显示不全了。
