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

2018/03/06 15:41
阅读数 12

逛哔哩哔哩 ( ゜-゜)つロ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事件主要用到了两个鼠标事件mouseentermouseleave,很简单。鼠标移入时触发mouseenter,此时给图片添加进场效果,给对话框添加淡入效果;鼠标移出时触发mouseleave事件,此时移除入场效果,添加出场效果。

 

效果展示

 

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部