小程序wxss 圖片跑馬燈

咱們寫跑馬燈通常都是用js控制定時器不斷循環產生，可是定時器消耗比較大，特別是程序中不少用到定時器的時候，感受有的時候比較卡。可是css樣式通常不會。這裏主要的思路就是用css代替js定時器實現一個簡單的跑馬燈。

 

一、基本思路

     此次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來試試~~