我们写跑马灯一般都是用js控制定时器不断循环产生,但是定时器消耗比较大,特别是程序中很多用到定时器的时候,感觉有的时候比较卡。但是css样式一般不会。这里主要的思路就是用css代替js定时器实现一个简单的跑马灯。
1、基本思路
这次demo主要是通过css中的animation动画实现,借助transform中的translateY属性的增减实现dom位置的变化,让它跑起来。
---------------------------wxml----------------------------
<view class="marquee" >
<view class="content">
<image class='voice-image' src='../../pics/voice_orange.png'></image>
<text style="display: inline-block; width: 50em;"></text>
</view>
</view>
----------------------------wxss-----------------------------
.voice-image {
width: 100%;
height: 418rpx;
margin-bottom: 0rpx;
}
@keyframes kf-marque-animation {
0% {
transform: translateX(-5);
}
100% {
transform: translateX(-40%);
}
}
.marquee {
width: 100%;
height: 418rpx;
line-height: 44px;
background: rgb(0, 0, 0, 0.0);
border: none;
display: block;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
font-size: 28rpx;
bottom: 0rpx;
position: absolute;
/* opacity: 0.3; */
}
.marquee .content {
display: inline-block;
position: relative;
padding-right: 0px;
animation: kf-marque-animation 11.3s linear infinite;
white-space: nowrap;
}
这段代码比较容易理解,就是在进度0的时候位移为0,进度100%的时候位移100%。根据css动画原理,在100%的时候无限循环状态下,动画会自动重叠到进度0的状态,进而实现循环动画。
但是通过实际观察可以发现,过渡效果很不好,100%-0%的时候会出现闪跳的状态,为此我们将0%以及100%状态下的位置重新计算,并在进度0前面添加一个末位项实际观察可以发现,这样效果就好很多。原理的根本就是让闪跳的前一帧和后一帧的位置重合,而此时下一条文本还没有完全露出,视觉上基本达到无缝连接状态。
------------------------------------分割线------------------------------------------
虽然我们达到了这个目的,但是代码中还有不少问题。由于css无法获取dom节点数量,因此100%进度时的位移量只能写死。
- less在部分插件中可以实现获取dom相关内容,但是还是需要引入js,本质上还是通过js获取dom数量
- 另一种思路就是保留固定长度,通过js填充或打乱重选保证dom数量。比如我们设置一个的位移量等于14个dom节点的高度,在配置内容不足时,通过js循环一下补充到14个。而一旦大于就只能删除一部分了或者随机填充。
-----------------------------------峰回路转分割线----------------------------------
js可以直接操作keyframe内部的属性,这样的话就简单啦。页面初始化的时候
var cssRule; // Returns a reference to the specified CSS rule(s). function getRule() { var rule; var ss = document.styleSheets; for (var i = 0; i < ss.length; ++i) { // loop through all the rules! for (var x = 0; x < ss[i].cssRules.length; ++x) { rule = ss[i].cssRules[x]; if (rule.name == "marquee" && rule.type == CSSRule.KEYFRAMES_RULE) { cssRule = rule; } } } } cssRule.deleteRule("0"); cssRule.deleteRule("1"); cssRule.appendRule("0% { transform: translateY(-150px); opacity: 0; }"); cssRule.appendRule("100% { transform: translateY(0px); opacity: 1; }");
通过cssRule对象更新不同进度的状态即可。但值得注意的是仅仅是删除的时候动画效果并不会改变,要在添加上替换的才会其效果
-----------------------------------end----------------------------------
后面我们再换种方式,用requestAnimationFrame来试试~~