每周一个前端动画之五：哔哩哔哩下载客户端指引动画

源动画效果

一个静止的小电视人，当鼠标移动到电视人身上时，电视人慢慢变身成为一个小手机人，同时淡入一个对话框提示用户去下载客户端；当鼠标停在小手机人身上时，手机人抖腿，并且对话框持续显示；当鼠标从小手机人身上移开，小手机人慢慢恢复为小电视人，同时对话框淡出退场。

实现分析

通过上面的源原动画分析出：

机器人进场的动画和出场的动画正好是相反的，只要实现进场动画即可推测出场动画。

对话框有一个淡入淡出的效果。

鼠标停在小人身上时，小人有个抖腿动作和箭头上下浮动的动作。

这些动作变化用到雪碧图实现。雪碧图文件如下：

代码分析

html代码：很简单的两句。引入一个div空间用于展示图片，引入一个div用于展示下载对话框。

鼠标进场css动画

关键点解读：

animation-timing-function：检索或者设置动画过渡类型，这里用到了steps阶跃函数，也就是说这个动画不需要补间过渡，只要一帧帧显示就行。steps函数两个参数，第一个是指定间隔数n，即分n步阶段性展示；第二个参数设置最后一步的状态，可取值start或者end,默认为end。我们的雪碧图一共16张小图，有15个间隔，所以参数为steps(15)。

函数@keyframes:指定动画名称或动画效果。0%指的是在指定的时间段1.5s中的时间点，即0s的时候；100%同理即1.5s的时候。在此我们改变的是background-position属性，也就是移动雪碧图。

鼠标停在机器人上css动画

关键点解读：

观察到是手机人的动作，基本是竖着的，猜测是从第九帧到第16帧图，所以步数设为steps(7)。

此时雪碧图已经执行完一遍，想象box起始位置为一个向右向下为正的坐标系，此时只有最后一帧图在坐标轴右边，所以雪碧图起始位置距离box起始位置是负的。

雪碧图总长度1280px，总共16张，得出每张小图80px。那第九帧图在坐标轴右边的时候，雪碧图起始位置是 -80*8 = -640px。

同理得出第16帧图在坐标轴右边时，雪碧图起始位置距离box起始位置是 -80*15 = -1200px。

javascript伪代码：

js事件主要用到了两个鼠标事件mouseenter和mouseleave。

鼠标移入时触发mouseenter，此时给图片添加进场效果，给对话框添加淡入效果。

鼠标移出时触发mouseleave事件，此时移除入场效果，添加出场效果。

此处以mouseenter事件为例，mouseleave事件与之相反。

效果展示

最后，奉上完整代码地址：https://gitee.com/susan007/bilibili-dem