听说你要找前端工作，写一个酷炫的动画的简历呀

程序员文章站 2022-04-19 15:34:20

...

听说你要找前端工作，写一个酷炫的动画的简历呀

gihub 求star 求fork DEMO 预加载需要改一下，因为我放在服务器上的所以是http请求但是在本地就成了 file 请求所以各位自己改一下

如果

你刚刚学完前端的DOM,BOM
或者是看完《javascriptDOM编程艺术》这本js里比较优秀的入门书籍
或者你是应届毕业生想找一份前端的工作，并且。。。你又恰好喜欢做动画。。。O__O "…
（算了---哪有那么多或者。。。。）

此文，不是技术探讨类的文章，只是希望抛砖引玉，看着现在找工作的简历全是模板，模板。。。。
既然都想做前端，那就自己操刀写一个呗。

灵感：

小的时候玩过插卡游戏，大部分都是横屏的，主角单枪匹马穿过重重阻难，最后抱得美人归
有的时候想想，人生何尝不是这样呢？小学初中大学？或许还有硕士博士。。。这是学习上的。。
事业上，（只说工程师啊主要不清楚文科的）初级，中级，高级，资深，一级一级就像打怪一样往上面升级。

听说你要找前端工作，写一个酷炫的动画的简历呀

上上下下左左右右

人艰不拆。。。何不过得诗意一点，让求职也来个不一样吧。

制作过程：

构思整个动画：

我想的整个动画其实很简单，跟横屏游戏如出一辙，人物运动，背景切换，到了某一个位置就会触发一系列动画，并且开始下一个运动模式，

听说你要找前端工作，写一个酷炫的动画的简历呀

构思动画

这是是在构思动画之前，对整个动画布局的构思

然后就是构思整个动画的细节
整个动画是对个人的一个简介（当然这是对我个人而言你们完全可以介绍其他的东西）
其实跟演讲或者面试的个人简介是差不多的，要有你好，要有自己的名字，要有自己的爱好以及擅长的地方，但是因为我构思了四个动画场景，所以在哪个地方描述关于自己哪些地方的内容就成了一个问题，不能讲完名字就说自己的项目吧？

大地篇

由于是开头，所以还是决定，简单介绍一下自己，所以在开头决定介绍自己的基本情况，爱好

听说你要找前端工作，写一个酷炫的动画的简历呀

个人简介

对一个人的简介，小心翼翼。。。生怕写错了啥。。毕竟是求职简历，所以没吹牛。。。（你看打星最高的是健身）这里只做展示，因为这里还只是构思，还没到设计，颜色搭配那一步呢。

总结

风车弹出介绍自己（需要风车）
相框出现介绍家乡（需要熊猫相框竹子）
建筑堆积起来出现自己学校的名字

海洋篇

因为是技术求职简历嘛，那么肯定就会有类似这样的技术打分。。。

听说你要找前端工作，写一个酷炫的动画的简历呀

来源：罗礼权的简历

而恰好海里面有鱼，可以实现排列的效果，于是有了

听说你要找前端工作，写一个酷炫的动画的简历呀

然而，我现在都上面的技能展示，一点也不满意，说的都是一些不痛不痒的东西，当时出于写代码写累了所以就
随便想了一些内容上去，想想其实这些东西都可以改，倒也没什么。

总结

鱼各种鱼

社区篇

在这里偏重于介绍自己的项目经历，以及社会经历

听说你要找前端工作，写一个酷炫的动画的简历呀

总结

这里刚开始没想到该怎么展现。。。后来决定用车来展现

天空篇

这里还是自我批评。。。很多人都在吐槽，我作品最后不了了之，因为时间的关系

听说你要找前端工作，写一个酷炫的动画的简历呀

本来是想在这火箭升空的过程中赋诗一首的。。。结果把发射过程调完了，就又没有文思了

O__O "… 但跟多的人吐槽的是，为什么上了太空！！！！！没有联系方式蹦出来！！！！！！！有大瑕疵！！！！！

听说你要找前端工作，写一个酷炫的动画的简历呀

silimasei

当时我真的没想到需要这个。。。。。。。我就是想让男主陆海空。。。。走一遭。。

