滴滴首页动画实现

Web面试那些事儿

已于 2023-12-29 17:16:18 修改

阅读量944

点赞数 19

分类专栏：前端资讯文章标签： javascript 前端 vue.js css

于 2023-12-29 17:15:56 首次发布

本文链接：https://blog.csdn.net/Likestarr/article/details/135295282

版权

前端资讯专栏收录该内容

92 篇文章 2 订阅

订阅专栏

首先我们得看下具体长啥样

这个不是有手就行？

首屏的车流滚动，经过分析，并不是一个video标签，此处应该做了判断，pc端用video，移动端使用图片的解决方案，

其实到这里大概就清楚了，DOM能很清晰的反应这段代码的逻辑。

so，说干就干。

首先你得拥有一段视频

自己准备

视频如何处理？

选择的工具：nodejs，ffmpeg，child_process

如果视频过长，可以选择先把视频截取自己需要的部分

    
    const { spawn } = require('child_process')
    const videoPath = './video/hot-girl.mp4'
    const outPath = './out'
    const segmentTime = 60 

    
    const ffmpeg = spawn('ffmpeg', [
        '-i', videoPath,
        '-c', 'copy',
        '-map', '0',
        '-f', 'segment',
        '-segment_time', segmentTime,
        `${outPath}/out%03d.mp4`
    ]);
    ffmpeg.on('close', (code) => {
    console.log(`child process exited with code ${code}`)
    })
    ffmpeg.stderr.on('data', (data) => {
        console.log(data.toString())
    })

把视频按帧截图，或者按时间截图

    const picVideoPath = './out/out011.mp4'
    const picOutPath = './out/pic'
    const ffmpegArgs = [
        '-i', picVideoPath,
        '-vf', 'thumbnail',
        '-frames:v', '1',
        '-c:v', 'png',
        '-f', 'image2pipe',
        'pipe:1',
        `${picOutPath}/girl%d.png`
      ];
    const ffmpeg = spawn('ffmpeg', ffmpegArgs);

那么问题来了，如果原视频画质较高，那么截图可能会超过你的想象（1M及以上）

如何处理？

imagemin imagemin-jpegtran imagemin-pngquant imagemin-webp 此处可自行选择使用imagemin-webpor imagemin-pngquant，我自己选择的是webp，因为webp的效率超乎你的想象，举个例子：1.5M经过imagemin-pngquant压缩之后再使用imagemin-webp，最后仅剩下区区20K。

const sourcePath = path.resolve("./out/pic");


const targetPath = path.resolve("./images");


 * 读取文件夹下的所有图片列表
 * @param {Function} cb 
 */
const getImagesList = (cb) => {
  fs.readdir(sourcePath, (err, files) => {
    if (!err) {
      return cb(files.map((name) => path.join(sourcePath, name)));
    }

    console.log(err);
  });
};


 * 压缩图片
 * @param {Array} files 
 */
const compress = async (files) => {
  return await imagemin(files, {
    destination: targetPath,
    plugins: [
      imageminJpegtran(),
      
      
      
      imageminWebp({
        quality: 10,
      })
    ],
  });
};

const run = () => {
  getImagesList(async (files) => {
    for (let index = 0; index < files.length; index++) {
      try {
        console.log(`${index+1}/${files.length}`)

        
        await compress([files[index]]);
      } catch (error) {
        console.log(error);
      }
    }
  });
};

run();

前期工作准备完毕，那么就该直接开始操作了！

此处注意，如果你切割出来的图片较多，请搭建一个静态文件服务或者？？，不要放到当前项目下，可能会导致打包失败！超过限制

根据原有思路，那么我们其实只需要去处理一下url就好了，那其实就是

<template>
    <img v-for="i in 1000" :src="`xxxx.com/img${i}.webp`" v-if="activeIndex ===i">
</template>
....
data () {
    return {
        activeIndex:1
    }
}
...

.... 

setInterVal(this.aciveIndex++,100)

但是这个会有什么问题呢？那就是图片加载速度跟不上你切换的速度，那么会咋样？

中间部分图片加载不出来就会导致看起来画面掉帧，卡顿等

_并且，通过v-if控制图片，还会导致资源反复加载，如果有同学挂着睡觉一晚上，明早起来房子没了，车子没了。。。。 _

仔细观察一下滴滴官网，发现他们的并没有出现这种情况？没有思考出为什么他们的没有这个情况？可能是请求头的原因？还是什么情况？大家可以帮忙参考一下

这是我设置的返回响应

滴滴的返回值

目前我为了解决这个问题，使用了用js把图片二进制流获取到，再生成base64，这样虽然也会有请求狂刷，但是不会造成额外的流量开销。

const total = 900;
const isLoaded = ref(0);
const images = ref<Array<string>>([]);
async function preloadImages() {
  for (let i = 1; i <= total; i++) {
    const data = await apis.utils.getImages<Blob>(`girl${i}.webp`);
    const url = URL.createObjectURL(new Blob([data],{type: 'image/webp'}));
    images.value[i] = url;
    isLoaded.value++;
    if(isLoaded.value >= 50) {
      changeActive();
    }
  }
}

(async () => {
  await preloadImages();
})();

const imageUrl = computed(() => {
  return images.value[active.value]
});
....
<template>
      <img :src="imageUrl" />
</template>