跑馬燈組件---基於angular6+

跑馬燈，非常常用的功能，用於消息通知之類的。百度一搜都是使用<marquee>來完成。結果發現W3C上根本沒有這個標籤。原來是這個標籤即將被刪除。在前端不斷革新的今天，怎麼能用將廢棄的標籤呢。指不定哪天就沒了，程序出了莫名的bug都不知道。所以我決定自己寫一個跑馬燈。

單獨的css3動畫完全可以實現一個跑馬燈效果，但是，css寫死了，那怎麼組件化，讓人人都可以用呢。所以想到使用js控制。第一個想到的就是定時器。通過定時器+transform：translateX()去減少px的值。只需要將定時器的時間設置爲 16.6，即每秒刷新60次，讓人看不到卡頓。輕鬆實現。

定時器存在一個致命問題，假如你做的頁面還有其他動畫也使用定時器，那完蛋，js是單線程，這種定時器會讓組件移動開始出現卡頓。到後期可能直接卡死頁面。

所以使用定時器的方案pass。

採用css3的動畫的方式,這種方式利用純css完成，爲了不寫死動畫效果，使用js控制css，有一點all in js的感覺哈。下面上關鍵代碼

runAnimationLR(){
    this.render2.setAttribute(this.canvasBox.nativeElement,'style',`width: ${this.config['width']} `);
    this.render2.setAttribute(this.marqueeBox.nativeElement,'style',!!this.config['animation']?
    `animation: runAnimation ${this.config['animation']}; width: max-content`:
    `animation: runAnimation ${this.config['duration']} ${this.config['timingFunction']} ${this.config['directionCount']}; width: max-content`);
    let style = <CSSStyleSheet>document.styleSheets[0];
    let start=this.canvasBox.nativeElement.getBoundingClientRect().width;
    setTimeout(()=>{
      let end = this.marqueeBox.nativeElement.getBoundingClientRect().width;
      console.log(start,end)
      style.insertRule(this.directionMap(this.config['direction'],start,end));
    },0)
    
   }
   runAnimationDU(){
    this.render2.setAttribute(this.canvasBox.nativeElement,'style',`height: ${this.config['height']};width: ${this.config['width']}`);
    this.render2.setAttribute(this.marqueeBox.nativeElement,'style',!!this.config['animation']?
    `animation: runAnimation ${this.config['animation']}; width: 100%`:
    `animation: runAnimation ${this.config['duration']} ${this.config['timingFunction']} ${this.config['directionCount']}; width: 100%`);
    let style = <CSSStyleSheet>document.styleSheets[0];
    let start=this.canvasBox.nativeElement.getBoundingClientRect().height;
    setTimeout(()=>{
    let end = this.marqueeBox.nativeElement.getBoundingClientRect().height;
      console.log(start,end)
      style.insertRule(this.directionMap(this.config['direction'],start,end));
    })
   }
   directionMap(dir:string,start:number,end:number):string{
      if(dir==='right'){
        return `@keyframes runAnimation
        {
         from {transform:translateX(${start}px);} 
         to {transform:translateX(${-end}px);}
          }`
      }
      if(dir==='left'){
        return `@keyframes runAnimation
        {
         from {transform:translateX(${-end}px);} 
         to {transform:translateX(${start}px);}
          }`
      }
      if(dir==='down'){
        return `@keyframes runAnimation
        {
         from {transform:translateY(${-end}px);} 
         to {transform:translateY(${start}px);}
          }`
      }
      if(dir==='up'){
        return `@keyframes runAnimation
        {
         from {transform:translateY(${-end}px);} 
         to {transform:translateY(${start}px);}
          }`
      }
   }

 關鍵代碼如上，可以控制上下，左右變換。相對比較簡單，完整代碼放在github上，暫時還沒上傳，上傳後附上地址。

原生的代碼和上述類似，把獲取dom的方式換成原生的即可。

希望對你有幫助。。。