E企盈营销工具技术服务商 热线:4006-838-530

微信小程序开发,使用CSS3Animation动画,实现小程序弹幕效果

E企盈直播平台营销卖货系统

最近接到公司小程序项目首页迭代改版的工作,涉及到文章图文布局改版。主要是精选文章,在首页推广入口增加评论弹幕效果,后端弹幕数据是随文章列表接口一次性返回给前端,由前端来处理弹幕数据及相关弹幕交互效果。随后,简单分析了一下后端接口的数据结构,以及查询了一些传统web端弹幕的js实现方式。鉴于我们当前业务的后端弹幕数据非动态持续发送,而是固定的评论条目,前端处理也仅仅是把文章评论渲染成弹幕并循环滚动,于是我采用的解决方案是通过css3的Animation动画属性来实现。 demo实现效果的动画演示效果。演示视频效果:https://www.duoguyu.com/smart/14.html 对比图: 当前代码逻辑比较适合一些展示型的前端交互效果,比如:资讯类栏目、社交属性图文栏目、推广类广告位等。 # 无序弹幕 wxml #<view class=’dmGroup’ wx:for=”{{ dmData }}” wx:key=”{{ item.id }}”  style=”top:{{ item.top }}%; animation: dmAnimation {{item.time}}s linear {{ index*3 }}s infinite; “>    <view class=’dmItem’>        <view class=’dm’>            <view class=’avatarBox’>                <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}’ class=’avatar’ mode=’aspectFit’></image>                <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}’ class=’sex’ mode=’aspectFit’></image>            </view>            <text class=’content’>{{ item.content }}</text>            <image src='{{ iconGood }}’ class=’icon good’ mode=’aspectFill’></image>            <text>{{ item.zanNumber }}</text>        </view>    </view></view> # 无序弹幕 wxss #@keyframes dmAnimation{    from{ left: 100%; }    to{ left: -100%; }} # 有序弹幕(轨道式) wxml #<!– top –><view class=’dmGroup top’ style=”animation: dmAnimation2 35s linear infinite; “>    <view class=’dmItem’ wx:for=”{{ dmData }}” wx:if=”{{ index < 6 }}” wx:key=”{{ item.id }}”>        <view class=’dm’>            <view class=’avatarBox’>                <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}’ class=’avatar’ mode=’aspectFit’></image>                <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}’ class=’sex’ mode=’aspectFit’></image>            </view>            <text class=’content’>{{ item.content }}</text>            <image src='{{ iconGood }}’ class=’icon good’ mode=’aspectFill’></image>            <text>{{ item.zanNumber }}</text>        </view>    </view></view><!– mid –><view class=’dmGroup mid’  style=”animation: dmAnimation2 30s linear 1s infinite; “>    <view class=’dmItem’ wx:for=”{{ dmData }}” wx:if=”{{ index > 5 && index < 10 }}” wx:key=”{{ item.id }}”>        <view class=’dm’>            <view class=’avatarBox’>                <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}’ class=’avatar’ mode=’aspectFit’></image>                <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}’ class=’sex’ mode=’aspectFit’></image>            </view>            <text class=’content’>{{ item.content }}</text>            <image src='{{ iconGood }}’ class=’icon good’ mode=’aspectFill’></image>            <text>{{ item.zanNumber }}</text>        </view>    </view></view><!– btm –><view class=’dmGroup btm’  style=”animation: dmAnimation2 45s linear infinite; “>    <view class=’dmItem’ wx:for=”{{ dmData }}” wx:if=”{{ index > 9 }}” wx:key=”{{ item.id }}”>        <view class=’dm’>            <view class=’avatarBox’>                <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}’ class=’avatar’ mode=’aspectFit’></image>                <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}’ class=’sex’ mode=’aspectFit’></image>            </view>            <text class=’content’>{{ item.content }}</text>            <image src='{{ iconGood }}’ class=’icon good’ mode=’aspectFill’></image>            <text>{{ item.zanNumber }}</text>        </view>    </view></view> # 有序弹幕 wxss #@keyframes dmAnimation2{     0% { transform: translateX(0); }     100% { transform: translateX(-130%); } }  # 查看线上项目弹幕效果 #  # 详细代码片段及详解,源码下载地址 #源码下载地址:https://www.duoguyu.com/smart/14.html

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序开发,使用CSS3Animation动画,实现小程序弹幕效果
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