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

既然都想做前端，那就自己操刀写一个呗。

---

灵感：

小的时候玩过插卡游戏，大部分都是横屏的，主角单枪匹马穿过重重阻难，最后抱得美人归

有的时候想想，人生何尝不是这样呢？小学初中大学？或许还有硕士博士。。。这是学习上的。。

事业上，（只说工程师啊 主要不清楚 文科的）初级，中级，高级，资深，一级一级就像打怪一样往上面升级。

上上下下左左右右

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

---

制作过程：

=====

构思整个动画：

---

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

构思动画

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

然后就是构思整个动画的细节

整个动画 是对个人的一个简介（当然这是对我个人而言 你们完全可以 介绍其他的东西）

其实跟演讲或者面试的个人简介是差不多的，要有你好，要有自己的名字，要有自己的爱好以及擅长的地方，但是因为我构思了四个动画场景，所以在哪个地方描述关于自己哪些地方的内容就成了一个问题，不能讲完名字就说自己的项目吧？

---

大地篇

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

个人简介

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

总结

• 风车弹出 介绍自己 （需要 风车）

• 相框出现 介绍家乡（需要 熊猫 相框 竹子）

• 建筑堆积起来 出现自己学校的名字

---

海洋篇

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

来源：罗礼权的简历

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

然而，我现在都上面的技能展示，一点也不满意， 说的都是一些不痛不痒的东西，当时出于写代码写累了所以就

随便想了一些内容上去，想想其实这些东西都可以改，倒也没什么。

总结

• 鱼 各种鱼

---

社区篇

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

总结

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

---

天空篇

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

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

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;

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！

-1713204999703)]

[外链图片转存中…(img-QCP4CAvB-1713204999704)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-nx7NoJkl-1713204999704)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！

[外链图片转存中…(img-x5neriOE-1713204999704)]

[外链图片转存中…(img-iD7md5LW-1713204999704)]