总结

火箭升空，飞出大气，飞向太空

设计篇

就放图吧。。。设计看个人，因为学过画画也算是有点底子

在最初设计以及布局的时候，我是想用lowPoly效果来做山的

听说你要找前端工作，写一个酷炫的动画的简历呀

C4d制作3d

听说你要找前端工作，写一个酷炫的动画的简历呀

PS调C4D出的图

听说你要找前端工作，写一个酷炫的动画的简历呀

不过最后效果还是不近人意，所以放弃了

听说你要找前端工作，写一个酷炫的动画的简历呀

然后一一切从简！！！！！

人物设计：

听说你要找前端工作，写一个酷炫的动画的简历呀

背景设计：

听说你要找前端工作，写一个酷炫的动画的简历呀

搭配调节

听说你要找前端工作，写一个酷炫的动画的简历呀

对于一些不容易画的（比如火焰）使用素材

听说你要找前端工作，写一个酷炫的动画的简历呀

将火焰素材，自己用ps导成一帧一帧的透明背景火焰（先是ps 导序列图然后是选色区删除色区再导出图片）

里面的元素设计（最好玩的就是画自己的学校。。。）

听说你要找前端工作，写一个酷炫的动画的简历呀

画的像不像！！！

动画篇

这一步倒是很简单，但是要你想好了人物动作与环境的搭配才简单，因为如果后期布好局之后把动画放上去有可能有一些地方人物动画与环境动画不太搭配，还要返回这一步。

有了画好的人物，只需要把它“分尸” 放到DragonBone里面然后就可以制作你想要的帧动画了。（自己百度怎么用DragonBone）

听说你要找前端工作，写一个酷炫的动画的简历呀

导出：

听说你要找前端工作，写一个酷炫的动画的简历呀

后来改用雪碧图的形式
用脚本生成了这样

听说你要找前端工作，写一个酷炫的动画的简历呀

所以其他的动画部分大部分我都用了这种形式

给大家推荐这个脚本，我自己谷歌的。。。神器
zerosprites

前端篇

光有点子是不行的，还得把他实现。。。在前端做动画，当然没有在AE上那么爽，全都是自己一个一个代码的去码，我觉得只要大家有耐心，肯定能完成这个作品。

我只讲讲重难点吧

1.该怎么布局？
我选择的的是

听说你要找前端工作，写一个酷炫的动画的简历呀

结构

可以看到主要的布局在adventure里面
依次是

预加载界面
云层（layer-shu-1）
横向的层有很多个分别代表了不同的深度（远近程度吧），这是为了做视差效果才这样弄的
- hen-1 也是云层（与上面那个云层效果不一样不过最后都没有采用）
- hen-2 远处的森林
- hen-3 这是最重要的一层，所有的运动元素都在这一层（除了开头标题还有男主外）
- hen-4 远山层
- hen-5 你看见了飞机还有热气球了吗？
hen-6,shu-3是我刚开始预留出来可能后面要加一些动画用的，所以一直没删
Head层开头的标题（为什么单独放一层，这是因为我想刚开始的时候，也是就是人物还没有开始运动的时候，这个标题是一直居中的）
keybord层提示使用空格键
fallAnimation 刚开始的下落动画（注意与后面的运动动画不是同一个。。虽然看上去像是）
Karl ！！！！！！！男主在此！！！！
stationery 大家是否还记得那个文具铺满的场景对其实一开始就等在那里的
displayword 这里是展示自己想要说的话
audio 这个就是后面的后摇音乐的

里面还有很多子层但都写了详细的注释

js篇

值得注意的地方：

帧动画控制器

 
 /**
 * 自制了一个帧动画js调用对象
 *
 * @param id     获取对象
 * @param classF   className前缀 
 * @param num    图片的张数
 * @param settime   动画运行快慢
 * @param Callback  当动画完成后 是否有回调? 回调的话就 停止当前动画  继续下一个  如果没有 就进行循环动画
 * @param backnumber    动画第一遍 可能有一个初始化动画  在后面循环的时候可能就没用了
 *          比如火箭发射 初始有一个或图案由小变大的过程
 * @constructor
 */
