手写个哔哩哔哩春季banner

效果

先看看效果呗

github地址

起因

逛b站的时候发现bilibili不知什么时候换了banner，初看banner就是监听鼠标移动来进行图片的移动和变换，（看到2233在奔跑我不经想起了我逝去的青春）心中觉得有趣(估计是我见得少)，想仿制一个便有了这个项目。

项目结构

由于是简单的项目随手用vue-cli搭建了一个

├── package.json
├── public
├── src
│   ├── App.vue
│   ├── components
│   │   ├── animatedBanner.vue
│   │   ├── cubicBezier.js
│   │   ├── extensions
│   │   │   ├── particle
│   │   │   │   ├── UniversalCamera.js
│   │   │   │   ├── index.js
│   │   │   │   ├── particle.js
│   │   │   │   ├── shader
│   │   │   │   │   ├── displayFrag.js
│   │   │   │   │   ├── displayVert.js
│   │   │   │   │   ├── flow1.png
│   │   │   │   │   ├── flow2.png
│   │   │   │   │   ├── updateFrag.js
│   │   │   │   │   └── updateVert.js
│   │   │   │   └── shader.js
│   │   │   ├── snow.js
│   │   │   ├── snowflake.png
│   │   │   └── utils.js
│   │   └── position.js
│   ├── main.js
│   └── static
└── vue.config.js

代码分析

image.png

animatedBanner.vue

<template>
  <div class="animated-banner" ref="container" />
</template>

先简单的写一个div来作为整个banner的容器，接下来便是逐步完成整个页面的填充

  1. 第一步需要各类图片素材，先将他们引入，为了省事我就选择本地引入静态图片，也可以通过将图片进行托管后进行引入。
  • imgList作为一个数组来进行图片资源映射
