跑马灯效果（文本）

简介

本篇主要介绍在微信小程序中用一种简单的方式实现跑马灯效果（相对网上查询到的其它方法更加简洁）

• 核心动画是通过wxss实现
• 一点点的js进行动画效果微调（如果对动画要求不高可以不用）

效果示意

1. 开始和结束会停顿一段时间（demo中时间长达由文字长度决定，如果需要更加进行可以通过js自行进行控制）
2. 当文字不满一屏是，不会滚动（无动画）

模拟器演示有时细微闪烁（比gif流程蛮多），真机流畅.gif

Code

我是将代码写在一个组件中的， 使用时直接使用组件即可。下面是组件中的代码

• marquee-text.json

{
  "component": true,
  "usingComponents": {}
}

• marquee-text.js
  下面js的作用是设置动画时长和线性特性

Component({
  properties: { text: { type: String, value: ''} },
  data: {  sty: ''  },

  ready: function () {
    let THIS = this
    const query = wx.createSelectorQuery().in(this)
    query.select('#marquee').boundingClientRect()
    query.exec(function (res) {
      let maxW = res[0].right   // 获取文本框的最大y坐标 
      let windowW = wx.getSystemInfoSync().windowWidth  
      let sty = ''
      if(maxW > windowW) { // 满足一屏（不足一屏，不动画）
        let time = 10 * maxW / windowW // 动画时长
        sty = 'animation: textblock ' + time + 's linear infinite;'
      }
      THIS.setData({ sty: sty })
    })
  },
})

• marquee-text.wxml

<scroll-view class="content">
  <view id="marquee" class='text-box' style="{{sty}}">
    {{text}}
  </view>
</scroll-view>

• marquee-text.wxss

.content{
  background-color: #FFF9F0;
  color: #333333;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 12pt;
  overflow: hidden;
}
.text-box {  
  white-space: nowrap;
  position: absolute;
  width: max-content;
  margin-left: 40rpx;
}
@keyframes textblock { 
  /* 0%~%6是动画开始前的暂停，如果需要精细控制可以通过js辅助 */
  0% {transform: translateX(0);}
  6% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}

写在结尾

我在网上查了不少其它实现方式（如微信提供的动画API等），但我感觉比较麻烦，然后尝试着写了这么个东西。虽然不见得比那些查到就好， 但是我还是决定拿出来和大家分享一下，看各位的意见，集思广益才能知道我的思路是否值得推广，才能共同进步！