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();
        }
    }
}
}

在水裏游泳的時候，長按，或者不按是會上下浮動的。。。

最後

說的比較簡略，但是重難點已經提出來了，只要大家有耐心去做，一定也可以做出來的。

聽說你要找前端工作，寫一個酷炫的動畫的簡歷唄

如果

（算了—哪有那麼多或者。。。。）

靈感：

製作過程：

構思整個動畫：

大地篇

總結

海洋篇

總結

社區篇

總結

天空篇

總結

設計篇

然後一一切從簡！！！！！

動畫篇

前端篇

我只講講重難點吧

js篇

最後

聽說你要找前端工作，寫一個酷炫的動畫的簡歷唄

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結