gihub 求star 求fork DEMO 預加載需要改一下，因為我放在服務器上的 所以是http請求 但是 在本地 就成了 file 請求 所以 各位自己改一下
如果
- 你剛剛學完前端的DOM,BOM
- 或者是看完《javascriptDOM編程藝術》這本js里比較優(yōu)秀的入門書籍
- 或者你是應屆畢業(yè)生想找一份前端的工作，并且。。。你又恰好喜歡做動畫。。。O__O "…
（算了---哪有那么多或者。。。。）
此文，不是技術探討類的文章，只是希望拋磚引玉，看著現(xiàn)在找工作的簡歷全是模板，模板。。。。
既然都想做前端，那就自己操刀寫一個唄。
靈感：
小的時候玩過插卡游戲，大部分都是橫屏的，主角單槍匹馬穿過重重阻難，最后抱得美人歸
有的時候想想，人生何嘗不是這樣呢？小學初中大學？或許還有碩士博士。。。這是學習上的。。
事業(yè)上，（只說工程師啊 主要不清楚 文科的）初級，中級，高級，資深，一級一級就像打怪一樣往上面升級。
人艱不拆。。。何不過得詩意一點，讓求職也來個不一樣吧。
制作過程：
構思整個動畫：
我想的整個動畫其實很簡單，跟橫屏游戲如出一轍，人物運動，背景切換，到了某一個位置就會觸發(fā)一系列動畫，并且開始下一個運動模式，
這是是在構思動畫之前，對整個動畫布局的構思
然后就是構思整個動畫的細節(jié)
整個動畫 是對個人的一個簡介（當然這是對我個人而言 你們完全可以 介紹其他的東西）
其實跟演講或者面試的個人簡介是差不多的，要有你好，要有自己的名字，要有自己的愛好以及擅長的地方，但是因為我構思了四個動畫場景，所以在哪個地方描述關于自己哪些地方的內(nèi)容就成了一個問題，不能講完名字就說自己的項目吧？
大地篇
由于是開頭，所以還是決定，簡單介紹一下自己，所以在開頭決定介紹自己的基本情況，愛好
對一個人的簡介，小心翼翼。。。生怕寫錯了啥。。 畢竟是求職簡歷，所以沒吹牛。。。（你看 打星最高的是 健身）這里只做展示，因為這里還只是構思，還沒到設計，顏色搭配那一步呢。
總結(jié)
- 風車彈出 介紹自己 （需要 風車）
- 相框出現(xiàn) 介紹家鄉(xiāng)（需要 熊貓 相框 竹子）
- 建筑堆積起來 出現(xiàn)自己學校的名字
海洋篇
因為是技術求職簡歷嘛，那么肯定就會有類似這樣的技術打分。。。
來源：羅禮權的簡歷
而恰好海里面有魚，可以實現(xiàn)排列的效果，于是有了
然而，我現(xiàn)在都上面的技能展示，一點也不滿意， 說的都是一些不痛不癢的東西，當時出于寫代碼寫累了所以就
隨便想了一些內(nèi)容上去，想想其實這些東西都可以改，倒也沒什么。
總結(jié)
- 魚 各種魚
社區(qū)篇
在這里偏重于介紹自己的項目經(jīng)歷，以及社會經(jīng)歷
總結(jié)
- 這里剛開始沒想到該怎么展現(xiàn)。。。 后來決定用車來展現(xiàn)
天空篇
這里 還是自我批評。。。 很多人都在吐槽，我作品最后不了了之，因為時間的關系
本來是想在這 火箭升空的過程中 賦詩一首的。。。結(jié)果把發(fā)射過程調(diào)完了，就又沒有文思了
O__O "… 但跟多的人吐槽的是，為什么上了太空?。。。。]有聯(lián)系方式蹦出來?。。。。。?！有大瑕疵?。。。?！
當時我真的沒想到需要這個。。。。。。。我就是想讓男主 陸海空。。。。走一遭。。
總結(jié)
- 火箭 升空，飛出大氣，飛向太空
設計篇
就放圖吧。。。 設計看個人，因為學過畫畫也算是有點底子
在最初設計以及布局的時候，我是想用lowPoly效果來做山的
C4d制作3d
PS調(diào)C4D出的圖
不過最后效果還是不近人意，所以放棄了
然后一一切從簡?。。。?！
人物設計：
背景設計：
搭配調(diào)節(jié)
對于一些不容易畫的（比如火焰）使用素材
將火焰素材，自己用ps導成一幀一幀的透明背景火焰（先是ps 導序列圖 然后是選色區(qū) 刪除色區(qū) 再導出圖片）
里面的元素設計（最好玩的就是 畫自己的學校。。。）
畫的像不像！??！
動畫篇
這一步倒是很簡單，但是要你想好了人物動作與環(huán)境的搭配才簡單，因為如果后期布好局之后把動畫放上去有可能有一些地方人物動畫與環(huán)境動畫不太搭配，還要返回這一步。
有了畫好的人物，只需要把它“分尸” 放到DragonBone里面 然后就可以制作你想要的幀動畫了。（自己百度怎么用DragonBone）
導出：
后來改用雪碧圖的形式
用腳本生成了這樣
所以其他的動畫部分大部分我都用了這種形式
給大家推薦 這個腳本，我自己谷歌的。。。神器
zerosprites
前端篇
光有點子是不行的，還得把他實現(xiàn)。。。在前端做動畫，當然沒有在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調(diào)用對象
*
* @param id 獲取對象
* @param classF className前綴
* @param num 圖片的張數(shù)
* @param settime 動畫運行快慢
* @param Callback 當動畫完成后 是否有回調(diào)? 回調(diào)的話就 停止當前動畫 繼續(xù)下一個 如果沒有 就進行循環(huán)動畫
* @param backnumber 動畫第一遍 可能有一個初始化動畫 在后面循環(huán)的時候可能就沒用了
* 比如火箭發(fā)射 初始有一個或圖案由小變大的過程
* @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()
//如果有回調(diào)函數(shù)那在動畫完了之后 關閉動畫 開始回調(diào)函數(shù)
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來產(chǎn)生動畫的，不是更改url（一開始我也是改變url 但是在線的時候頻繁改變url導致 頁面加載圖片加載不過，完全無法產(chǎn)生連貫的動畫所以后來全部轉(zhuǎn)成background的形式）
- meet函數(shù)
由于整個動畫的觸發(fā)是通過判斷人物到了哪個地方 觸發(fā)哪些動畫，所以需要些一個函數(shù)來做判斷
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; //確保參數(shù)總是數(shù)組 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 = '老司機已經(jīng)加載了%'+Math.floor(n*100/arr.length); if(n>=arr.length){ UPpreloaderDiv(); } } }
}
- 在水里游泳的時候，長按，或者不按 是會上下浮動的。。。
## 最后
說的比較簡略，但是重難點已經(jīng)提出來了，只要大家有耐心去做，一定也可以做出來的。