微信小程序开发，使用CSS3-Animation动画，实现小程序弹幕效果

最近接到公司小程序项目首页迭代改版的工作，涉及到文章图文布局改版。主要是精选文章，在首页推广入口增加评论弹幕效果，后端弹幕数据是随文章列表接口一次性返回给前端，由前端来处理弹幕数据及相关弹幕交互效果。

随后，简单分析了一下后端接口的数据结构，以及查询了一些传统web端弹幕的js实现方式。

鉴于我们当前业务的后端弹幕数据非动态持续发送，而是固定的评论条目，前端处理也仅仅是把文章评论渲染成弹幕并循环滚动，于是我采用的解决方案是通过css3的Animation动画属性来实现。

 

demo实现效果的动画演示效果。

演示视频效果：https://www.duoguyu.com/smart/14.html

 

对比图：

 

当前代码逻辑比较适合一些展示型的前端交互效果，比如：资讯类栏目、社交属性图文栏目、推广类广告位等。

 

# 无序弹幕 wxml #

    
        
            
                
                
            
            {{ item.content }}
            
            {{ item.zanNumber }}
        
    

 

# 无序弹幕 wxss #

@keyframes dmAnimation{
    from{ left: 100%; }
    to{ left: -100%; }
}

 

# 有序弹幕(轨道式) wxml #

    
        
            
                
                
            
            {{ item.content }}
            
            {{ item.zanNumber }}
        
    



    
        
            
                
                
            
            {{ item.content }}
            
            {{ item.zanNumber }}
        
    



    
        
            
                
                
            
            {{ item.content }}
            
            {{ item.zanNumber }}
        
    

 

# 有序弹幕 wxss #

@keyframes dmAnimation2{ 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-130%); } 
}

 

 

# 查看线上项目弹幕效果 #

 

 

# 详细代码片段及详解，源码下载地址 #

源码下载地址：https://www.duoguyu.com/smart/14.html