前端动画小记---bilibili ( ゜-゜)つロ客户下载小动画

Posted 2020-10-26 静静是小花

逛哔哩哔哩 ( ゜-゜)つロPC版的时候看到一个蛮有意思的动画，指导用户去下载客户端，于是摸索实现了一个。

 

原动画效果

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

 

实现分析

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

• 机器人进场的动画和出场的动画正好是相反的，只要实现进场动画即可推测出场动画。
• 对话框有一个淡入淡出的效果。
• 鼠标停在小人身上时，小人有个抖腿动作和箭头上下浮动的动作。
• 这些动作变化用到雪碧图实现。雪碧图文件如下：

 

代码分析

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

<div id="elevator-mobile-app" class="app-icon" style="background-position-x: 0px;"></div>
<div id="cloud" class="cloud">下载手机客户端</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属性，也就是移动雪碧图。

.easy-in {
    animation-timing-function: steps(15);
    animation-name: phone-in;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    background-position: left;
}
@keyframes phone-in {
     0% {
         background-position: left;
     }

     100% {
         background-position: right;
     }
 }

　　

小手机人抖腿动作，关键点解读：

• 观察到是手机人的动作，基本是竖着的，猜测是从第九帧到第16帧图，所以步数设为steps(7)。
• 此时雪碧图已经执行完一遍，想象box起始位置为一个向右向下为正的坐标系，此时只有最后一帧图在坐标轴右边，所以雪碧图起始位置距离box起始位置是负的。
• 雪碧图总长度1280px，总共16张，得出每张小图80px。那第九帧图在坐标轴右边的时候，雪碧图起始位置是 -80*8 = -640px。
• 同理得出第16帧图在坐标轴右边时，雪碧图起始位置距离box起始位置是 -80*15 = -1200px。

 .easy-over {
            animation-timing-function: steps(7,start);
            animation-name: phone-over;
            animation-duration: 0.8s;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
            background-position: -640px;
        }

        @keyframes phone-over {
            0% {
                background-position: -640px 50%;
            }

            100% {
                background-position: -1200px ;
            }
        }

　　

javascript 鼠标事件代码如下：

var phoneDom=$(\'#elevator-mobile-app\');
var cloudDom=$(\'#cloud\');

phoneDom.mouseenter(function () {
    //添加雪碧图进场效果
    if(phoneDom.hasClass(\'easy-out\')){
        phoneDom.removeClass(\'easy-out\');
    }
    phoneDom.addClass(\'easy-in\');
    //执行完动画开始循环从第九张雪碧图开始循环执行抖腿动作
    setTimeout(function () {
        phoneDom.removeClass(\'easy-in\');
        phoneDom.addClass(\'easy-over\');
    },1500);
    //添加对话云朵淡进效果
    if(cloudDom.hasClass(\'mFadeOut\')){
        cloudDom.removeClass(\'mFadeOut\');
    }
    cloudDom.addClass(\'mFadeIn\');
    cloudDom.css(\'opacity\',\'1\');
})


phoneDom.mouseleave(function () {
    //添加雪碧图出场效果
    if(phoneDom.hasClass(\'easy-in\')){
        phoneDom.removeClass(\'easy-in\');
    }
    if(phoneDom.hasClass(\'easy-over\')){
        phoneDom.removeClass(\'easy-over\');
    }
    phoneDom.addClass(\'easy-out\');
    //添加云朵淡出效果
    if(cloudDom.hasClass(\'mFadeIn\')){
        cloudDom.removeClass(\'mFadeIn\');
    }
    cloudDom.addClass(\'mFadeOut\');
    cloudDom.css(\'opacity\',\'0\');
})

　　

　　js事件主要用到了两个鼠标事件mouseenter和mouseleave，很简单。鼠标移入时触发mouseenter，此时给图片添加进场效果，给对话框添加淡入效果；鼠标移出时触发mouseleave事件，此时移除入场效果，添加出场效果。

 

效果展示

 

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