查看原文
其他

前端开发,实现B站首页动态banner

作者:盏灯
https://juejin.cn/post/7275576084128350248

看B站这个动画banner好几个版本了,不知道是一个月更新一次新版动画,还是多少天更新一次(没有天天去看,但估算是一月更新一版UI,以后注意观察)。刚看到的时候很感兴趣,不像视频素材或者gif素材,就放一个视频上去,或者放一个动态画上去,这个是根据鼠标动而一个小范围地有规律有弧度地动,很少看过。

只是看过一些比如视觉差的类似这样的根据鼠标动而动的动画,

举例说明:

1、先前的github404动画图片层第轴动特效页面(最近改版了,没有动画效果了,以前我写有一篇文章就是关于github星球大战为主题的404错误页面,对鼠标哦🖱活动作出回应的相关代码,3d元素点睛);

github 404:

2、视差引擎 parallax : [例子] (matthew.wagerfield.com/parallax/) 对光标的位置做出相应的反应。

parallax :

3、滚动动画(视差、动画、交互) ScrollMagic

多伦多24小时环保干洗店、修鞋、洗衣叠服服务网站Alfred

苹果vision产品页面

太多这种类似视觉差效果的产品图了,就不一一举例了,有兴趣的伙伴自行搜索🔍...

前面讲到B站的首页的最上面一栏的根据鼠标的响应鼠标位置的视差效果。有的伙伴可能不怎么常去B站看(可能偶尔或者更多的是用手机端看),这边我贴一下效果,如下:

确实是想看一下是怎么做的。然后我就去搜,结果你可以去看看,印象很深的是一个人讲过(这里我就不讲了,可以搜搜看),反正就是提出了问题,问了观众是怎么做的,然后最后的结论是就是根据鼠标移动而移动。

"Talk is cheap, show me the code. —— Linus Torvalds" (直接翻译就是说话容易,给我展示代码),这个人的一句名言,也代表了他对实际代码和行动的重视,而不是停留口头的吹吹说说假大空。真正的生产力和进步是基于编写(或者集成他人的)代码的质量和效率,而不是单单谈论功能、空想事情的所有方式等等)。

有时候设计的时候概念很简单脱口而出,但是实际实现中需要做的工作是要多得多的(相信很多开发者在开发时候对这句话深有体会,说说说、说出花来、吹得天花乱坠,但是做,又是做不出个所以然来。所以说到一定程度,但好像没什么进展的时候,就得“多说无用,给我看你的行动”了,我笃信,无论是工作上还是人际关系上都是如此)。

所以,类似经常说的写作就是思考,那么我相信编程就是思考这句话也是同样富含逻辑和道理的。

接下来我们看一下是如何实现的

准备工作——素材

一共15张素材,15张素材构成一幅图。叫UI设计组小姐姐做。如若PS技术强,可以自己搞(先画出整体图,构想整体需要什么场景的、人和物和景,对了,然后一层一层关闭图层保存矢量图给前端),根据鼠标有规律(这里规律是指有范围、有移动偏移曲线、有透明度变化、有缩放变化等等地动)这个不知道是不是有产品经理给效果图给到UI小姐姐、给到前端去看最终效果,从而做出来的。

编程第一步:建一个html文件

不想着后面有多难,但至少这一步建文件我是会的,我正规点,建个文件夹,文件夹里建一个banner.html文件,再建一个static文件夹用来放素材。第一步就基本也错不到哪里去,大不了错了我再删,删了我再建。

该文用原生先写一遍,下一篇我再用vue或者react搞一遍,不喜欢看或者目前用不上原生的js来搞这个动画效果的可以到这里结束了,可以去B站首页自行体验体验。

建完文件的第一步:! + Tab

vscode !+Tab,完事,又进了一步。

画底色

子内容重复循环的。那么,外框先画好。子内容接下来再想。

编写代码

观察,定义好数据结构

观察别人是怎么做的。其实这一步,应该从一开始就应该一直贯彻到末尾。只不过,做完上一步不知道下一步怎么做了,为了尽量可能接近结果,就先观察,把会做的,先做了。这里值得一提的是:控制台(控制台是一个很好的高分优秀答题者,有时候从控制台找答案会比我自己空想来得要完整和有用)。

<div class="layer"> <img src="素材" style="高度; 宽度; transform: translate(x, y) rotate(角度) scale(缩小或放大); opacity: 透明度;" ></div>
// .// .// .// 以此类推,15个素材元素,正好15个这样差不多的dom结构,(也可推测这是个数组,用来循环,开发如果所有东西都类似的东西手动一个个写人会疯掉且,即使愿意不怕累那也使不得,因为量大效率不高。所以这里用循环来搞)
// 而且如果下次要换不同的元素或者版块,改数据就好,不需要改其他。
// 那么数据结构是什么样子的呢?...

layers 数组数据结构:

const layers = [ { resources: [ { src: './static/4e7edb416c34eccc40f34d2b297524652685a9bb.png', id: 0 } ], scale: { initial: 0.6, }, rotate: {}, translate: {}, blur: {}, opacity: { wrap: "clamp", }, name: '01 bg' }, // 以此类推(有多少素材就有多少个对象,定义好素材地址、scale缩放、rotate旋转、translate偏移量、blur模糊度、opacity透明度、文件名备注): {}]

一切以中心原点为定值:

01 bg

13 远鸟

02 灯塔丛林

03 底部海水

04 鳄鱼a

04 鳄鱼b

05 左边鱼影

06 左边鱼群

07 右边鱼

08 右边鸟

09 中间

11 33

10 水面

12 近鸟

14 两侧


给每个素材定宽高

这一步就是根据上面的数据结果,给每个素材设置一下宽高。其中要看scale的值和相对它们来说最大的外框.animated-banner的高度来响应式地对每个素材的宽高进行处理。

(注:如若看不清,右击在新标签页打开图片查看)

给每个元素加个div

这一步就直接给每个img加个div。class为layer

css 需要加上这个layer的样式:

.layer { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;}

js 需要加上:

const divElementArr = layers.map(() => { const divElement = document.createElement('div') divElement.classList.add('layer') banner.appendChild(divElement) return divElement})

最后得到的是一个数组,每一个(这里有15个)元素class为layer的div。然后append到.animated-banner最大boss上。

append素材到layer的div上

append素材元素,追加上去,代码如下:

layers.map((layer, layerKey) => { const layerElement = layer.resources[0].el divElementArr[layerKey].appendChild(layerElement)})

这个时候就得到效果图如下:

可以看到,所有的元素都以正中心排布(原因就是上面的css中相对定位所有都center水平居中垂直居中)。

那这个时候就说了,下一步是不是根据数据结构,给每个元素距离正中心偏移多少设置了。没错的。

初始样式设置 以及 每个元素距离正中心偏移排布

初始样式设置

// 鼠标指针相对窗口边缘水平坐标 左还是右,左进则是正数比率,右进则是负数比率let relativeX = 0;

每个元素距离正中心偏移排布

一开始加载元素的偏移排布

鼠标监听事件

效果图

总结

此次文章研究B站的动图如何实现(实现transform中的translate如何如何一比一还原,篇幅太大缩放大小、透明度,以及moveleave还没仔细讲解),但基本上同一原理,这里难点重点是贝塞尔曲线,元素按曲线运动以及左右移动换鳄鱼图,以及透明度的问题。

完成上面的点

有空出用vue和react实现。

推荐阅读  点击标题可跳转

1、前端组长应该如何管理前端团队

2、一个前端非侵入式骨架屏自动生成方案

3、让Vite跑在浏览器中,前端又更进了一波

继续滑动看下一个
大前端技术之路
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存