小程序可用CSS3 animation 实现的跑马灯

Posted 2021-04-09 SegmentFault

最近有个项目里面用到跑马灯，网上搜了下，虽然有人贴出来过一些实现，但是实际上都存在一些个问题。

哎，再造个轮子吧。

先放个效果：

p.s. 如果能访问jsfiddle最好：https://jsfiddle.net/650spwen/

主要原理

微信小程序现在实际上还是用的 webview，里面搞动画效率最高的莫过于使用CSS3 的 animation了。

跑马灯无非就是一直滚动，这很容易想到使用无限循环的 animation.

而一直往左滚动的效果，通过 css 有很多种方式，比如通过改变 left, margin-left, tranform:translateX()都可以实现。但是 left 和 margin-left 一般会导致布局的重新计算。使用 transform:translateX()性能会更好一些。

主要实现代码

首先，视图模板 wxml 中：

 
   
   
 

  
    
    
  
<view>css3 + animation跑马灯</view>
  
    
    
  

  
    
    
  
<view class="marquee">
  
    
    
  
    <view class="content">
  
    
    
  
        <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
  
    
    
  
        <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
  
    
    
  
        <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
  
    
    
  
    </view>
  
    
    
  
</view>
 
   
   
 

这里为了连续无限滚动，特意复制了 2 份跑马灯的内容（ .content)。

然后，样式 wxss 中：

 
   
   
 

  
    
    
  
@keyframes kf-marque-animation{ 0% { transform: translateX(0); } 100% { transform: translateX(-33.3%); } }
  
    
    
  
.marquee{
  
    
    
  
    width: 100%;
  
    
    
  
    height: 44px;
  
    
    
  
    line-height: 44px;
  
    
    
  
    background: #fff;
  
    
    
  
    border: none;
  
    
    
  
    display: block;
  
    
    
  
    margin: 0 auto;
  
    
    
  
    overflow: hidden;
  
    
    
  
    white-space: nowrap;
  
    
    
  
    text-overflow: clip;
  
    
    
  
    position: relative;
  
    
    
  
    font-size: 28rpx;
  
    
    
  
}
  
    
    
  
.marquee .content{
  
    
    
  
    display: inline-block;
  
    
    
  
    position: relative;
  
    
    
  
    padding-right: 0px;
  
    
    
  
    animation: kf-marque-animation 11.3s linear infinite;
  
    
    
  
    white-space: nowrap;
  
    
    
  
}
 
   
   
 

最后，js 里面随便给 page.data.text 赋值一段文本即可。具体 js 略。

如果要调整滚动速度，可以设置 .content 的元素的动画时间（ animation-duration 样式）。由于微信小程序中无法获取到对应元素的宽度，这个时间只能写死或者根据 text的长度估算出一个值。

完整的示例在jsfiddle上有个html版本的：https://jsfiddle.net/650spwen/