听说你要找前端工作,写一个酷炫的动画的简历呗
- ###DEMO
- ###源码
gihub 求star 求fork DEMO 预加载需要改一下,因为我放在服务器上的 所以是http请求 但是 在本地 就成了 file 请求 所以 各位自己改一下
如果
- 你刚刚学完前端的DOM,BOM
- 或者是看完《javascriptDOM编程艺术》这本js里比较优秀的入门书籍
- 或者你是应届毕业生想找一份前端的工作,并且。。。你又恰好喜欢做动画。。。O__O “…
(算了—哪有那么多或者。。。。)
此文,不是技术探讨类的文章,只是希望抛砖引玉,看着现在找工作的简历全是模板,模板。。。。
既然都想做前端,那就自己操刀写一个呗。
灵感:
小的时候玩过插卡游戏,大部分都是横屏的,主角单枪匹马穿过重重阻难,最后抱得美人归
有的时候想想,人生何尝不是这样呢?小学初中大学?或许还有硕士博士。。。这是学习上的。。
事业上,(只说工程师啊 主要不清楚 文科的)初级,中级,高级,资深,一级一级就像打怪一样往上面升级。
人艰不拆。。。何不过得诗意一点,让求职也来个不一样吧。
制作过程:
构思整个动画:
我想的整个动画其实很简单,跟横屏游戏如出一辙,人物运动,背景切换,到了某一个位置就会触发一系列动画,并且开始下一个运动模式,
这是是在构思动画之前,对整个动画布局的构思
然后就是构思整个动画的细节
整个动画 是对个人的一个简介(当然这是对我个人而言 你们完全可以 介绍其他的东西)
其实跟演讲或者面试的个人简介是差不多的,要有你好,要有自己的名字,要有自己的爱好以及擅长的地方,但是因为我构思了四个动画场景,所以在哪个地方描述关于自己哪些地方的内容就成了一个问题,不能讲完名字就说自己的项目吧?
大地篇
由于是开头,所以还是决定,简单介绍一下自己,所以在开头决定介绍自己的基本情况,爱好
对一个人的简介,小心翼翼。。。生怕写错了啥。。 毕竟是求职简历,所以没吹牛。。。(你看 打星最高的是 健身)这里只做展示,因为这里还只是构思,还没到设计,颜色搭配那一步呢。
总结
- 风车弹出 介绍自己 (需要 风车)
- 相框出现 介绍家乡(需要 熊猫 相框 竹子)
- 建筑堆积起来 出现自己学校的名字
海洋篇
因为是技术求职简历嘛,那么肯定就会有类似这样的技术打分。。。
来源:罗礼权的简历
而恰好海里面有鱼,可以实现排列的效果,于是有了
然而,我现在都上面的技能展示,一点也不满意, 说的都是一些不痛不痒的东西,当时出于写代码写累了所以就
随便想了一些内容上去,想想其实这些东西都可以改,倒也没什么。
总结
- 鱼 各种鱼
社区篇
在这里偏重于介绍自己的项目经历,以及社会经历
总结
- 这里刚开始没想到该怎么展现。。。 后来决定用车来展现
天空篇
这里 还是自我批评。。。 很多人都在吐槽,我作品最后不了了之,因为时间的关系
本来是想在这 火箭升空的过程中 赋诗一首的。。。结果把发射过程调完了,就又没有文思了
O__O “… 但跟多的人吐槽的是,为什么上了太空!!!!!没有联系方式蹦出来!!!!!!!有大瑕疵!!!!!
当时我真的没想到需要这个。。。。。。。我就是想让男主 陆海空。。。。走一遭。。
总结
- 火箭 升空,飞出大气,飞向太空
设计篇
就放图吧。。。 设计看个人,因为学过画画也算是有点底子
在最初设计以及布局的时候,我是想用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();}} } }
- 在水里游泳的时候,长按,或者不按 是会上下浮动的。。。
最后
说的比较简略,但是重难点已经提出来了,只要大家有耐心去做,一定也可以做出来的。
听说你要找前端工作,写一个酷炫的动画的简历呗相关推荐
- 用HTML、CSS写一个酷炫的动态搜索框
用HTML.CSS写一个酷炫的动态搜索框 可伸展的动态搜索框! 复制粘贴即可用! HTML部分: <!DOCTYPE html> <html lang="en"& ...
- 一个精美的跳动小球—手把手教你用贝塞尔曲线实现一个酷炫跳动动画。
一个精美的跳动小球-手把手教你用贝塞尔曲线实现一个酷炫跳动动画. 2017-08-07 BraveJoy 终端研发部 前言介绍 手把手教你用贝塞尔曲线实现一个精美的跳动的小球. 正文 效果展示: 说点 ...
- Flutter实现一个酷炫带动画的列表型多选日历组件
由于项目需要,用Flutter重构了之前用Android做过的日历组件,整体效果感觉不错,流畅度甚至超过原来的,这里需要提一下官网的做法,如下: var date = DateTime.now();r ...
- 分享给你一个酷炫的前端组件库,还不用起来?
fancy-components 一个酷炫的前端组件库 大伙前端都是用什么组件库的呢? 我最近刚发现前端一个很好看.很炫酷的组件库.那就是fancy-components ,简直是"酷炫&q ...
- 从零开始写一个武侠冒险游戏-2-帧动画
从零开始写一个武侠冒险游戏-2-帧动画 ---- 用基本绘图函数实现帧动画 作者:FreeBlues 修订记录 2016.06.10 初稿完成. 2016.08.03 增加对 XCode 项目文件的说 ...
- [css] 使用css写一个红绿灯交替的动画效果
[css] 使用css写一个红绿灯交替的动画效果 <!DOCTYPE html> <html lang="en"><head> <meta ...
- 【Android进阶】如何写一个很屌的动画(3)---高仿腾讯手机管家火箭动画
系列中其他文章: [Android进阶]如何写一个很屌的动画(1)-先实现一个简易的自定义动画框架 [Android进阶]如何写一个很屌的动画(2)-动画的好帮手们 [Android进阶]如何写一个很 ...
- 【Android】 给我一个Path,还你一个酷炫动画
本篇文章已授权微信公众号 hongyangAndroid (鸿洋)独家发布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/53040506 ...
- 给我一个Path,还你一个酷炫动画
一 概述 原本只是想模仿一下我魂牵梦萦的StoreHouse效果,没想到意外撸出来一个工具库. 最简单用法,给我一个path(可以有多段),我还你一个动画. I have a path.I have ...
最新文章
- 2021-2027年中国智能制造行业市场前景预测研究报告
- Opencv卷积滤波cvFilter2D-高通与低通
- Delphi使用资源文件全攻略
- mysql linux版本 rpm_Linux下查看MySQL版本及rpm里有没有MySQL
- 小学计算机三年级课程目录,小学生信息技术课本目录.doc
- SQL Server - 聚集索引 第六篇
- Java if/else switchswitch
- 使用Ruby来实现批量更新AD中字段
- 谷歌浏览器设置信任_Win10系统下谷歌浏览器怎么添加信任网址/站点
- 东莞潇洒培训学校分享知识点:UG编程加工参数设置,新手看过来
- VUE中switch使用
- 【天光学术】体育论文:乒乓球少年运动员专项身体素质训练探究(节选)
- python立即关机,Python实现自动关机
- springmvc+vue ssm 医院预约挂号系统#毕业设计
- bzoj2563阿狸和桃子的游戏
- 天使投资AI、风险投资VC、私募股权投资PE、投行IB、FOF、普通合伙人GP、有限合伙人LP、PIPE
- 华为python自动化测试框架_华为五年自动化测试工程详细解说:unittest单元测试框架...
- 青春不负韶光,梦想再次起航——记JavaEE班毕业典礼
- Directx11教程(49) stencil的应用-镜面反射
- 跨境电商培训机构靠谱吗?跨境电商在我国遍地开花
热门文章
- Hyper-V创建net模式的固定ip(可访问外网)
- 【一文带你解决跨域问题】
- php网页图片中间代码,图片 css div居中代码怎么写
- 编写五子棋的完整python代码_python开发 实现单机五子棋!
- python绘制pr曲线图_利用Python中的numpy包实现PR曲线和ROC曲线的计算!
- html5 网页水印底纹,实现HTML5网页水印SDK的方法
- 王者荣耀专区系统服务器繁忙,王者荣耀转区系统规则介绍 王者荣耀转服问题详解...
- 内存释放free函数如何知道内存大小
- 算法实战应用案例精讲-【自动化办公】使用Python解析web页面(python代码实战)
- 数据挖掘最前线:五种常用异常值检测方法