做一个微信小程序 弹幕牌功能

滚动弹幕的实现方法可以有多种，但是我个人觉得性能好点的是用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就加上刘海的高度，设置面板的文字就不会显示不全了。