前端开发,实现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实现。