小程序支持css3的动画吗,【小程序可用】CSS3 animation 实现的跑马灯

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

哎，再造个轮子吧。

先放个效果：

主要原理

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

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

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

主要实现代码

首先，视图模板wxml中：

css3 + animation跑马灯

{{text}}

{{text}}

{{text}}

这里为了连续无限滚动，特意复制了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的长度估算出一个值。