简介
本篇主要介绍在微信小程序中用一种简单的方式实现跑马灯效果（相对网上查询到的其它方法更加简洁）
- 核心动画是通过wxss实现
- 一点点的js进行动画效果微调（如果对动画要求不高可以不用）
效果示意
- 开始和结束会停顿一段时间（demo中时间长达由文字长度决定，如果需要更加进行可以通过js自行进行控制）
- 当文字不满一屏是，不会滚动（无动画）
模拟器演示有时细微闪烁（比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等），但我感觉比较麻烦，然后尝试着写了这么个东西。虽然不见得比那些查到就好， 但是我还是决定拿出来和大家分享一下，看各位的意见，集思广益才能知道我的思路是否值得推广，才能共同进步！
