大屏项目动画杂记十几个Mp4视频和十几个序列帧动画一起播放的6K大屏软件，边缘项目，css视频动画，大屏动画，日常对抗路

项目简介：本人属于展陈设计行业，勉强称为前端，大屏分辨率6536*1548，属于真大屏项目了，主要技术Electron+jquery；参与人员策划（非产品），后期（非UI）以及我，等我知道这个项目的时候，大屏的设计概念稿和拍摄视频已经渲染的差不多了，嗯，简单来说这个大屏项目的内容全是图片和视频，没有表格，没有文字。

策划想法：都要动起来，要好看，要好玩......

后期想法：我渲的东西要清晰不能糊......

我的想法：这什么玩意儿，哪里来的鬼东西，这么一个软件就突然出现啦，我还没有提想法和需求了，额，对不起，我错了，我不配说话！

俗话说的好，钱难赚屎难吃，看着最终设计图的我陷入了沉思；其实项目素材内容很简单，背景为全屏动态视频，里面有6个单人演员视频在固定的6个位置表演，另外还有一些飞来飞去的小东西和全屏特效，最后配合雷达与现场观众做一些互动；项目的主要难点是单人视频怎么和动态背景视频融合在一起，废话不多说，起手式：

<div class="box">
    <div class="wrap"></div>
</div>

.box {
    width: 65.36rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}
.wrap {
    width: 65.36rem;
    height: 15.48rem;
    position: relative;
    overflow: hidden;
    background: url() no-repeat center center;
    background-size: 65.36rem 15.48rem;
}

var cloud=[];
for (let i = 0; i <= 258; i++) {
  let filename = '' + ('00000' + i).slice(-5) + '.png';
  // 创建 Image 对象
  let img = new Image();
  img.src = filename;
  cloud.push(img);
}
var cloudAni = function () {
  let frame = 0;
  let frameCounter = 0; 
  function animate() {
    // 每次增加一帧
    frameCounter++; // 计数器增加
    if (frameCounter >= 2) { // 每隔两次才更新一次帧
      frame++; 
      frameCounter = 0; 
    }
    $('.cloud img').attr('src', cloud[frame].src);
    if (frame >= 258) {
      frame = 0;
    }
    requestAnimationFrame(animate);
  }
  animate();
};

卡了1分钟后，动画出现了，很丝滑，但是新问题出现了，视频里面的特效太多了，序列帧合成的视频有黑色底纹。

我：这不明显啊，谁第一眼看的出来。

后期：不行，你换个方法。

我：那你给我透明底的WEBM视频吧。

后期：好的，这是MOv，你接着。

我反手掏出来格式工厂，这里不能选AV1，我选的VP9，顺利的导出了视频，这会是一点都不卡了，但是和序列帧一样有黑底，放弃。

我：我有一计，你把背景搞暗一点，这样黑底就没了，弄个满天繁星那种，肯定特别好看。

video{
    mix-blend-mode:screen
}

后期：你在想peach。

我：这也不行，那也不行，干脆直接把人合在背景视频里面吧。

后期：每个人出场时间不一致，视频背景不同步怎么办？

我：你别管，我还有一计。

.video0 {
    height: 15.48rem;
    width: 10.18rem;
    position: absolute;
    top: 0;
    left: 30.75rem;
    background: none;
    opacity: 0;
    z-index: 997;
    -webkit-mask: linear-gradient(to right, transparent 10%, black 30%, black 85%, transparent 100%);
}

动态背景为浮动的云，比较抽象的事物，webkit-mask提供的边缘透明虚化正好把单人视频和背景完美的融合在一起。

上图是人物背景和动态背景不一致融合的效果，如果把人物背景和动态背景换成一样，肉眼基本看不出区别。

后期：还行吧，那个人后面的鸟飞的路径好傻，能飞圆弧曲线么。

算了，我还是使用svg动画吧，路径是网站上画的zuohaotu.com/svg/

.bird {
    position: absolute;
    opacity: 1;
    offset-path: path('m0,0c0,0 -156.470588,-375.294118 -420,-337.647059c-263.529412,37.647059 -132.941176,392.941176 420,337');
    animation: arcMove 30s ease-in-out forwards;
    offset-rotate: 0deg; 
    z-index: 999;
}
@keyframes arcMove {
    0% {
        offset-distance: 0%;
        transform: scale(0);
        top: -3rem;
        left: 27rem;
    }
    100% {
        offset-distance: 100%;
        transform: scale(1);
        top: 0;
        left: 0.58rem;
    }

最后大屏上能同时播十几个Mp4视频和十几个序列帧动画，视频大小也在我强烈要求下换成了低比特率的25帧MP4，不然50帧的6k高清视频真带不动，里面还有不少坑，不写了摸鱼去了。