export default {
  props: {
    config: { //外部传入图片配置
      required: true,
      default: {}
    }
  },
  data() {
    return {
      entered: false, //鼠标进入flag
      layerConfig: {},//图片配置
      imgList: {
        '01': require('../static/01.png'),//引入本地图片
        '02': require('../static/02.png'),
        …………
      }
    }
  },
image.png
image.png

从引入的图片可以看到，图片素材都是擦除背景的png文件，可以通过我们的排列组合最后才能显示一幅画面

  1. 配置信息 position.js
    图片的相关位置和大小我们通过一个json对象来报保存，一般通过后台来返回给我们相关的信息，这里简单演示便选择引入本地的json对象,这里具体包含了图片的缩放状态，位移距离，透明度，高斯模糊等等属性。
export default {
  "version": "1",
  "layers": [{
    "resources": [{
      "src": "01",
      "id": 0
    }],
    "scale": {
      "initial": 0.5
    },
    "rotate": {},
    "translate": {
      "initial": [0, -30],
      "offset": [-200, 0]
    },
    "blur": {},
    "opacity": {},
    "id": 16,
    "name": "15_天空"
  }, {
    "resources": [{
      "src": "02",
      "id": 0
    }],
    …………
  }
  1. 页面挂载钩子，在mounted函数上完成dom树🌲的渲染和构建
  • 这里的this.config就是前文传入position.js中的相关图片信息，通过他来构建图片
async mounted() {
    // 只有在启用了动画banner的配置，且浏览器支持css filter时才加载动画banner的图片资源
    this.animatedBannerSupport =
      typeof CSS !== 'undefined' &&
      CSS.supports &&
      CSS.supports('filter: blur(1px)') &&
      !/^((?!chrome|android).)*safari/i.test(navigator.userAgent) 
      // safari浏览器在mac屏幕上模糊效果有性能问题，不开启

    if (!this.animatedBannerSupport) {
      return //不支持直接返回
    }
      this.layerConfig = this.config.layers //获取配置信息
    }
}
  1. 图片的加载
 // 等待页面加载完成
    if (document.readyState !== 'complete') {
      await new Promise((resolve) => window.addEventListener('load', resolve))
    }
   
    try {
      // 加载所有图片资源
      await Promise.all(
        this.layerConfig.map(async (v) => {
          return Promise.all(
            v.resources.map(async (i, index) => {
                const img = document.createElement('img')
                img.src = this.imgList[i.src] //获取图片资源url
                await new Promise((resolve) => (img.onload = resolve))
                v.resources[index].el = img //将每张图读取到后保留在el上
            })
          )
        })
      )
    } catch (e) {
      console.log('load animated banner images error', e)
      return
    }

每一个layerConfig的元素都包含图片资源el以便于后面生成图片元素

image.png
    const layerConfig = this.layerConfig
    if (!layerConfig.length && !this.config.extensions) {
      return //如果layerConfig没有值就不进行后面动态操作，直接展示静态
    }
    //获取元素设置宽高
    const container = this.$refs['container'] 
    let containerHeight = container.clientHeight
    let containerWidth = container.clientWidth
    let containerScale = containerHeight / 155
    //这里155是样式上设置的最小高度

    layerConfig.forEach((v) => {
      v._initState = { //设置初始值
        scale: 1,
        rotate: v.rotate?.initial || 0,
        translate: v.translate?.initial || [0, 0],
        blur: v.blur?.initial || 0,
        opacity: v.opacity?.initial === undefined ? 1 : v.opacity.initial
      }
      v.resources.forEach((i, index) => {
        const el = v.resources[index].el
        //用naturalHeight，naturalWidth来获取图像文件本身的高度和宽度
        //在图片放大缩小，动态生成图片用该方法更便捷
        el.dataset.height = el.naturalHeight
        el.dataset.width = el.naturalWidth
        const initial = v.scale?.initial === undefined ? 1 : v.scale?.initial
        el.height = el.dataset.height * containerScale * initial
        el.width = el.dataset.width * containerScale * initial
      })
    })
  1. 初始化图层
// 初始化图层
    const layers = layerConfig.map((v) => {
      const layer = document.createElement('div')
      layer.classList.add('layer')
      container.appendChild(layer)
      return layer
    })
    //定义变量
    let displace = 0 
    let enterX = 0 //鼠标进入的x坐标
    let raf = 0
    let lastDisplace = NaN //最后离开值
    this.entered = false
    this.extensions = [] //插件扩展
  1. 监听鼠标移动方法
 // 根据鼠标位置改变状态
    const af = (t) => {
      try {
        if (lastDisplace === displace) {
          return
        }
        lastDisplace = displace
        layers.map((layer, i) => {
          const v = layerConfig[i]
          const a = layer.firstChild //img元素
          if (!a) {
            return
          }

          const transform = {
            scale: v._initState.scale,
            rotate: v._initState.rotate,
            translate: v._initState.translate
          }
          if (v.scale) {
            const x = v.scale.offset || 0
            const offset = x * displace
            transform.scale = v._initState.scale + offset
          }
          if (v.rotate) {
            const x = v.rotate.offset || 0
            const offset = x * displace
            transform.rotate = v._initState.rotate + offset
          }
          if (v.translate) {
            const x = v.translate.offset || [0, 0]
            const offset = x.map((v) => displace * v)
            const translate = v._initState.translate.map(
              (x, i) =>
                (x + offset[i]) * containerScale * (v.scale?.initial || 1)
            )
            transform.translate = translate
          }
          //为图片元素添加style
          a.style.transform =
            `scale(${transform.scale})` +
            `translate(${transform.translate[0]}px, ${transform.translate[1]}px)` +
            `rotate(${transform.rotate}deg)`
          if (v.blur) {
            const x = v.blur.offset || 0
            const blurOffset = x * displace

            let res = 0
            if (!v.blur.wrap || v.blur.wrap === 'clamp') {
              res = Math.max(0, v._initState.blur + blurOffset)
            } else if (v.blur.wrap === 'alternate') {
              res = Math.abs(v._initState.blur + blurOffset)
            }
            a.style.filter = res < 1e-4 ? '' : `blur(${res}px)`
          }

          if (v.opacity) {
            const x = v.opacity.offset || 0
            const opacityOffset = x * displace
            const initial = v._initState.opacity
            if (!v.opacity.wrap || v.opacity.wrap === 'clamp') {
              a.style.opacity = Math.max(
                0,
                Math.min(1, initial + opacityOffset)
              )
            } else if (v.opacity.wrap === 'alternate') {
              const x = initial + opacityOffset
              let y = Math.abs(x % 1)
              if (Math.abs(x % 2) >= 1) {
                y = 1 - y
              }
              a.style.opacity = y
            }
          }
        })
      } catch (e) {
        console.error(e)
        this.$emit('change', false)
      }
    }
  1. 初始化图层内图片和帧动画
 // 初始化图层内图片和帧动画
    layerConfig.map((v, i) => {
      const a = v.resources[0].el
      layers[i].appendChild(a)
      requestAnimationFrame(af)
    })
    this.$emit('change', true)
  1. 定义鼠标事件
    // container 元素上有其他元素，需使用全局事件判断鼠标位置
    const handleLeave = () => {
      const now = performance.now()
      const timeout = 200
      const tempDisplace = displace
      cancelAnimationFrame(raf)
      const leaveAF = (t) => {
        if (t - now < timeout) {
          displace = tempDisplace * (1 - (t - now) / 200)
          af(t)
          requestAnimationFrame(leaveAF)
        } else {
          displace = 0
          af(t)
        }
      }
      raf = requestAnimationFrame(leaveAF)
    }
    this.handleMouseLeave = (e) => {
      this.entered = false
      handleLeave()
    }
    this.handleMouseMove = (e) => {
      const offsetY = document.documentElement.scrollTop + e.clientY
      if (offsetY < containerHeight) {
        if (!this.entered) {
          this.entered = true
          enterX = e.clientX
        }
        displace = (e.clientX - enterX) / containerWidth
        cancelAnimationFrame(raf)
        raf = requestAnimationFrame(af)
      } else {
        if (this.entered) {
          this.entered = false
          handleLeave()
        }
      }

      this.extensions.map((v) => v.handleMouseMove?.({ e, displace }))
    }
    this.handleResize = (e) => {
      containerHeight = container.clientHeight
      containerWidth = container.clientWidth
      containerScale = containerHeight / 155
      layerConfig.forEach((lc) => {
        lc.resources.forEach((i) => {
          const el = i.el
          el.height =
            el.dataset.height * containerScale * (lc.scale?.initial || 1)
          el.width =
            el.dataset.width * containerScale * (lc.scale?.initial || 1)
        })
      })
      cancelAnimationFrame(raf)
      raf = requestAnimationFrame((t) => {
        af(t)
      })
      this.extensions.map((v) => v.handleResize?.(e))
    }
    document.addEventListener('mouseleave', this.handleMouseLeave)
    window.addEventListener('mousemove', this.handleMouseMove)
    window.addEventListener('resize', this.handleResize)
  1. 在组件销毁前移除监听
 beforeDestroy() {
    document.removeEventListener('mouseleave', this.handleMouseLeave)
    window.removeEventListener('mousemove', this.handleMouseMove)
    window.removeEventListener('resize', this.handleResize)
    if (this.extensions) {
      this.extensions.map((v) => v.destory?.())
      this.extensions = []
    }
  },
  1. 扩展
    此处引用bilibli的樱花下落js 有需要可以去github自取
//添加樱花🌸
    // if (this.config.extensions?.snow) {
    //   const snow = (
    //     await import(
    //       /* webpackChunkName: 'animated-banner-snow' */ './extensions/snow.js'
    //     )
    //   ).default
    //   this.extensions.push(await snow(this.$refs['container']))
    // }
    if (this.config.extensions?.petals) {
      try {
        const petals = (await import('./extensions/particle/index.js').default
        this.extensions.push(await petals(this.$refs['container']))
      } catch (e) {
        console.error(e)
      }
    }

App.vue

banner通常作为一个组件来被其他页面引用，

<template>
  <div id="app">
    <animatedBanner
      v-if="animatedBannerEnabled"
      :config="position"
      @change="(v) => (animatedBannerShow = v)"
      :style="animatedBannerShow ? '' : `background-image: url(${bannerImg})`"
      :class="animatedBannerShow ? '' : 'staticImg'"
    />
  </div>
</template>
  1. app页面在挂载时优先展示静态的banner来适配不同浏览器差异
export default {
  name: 'App',
  data() {
    return {
      position, //图片位置相关配置
      animatedBannerShow: false,    //是否显示静态banner
      animatedBannerEnabled: false  //是否可用
    }
  },
  components: {
    animatedBanner
  },
  computed: {
    bannerImg() {
      return require('./static/static.png')
    }
  },
  methods: {
    async animatedBanner() {
      // 优先加载展示静态banner
      const staticBannerImg = document.createElement('img')
      staticBannerImg.src = this.bannerImg
      await new Promise((resolve) => (staticBannerImg.onload = resolve()))
      this.animatedBannerEnabled = true
    }
  },
  mounted() {
    this.animatedBanner()
  }
}

写在最后

其实这里关键还是鼠标事件的监听和初始图片的位置等等信息，如有帮助到你不胜荣幸。
demo

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,937评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,503评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,712评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,668评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,677评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,601评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,975评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,637评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,881评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,387评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,971评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2赞 342