function C_actor(id,classF,num,settime,Callback,backnumber,startnumber) {
    this.Object=document.getElementById(id);
    this.Onoff = false;
    this.classF = classF;
    this.num = num;
    this.setTime = settime;
    this.callback = Callback;
    this.backnumber = backnumber;
    this.start = startnumber;
    //this.prototype.startAnimation(urlF,urlE,num,settime)
}


C_actor.prototype.itsleft = function () {
    return $(this.Object).offset().left;
};

C_actor.prototype.startAnimation =function () {
    var i= this.start;
    var  that =this;
    that.timer=setInterval(function(){
        i++;
        that.Object.className = that.classF +i;
        // console.log()
        //如果有回调函数那在动画完了之后 关闭动画  开始回调函数
        if(i>=that.num){

            if(that.callback) {
                clearInterval(that.timer);
                that.callback();
            }else {
                // if(that.backnumber){
                //     i=that.backnumber;
                // }else{
                //     clearInterval(that.timer);
                // }
                i = that.start;
            }
        }

    },that.setTime)
};

var O_meetCar1 = new F_crashActor('Car1',function(){
        Baiduyun_Ani();
    F_displayWords(words[5]);
    O_meetBigCar.meet();
});

这个帧动画控制器是基于class也就是改变backgroundPosition来产生动画的，不是更改url（一开始我也是改变url 但是在线的时候频繁改变url导致页面加载图片加载不过，完全无法产生连贯的动画所以后来全部转成background的形式）

meet函数

由于整个动画的触发是通过判断人物到了哪个地方触发哪些动画，所以需要些一个函数来做判断

function F_meettheWall(obj,LR,long){
 if(LR) {

     var n = parseFloat($(O_karl).offset().left) + long;
     obj.timer = setInterval(function () {
         if (n <= parseFloat($(obj).offset().left) + parseFloat(obj.offsetWidth)) {
             obj.Onoff = false;//如果从右到左 的时候
             clearInterval(obj.timer);
         } else {
             obj.Onoff = true;
         }
     }, 20);
 }else{
     var n = parseFloat($(O_karl).offset().left) +parseFloat(O_karl.offsetWidth) ;
     // console.log(n+'-----------'+parseFloat($(obj).offset().left));
     // console.log('钢板or火箭'+parseFloat($(obj).offset().left));
     obj.timer = setInterval(function () {
         if (n >= parseFloat($(obj).offset().left)+long ) {
             clearInterval(obj.timer);
             obj.Onoff = false;//如果从左到右 的时候
         } else {
             obj.Onoff = true;
         }
     }, 20);
 }
}

预加载

原因很明显，这么多图片。。如果不预加载简直没法看。。。

function preloadimages(arr){
  var n=0;
  var arr=(typeof arr!="object")? [arr] : arr;  //确保参数总是数组
  for (var i=0; i<arr.length; i++){
      newimages[i]=new Image();
      newimages[i].index = i;
      newimages[i].src=arr[i];
      newimages[i].onload = function () {
         n++;
          console.log(n);
          progressIb.style.width = n*(500/arr.length)+'px';
          O_Laocar.style.right = 500-n*(500/arr.length)+'px';
          O_Laotext.innerHTML = '老司机已经加载了%'+Math.floor(n*100/arr.length);

          if(n>=arr.length){
              UPpreloaderDiv();
          }
      }
  }

}


![](http://upload-images.jianshu.io/upload_images/1698086-ba0220e8e407924a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

 
 
- 在水里游泳的时候，长按，或者不按 是会上下浮动的。。。
   




## 最后
说的比较简略，但是重难点已经提出来了，只要大家有耐心去做，一定也可以做出来的。

上一篇： CSS3中的clip-path使用攻略

下一篇：微软开源最强Python自动化神器Playwright(不用写一行代码)

听说你要找前端工作，写一个酷炫的动画的简历呀

听说你要找前端工作，写一个酷炫的动画的简历呀

演示

源码

如果

灵感：

制作过程：

构思整个动画：

大地篇

海洋篇

社区篇

天空篇

设计篇

动画篇

前端篇

听说你要找前端工作，写一个酷炫的动画的简历呀