精华内容
下载资源
问答
  • 动画弹幕
    2021-11-08 19:05:03
     <div class="container" style="position: relative;">
            <video 
    更多相关内容
  • Android属性动画弹幕,自定义弹幕布局
  • 在B站或者其他视频网站看视频时,常常会打开弹幕效果,边看节目边看大家的吐槽。弹幕看起来很有意思,今天我们就来实现一个简单的弹幕效果。  从直观上,弹幕效果就是在一个ViewGroup上增加一些View,然后让这些...
  • 在某个位置上展示一些弹幕弹幕的样式需求如下:![在这里插入图片描述](https://img-blog.csdnimg.cn/20210312173916879.png 2.实现过程 因为在很多位置都需要用到该样式的弹幕功能,所以我将弹幕封装成一个组件...

    1.需求

    在某个位置上展示一些弹幕,弹幕的样式需求如下:![在这里插入图片描述](https://img-blog.csdnimg.cn/20210312173916879.png在这里插入图片描述

    2.实现过程

    因为在很多位置都需要用到该样式的弹幕功能,所以我将弹幕封装成一个组件(BaberrageVertical),在父组件中传入数据源来进行弹幕数据的显示。

    2.1 HTML

    2.2.1 父组件

    <BaberrageVertical :customers="barrageList" class="helper-top-barrage"/>
    
    Tip:我们可以在此处对弹幕于父组件页面位置进行决定
    

    2.2.2 子组件

    <div class="baberradeVertical">
        <ul class="baberradeVertical-left">
          <li class="baberradeVertical-left-item" v-for="(item,index) in threeObj" :key="index">
            <span class="baberradeVertical-left-item-name">{{ item.name }} 是一条</span>
            <span class="baberradeVertical-left-item-coursesName">弹幕</span>
          </li>
        </ul>
      </div>
    

    2.2 JS

    <script>
    export default {
      props: {
        customers: {	// 接收参数,主要为弹幕显示的内容
          type: Array,
        }
      },
      data() {
        return {
          baberrageTimer: null,	// 定时器,固定时间内将数据进行操作
          threeObj: [],		// 过多dom操作影响页面性能,所以用这个来固定几个dom,只修改数据即可
          showBaberrageAll: [],	// 弹幕池
        }
      },
      methods: {
      // 设置弹幕内容
        setOperateItem() {
          let i = 0;
          this.baberrageTimer = setInterval(() => {
          // 每一秒,向弹幕池中增加一条数据
            this.showBaberrageAll.push(this.customers[i]);
            // dom<5 向屏幕中增加数据即可
            this.threeObj = this.showBaberrageAll
            // 若dom数量过大,将列表中第一个li移除掉,增加一个新的li,这样不会因为循环对动画效果造成影响
            if (this.showBaberrageAll.length > 5) {
              // 移除第一个dom
              const baberrageParent = document.querySelector('.baberradeVertical-left')
              baberrageParent.removeChild(baberrageParent.childNodes[0])
              // 在列表结尾处新增一个li,用于存放新的元素
              let newLi = document.createElement('li')
              newLi.className = "baberradeVertical-left-item"
              newLi.innerHTML = `
              <span class="baberradeVertical-left-item-name">${this.threeObj[4].name} 报名了</span>
           <span class="baberradeVertical-left-item-coursesName">${this.threeObj[4].coursesName}</span>
              `
              baberrageParent.appendChild(newLi)
              // 超过五条后,令弹幕池中永远保持同样的数据即可,数量虽然未变,但是内容可以不断更新
              this.threeObj.shift();
            }
            i++;
            if (i > 9) {
              i = 0;
            }
          }, 1000)
        },
      },
      // 在页面销毁时清除定时器,否则会影响性能
      beforeDestroy() {
        clearInterval(this.baberrageTimer)
      },
      mounted() {
        this.setOperateItem();
      }
    }
    </script>
    

    2.3 CSS

    这个样式我单独封装成一个less文件,因为在js中有动态增加li及相关样式,若在组件中定义,会因为时机的问题加载不出来

    .baberradeVertical-left-item {
      background: #666666;
      padding: 4px;
      display: block;
      border-radius: 4px;
      animation: slidein linear 5s infinite;
    
      &-name {
        color: #FFFFFF;
        font-size: 12px;
      }
    
      &-coursesName {
        color: cadetblue;
        font-size: 12px;
        line-height: 17px;
        margin-left: 4px;
      }
    }
    
    @keyframes slidein {
      0% {
        transform: translateX(0, 0);
        opacity: 0;
      }
    
      20% {
        transform: translate(16px, 0px);
        opacity: 1;
      }
    
      40% {
        transform: translate(16px, -20px);
        opacity: 1;
      }
    
      60% {
        transform: translate(16px, -40px);
        opacity: 1;
      }
    
      80% {
        transform: translate(16px, -60px);
        opacity: 1;
      }
    
      100% {
        transform: translate(16px, -80px);
        opacity: 0;
      }
    }
    

    3.遇到问题

    在实现结果后会出现如下的问题,当我们在页面停留观看弹幕效果时,如果离开该窗口查看其它内容,计时器和动画效果同步,再次回来时会看到动画效果堆叠在一起,影响体验,解决方法如下:

    3.1 方法一:清空所有弹幕内容,重新开始

    在页面挂载时,增加一个visibilitychange事件监听器,监听是否在当前页面,如果离开该页面则清空定时器,回来时重新开始定时器,代码如下:

    eg:
      async mounted() {
      // 进入页面时,调用定时器,动画动起来
        await this.setOperateItem();
        // 加入事件监听器,当离开/回到当前窗口时进行不同的操作
        window.addEventListener("visibilitychange", async () => {
          if (document.hidden === true) {
            // 页面被挂起
            clearInterval(this.baberrageTimer);
            this.threeObj = [];
            this.showBaberrageAll = [];
            document.querySelector('.baberradeVertical-left').innerHTML = '';
          } else {
            // 页面由挂起被激活,弹幕重新开始
            await this.setOperateItem();
          }
        });
      }
    

    完全原创哦,转载商用请加水印~

    一直在路上,一路不迷茫!

    展开全文
  • 主要介绍了Html5移动端弹幕动画实现示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 在某些场景下需要用到弹幕,例如视屏直播网站等等需要用到弹幕,视屏直播等平台会用到输入发送弹幕,这个可以参考小程序的视屏播放部分video传送门,在video组件中直接有弹幕配置方式,详细参考官方文档,这里不做...

    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 仅做学习笔记使用,如果有侵权问题请联系博主删除。

    展开全文
  • Android属性动画弹幕,自定义弹幕布局 github地址 可配置项: private int displayLines = 4;//弹幕行数 private boolean isRepeat = true;//是否循环显示 private long animationTime = 6 * 1000L; //动画时间 ...

    Android属性动画弹幕,自定义弹幕布局

    github地址

    可配置项:

    private int displayLines = 4;//弹幕行数
    private boolean isRepeat = true;//是否循环显示
    private long animationTime = 6 * 1000L; //动画时间
    private long distanceTime = 3 * 1000L; //两条弹幕间隔时间
    private boolean isRandomDistanTime = true; //是否随机间隔时间
    

    这里写图片描述

    展开全文
  • css3动画实现弹幕效果

    千次阅读 2020-08-12 16:55:07
    实现构思: 利用css3动画和过度实现视频弹幕从右到左滚动的效果。 css3动画的属性值和用法 属性 描述 @keframes 定义动画效果,后接动画名 animation 所有动画属性的简写属性,除了animation-play-state ...
  • 动画类库源码 @charset "UTF-8"; .magictime { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-...
  • 这篇文章主要介绍了关于实现弹幕效果的方法总结(css和canvas) ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下之前在一个移动端的抽奖页面中,在抽奖结果的展示窗口需要弹幕轮播显示,之前踩过一些...
  • 项目需要实现弹幕,网上参考了各种方法,最后觉得transform+transition实现的效果在移动设备上性能最好,在iphone6和红米4上测试,看不到卡顿的感觉。用jquery的animate动画在移动设备上有明显的卡顿。本文主要介绍...
  • 刚开始学css
  • 主要介绍了前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • jq弹幕效果

    2022-02-27 20:15:27
    今天给大家分享一个jq的弹幕效果,那我们要怎样去实现这个效果呢? 下图是布局的代码,还有形式上的,如下图: 运行之后的效果如下图 接下来就是js的代码 先用parseInt的方法在main里面取一个...
  • css3实现蒙版弹幕功能

    2020-12-13 22:54:12
    最近在b站上看到一种弹幕效果叫做智能防挡弹幕,也就是传说中的蒙版弹幕, 打开之后效果大概是这样的 再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦,是不是感觉很神奇。 实现原理其实就是类似于ps的蒙版...
  • html5 canvas 视频网站文字弹幕动画特效 html5 canvas 视频网站文字弹幕动画特效
  • Jquery实现弹幕效果

    万次阅读 2018-05-22 15:08:40
    其实弹幕的主要思路很简单,就是将div从右向左移动,直到完全移除屏幕之后,将当前div从body中移除,这里我采用了面向对象的思想来处理,具体js代码如下: JS /** * 弹幕 */ $(function () { function ...
  • 小程序弹幕实现

    千次阅读 2021-06-06 11:09:12
    实现弹幕功能最主要的点就是利用CSS3里面的动画效果 /**定义从右边向左边的移动的动画**/@keyframes first { from { left: 100%; }​ to { left: -200%; }} 有了这个动画效果,实现弹幕效果非常简单了 效果图: ...
  • 2、修复弹幕后台管理登录系统后门 3、修复安装程序界面没有样式问题 4、后台登录支持输出账号与密码了,更改用户名与密码请修改 dmku 文件夹下的 config.inc.php 文件 5、修复在播放器中右键菜单点击后自动在新窗口...
  • 需求已知20条内容要有弹幕效果,分成三层,速度随机。先来看看效果:小小弹幕效果.gif所以这里不考虑填写生成的。只是一个展现的效果。如果要看填写生成的,请不要浪费Time思路把单个内容编辑好,计算自身宽度,确定...
  • uniapp小程序实现弹幕功能

    千次阅读 2021-08-24 21:08:33
    实现弹幕功能主要用的是css的animation 属性 animation 属性是一个简写属性,用于设置六个动画属性: animation-name 规定需要绑定到选择器的 keyframe 名称。 animation-duration 规定完成动画所花费的时间,以秒...
  • 看B站时,对弹幕的实现产生了兴趣,一开始想到用css3动画去实现,后来感觉这样性能不是很好,查了下资料,发现可以用canvas实现,于是就摸索着写了一个简单的弹幕弹幕功能 支持动态添加弹幕 弹幕不重叠 自定义...
  • 本文实例讲述了Android编程实现简易弹幕效果。分享给大家供大家参考,具体如下:首先上效果图,类似于360检测到骚扰电话页面:布局很简单,上面是一个RelativeLayout,下面一个Button.功能:(1)弹幕生成后自动从右侧...
  • 最新哔哩bilibili视频弹幕播放器/带后台版本/完整无错 此款播放器源码添加及修复了很多功能,且所有源码均本地化,不存在外链的情况。 环境:PHP7.0+MySQL5.6 优化修复功能: 1、修复优化播放器播放结束自动下一集...
  • 通过动画效果简单实现小弹幕功能。主要利用简单的DoubleAnimation制作动画效果。通过动画效果简单实现小弹幕功能。主要利用简单的DoubleAnimation制作动画效果。
  • js全屏星空背景发送文字弹幕动画特效,动画效果基于animation.css动画库,弹幕文字颜色随机显示。
  • 最近需要项目需要实现弹幕,网上参考了各种方法,最后觉得transform+transition实现的效果在移动设备上性能最好,在iphone6和红米4上测试,看不到卡顿的感觉。用jquery的animate动画在移动设备上有明显的卡顿。 1....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,308
精华内容 2,523
关键字:

动画弹幕