微信小程序css方式animation动画弹幕实现

1.背景：

背景一：

在某些场景下需要用到弹幕，例如视屏直播网站等等需要用到弹幕，视屏直播等平台会用到输入发送弹幕，这个可以参考小程序的视屏播放部分video传送门，在video组件中直接有弹幕配置方式，详细参考官方文档，这里不做赘述。

场景二：

有些场景只需要播放弹幕（例如在重大节日里，需要烘托节日气氛，后台填写几条，然后接口返给前端，前端在屏幕固定范围内播放即可，这里无需用户手动输入）。后文只围绕这种情况做说明。

2.思路：

思路一：

此时就只是一个图片展示，不涉及video部分（想偷懒，就没法偷懒了，只能自己实现了）。通过setinterval计时器来实现，没问题，当然可以，每条弹幕开通一个计时器，播放结束后把计时器清除。这种思路简单清晰，会js的都能想到，实现起来就不是那么好了。（须考虑：1.计时器创建；2.计时器清除；3.当页面弹幕比较多时，页面有好多计时器在跑，不利于性能考虑），所以我认为这种方式不怎么友好。

思路二：

因为只是弹幕播放，从一个方向往另一个方向运动即可，方式很多呀（例如：1.通过left值；2.通过translatex来控制），此时只需要控制其位置变化，通过css的animate动画来实现即可，css的方式不会用到计时器，动画循环往复即可。

3.代码实现：（我的项目中用的百分比布局的方式，所以都通过了计算，包括字体大小都计算后获得）

3.1 代码实现思路

3.1.1 创建一个播放的可视区域（可视区域固定高度，宽度百分百），即弹幕最外层容器；

3.1.2 每一条弹幕的播放时间，延迟播放时间，距离顶部定位的top距离，通过js生成计算所得，在结构中渲染展示；

3.1.3 动画播放，从左往右（left:100%到left:-100%）运动；

3.2wxml

<view class='danmu' wx:if="{{danmu}}" style='background-color:rgba(0,0,0,0.5)'><view wx:for="{{danmu}}" class='danmu-li rowAndColCenter' style="top:{{ item.top }}%;border-radius: {{window_h*0.18601*0.16}}px;font-size: {{window_h*0.18601*0.12}}px; animation: dmAnimation {{item.time}}s linear {{ index*3 }}s infinite;">{{item.title}}</view>
</view>

3.3css

.danmu {width: 100%;height: 18.601%;position: absolute;bottom: 0;left: 0;overflow: hidden;
}.danmu-li {height: 17%;padding: 0 20rpx;color: #fff;background-color: rgba(0, 0, 0, 0.5);position: absolute;left: 100%;top: 0;word-break: keep-all;white-space: nowrap;
}/* 弹幕动画 */@keyframes dmAnimation {from {left: 100%;}to {left: -100%;}
}

3.4js

Page({/*** 页面的初始数据*/data: {danmu: []},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {var that = this;// 系统宽高wx.getSystemInfo({success(res) {that.setData({window_w: res.windowWidth,window_h: res.windowHeight}, () => {var infor = ["用霸王防脱生发","幸运的我中奖了！","这么多奖品好多啊","美好的活动真棒","多好哇一二三四五六七八九十","不怕秃"];var danmu = []for (var i = 0; i < infor.length; i++) {const time = Math.floor(Math.random() * 10);const _time = time < 6 ? 6 + i : time + i;const top = Math.floor(Math.random() * 80) + 2;danmu.push({title: infor[i],top: top,time: _time,});}that.setData({danmu: danmu});});}});},
})

3.5 效果

4.说明：

4.1 推荐博客：https://blog.csdn.net/vinos_toby/article/details/90669260

4.2 animate文档：https://www.w3school.com.cn/cssref/pr_animation.asp

4.3 资源下载：https://www.duoguyu.com/smart/14.html

4.4 百度云下载：https://pan.baidu.com/s/1YtsI3vh-SXOS5CoTOf66VQ （提取码：q21u）

4.5 转载地址：https://blog.csdn.net/vinos_toby/article/details/90669260

4.6 仅做学习笔记使用，如果有侵权问题请联系博主删除。

微信小程序css方式animation动画弹幕实现相关推荐

微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序css 华文琥珀_琥珀项目：较小的，面向生产力的Java语言功能
微信小程序css 华文琥珀 Brian Goetz最近的消息欢迎来到琥珀! 介绍Project Amber ( OpenJDK的一部分, 最初于1月提出 ). Goetz通过介绍"欢迎使用A ...
微信小程序 css边框阴影,微信小程序|CSS的内边距和圆框
本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高. 光有浮 ...
微信小程序推广方式，不再千遍一律，看看这种方式是否适合你
网上看了一遍,涉及到小程序推广方式无外乎什么十种小程序推广方法,8招推广小程序常用方式等等,反复提到的方法千遍一律,都是些社区引流.线下推广.公众号引流.软文引流等常规手段.对小程序运营岗位的伙伴来说 ...
微信小程序打开红包的css_微信小程序 css使用技巧总结
微信小程序 css使用技巧 1:用纯CSS创建一个三角形的原理把上.左.右三条边隐藏掉(颜色设为 transparent) .demo { width: 0; height: 0; border-wi ...
微信小程序-炫酷手持滚动弹幕生成小工具
微信小程序-炫酷手持滚动弹幕生成小工具欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇 ...
微信小程序 php毛玻璃,微信小程序 CSS filter（滤镜）的使用示例详解
之前在看七月老师的视频的时候,看到了有一个样式是 -webkit-filter ,不知道是什么(我没咋学过CSS,嘿嘿,所以不知道是啥),于是查了一下,原来是滤镜吖.但是在微信小程序里使用的时候,下面 ...
微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
微信小程序css卡片样式（带阴影效果）
微信小程序css卡片样式(带阴影) 效果图 wxml代码 <view class="card"></view> css样式 .card{width: 90% ...
微信小程序循环列表添加动画animation
微信小程序内的css无法做到循环的动态 animationData变成[],数组里很多{}对象,就可以改变单独的值. WXML: <view class="context-full&q ...

微信小程序css方式animation动画弹幕实现

微信小程序css方式animation动画弹幕实现相关推荐

最新文章

热门文章