内容简介：【小程序可用】CSS3 animation 实现的跑马灯
最近有个项目里面用到跑马灯，网上搜了下，虽然有人贴出来过一些实现，但是实际上都存在一些个问题。
哎，再造个轮子吧。
先放个效果： 
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/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
