跑马灯组件---基于angular6+

跑马灯，非常常用的功能，用于消息通知之类的。百度一搜都是使用来完成。结果发现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 = 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 = 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的方式换成原生的即可。

希望对你有帮助。。。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！