2023年7月14日发(作者：)

跑马灯效果（⽂本）简介本篇主要介绍在微信⼩程序中⽤⼀种简单的⽅式实现跑马灯效果（相对⽹上查询到的其它⽅法更加简洁）核⼼动画是通过wxss实现⼀点点的js进⾏动画效果微调（如果对动画要求不⾼可以不⽤）效果⽰意1. 开始和结束会停顿⼀段时间（demo中时间长达由⽂字长度决定，如果需要更加进⾏可以通过js⾃⾏进⾏控制）2. 当⽂字不满⼀屏是，不会滚动（⽆动画）模拟器演⽰有时细微闪烁（⽐gif流程蛮多），真机流畅.gifCode我是将代码写在⼀个组件中的， 使⽤时直接使⽤组件即可。下⾯是组件中的代码{ "component": true, "usingComponents": {}}下⾯js的作⽤是设置动画时长和线性特性Component({ properties: { text: { type: String, value: ''} }, data: { sty: '' }, ready: function () { let THIS = this const query = SelectorQuery().in(this) ('#marquee').boundingClientRect() (function (res) { let maxW = res[0].right // 获取⽂本框的最⼤y坐标

let windowW = temInfoSync().windowWidth

let sty = '' if(maxW > windowW) { // 满⾜⼀屏（不⾜⼀屏，不动画） let time = 10 * maxW / windowW // 动画时长 sty = 'animation: textblock ' + time + 's linear infinite;' } a({ sty: sty }) }) },}) {{text}} t{ 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等），但我感觉⽐较⿇烦，然后尝试着写了这么个东西。虽然不见得⽐那些查到就好，但是我还是决定拿出来和⼤家分享⼀下，看各位的意见，集思⼴益才能知道我的思路是否值得推⼴，才能共同进步！