這個(gè)人就是我！

gihub 求star 求fork DEMO 預(yù)加載需要改一下，因?yàn)槲曳旁诜?wù)器上的所以是http請(qǐng)求但是在本地就成了 file 請(qǐng)求所以各位自己改一下

如果

你剛剛學(xué)完前端的DOM,BOM
或者是看完《javascriptDOM編程藝術(shù)》這本js里比較優(yōu)秀的入門書籍
或者你是應(yīng)屆畢業(yè)生想找一份前端的工作，并且。。。你又恰好喜歡做動(dòng)畫。。。O__O "…
（算了---哪有那么多或者。。。。）

此文，不是技術(shù)探討類的文章，只是希望拋磚引玉，看著現(xiàn)在找工作的簡(jiǎn)歷全是模板，模板。。。。
既然都想做前端，那就自己操刀寫一個(gè)唄。

靈感：

小的時(shí)候玩過(guò)插卡游戲，大部分都是橫屏的，主角單槍匹馬穿過(guò)重重阻難，最后抱得美人歸
有的時(shí)候想想，人生何嘗不是這樣呢？小學(xué)初中大學(xué)？或許還有碩士博士。。。這是學(xué)習(xí)上的。。
事業(yè)上，（只說(shuō)工程師啊主要不清楚文科的）初級(jí)，中級(jí)，高級(jí)，資深，一級(jí)一級(jí)就像打怪一樣往上面升級(jí)。

上上下下左左右右

人艱不拆。。。何不過(guò)得詩(shī)意一點(diǎn)，讓求職也來(lái)個(gè)不一樣吧。

制作過(guò)程：

構(gòu)思整個(gè)動(dòng)畫：

我想的整個(gè)動(dòng)畫其實(shí)很簡(jiǎn)單，跟橫屏游戲如出一轍，人物運(yùn)動(dòng)，背景切換，到了某一個(gè)位置就會(huì)觸發(fā)一系列動(dòng)畫，并且開始下一個(gè)運(yùn)動(dòng)模式，

構(gòu)思動(dòng)畫

這是是在構(gòu)思動(dòng)畫之前，對(duì)整個(gè)動(dòng)畫布局的構(gòu)思

然后就是構(gòu)思整個(gè)動(dòng)畫的細(xì)節(jié)
整個(gè)動(dòng)畫是對(duì)個(gè)人的一個(gè)簡(jiǎn)介（當(dāng)然這是對(duì)我個(gè)人而言你們完全可以介紹其他的東西）
其實(shí)跟演講或者面試的個(gè)人簡(jiǎn)介是差不多的，要有你好，要有自己的名字，要有自己的愛(ài)好以及擅長(zhǎng)的地方，但是因?yàn)槲覙?gòu)思了四個(gè)動(dòng)畫場(chǎng)景，所以在哪個(gè)地方描述關(guān)于自己哪些地方的內(nèi)容就成了一個(gè)問(wèn)題，不能講完名字就說(shuō)自己的項(xiàng)目吧？

大地篇

由于是開頭，所以還是決定，簡(jiǎn)單介紹一下自己，所以在開頭決定介紹自己的基本情況，愛(ài)好

個(gè)人簡(jiǎn)介

對(duì)一個(gè)人的簡(jiǎn)介，小心翼翼。。。生怕寫錯(cuò)了啥。。畢竟是求職簡(jiǎn)歷，所以沒(méi)吹牛。。。（你看打星最高的是健身）這里只做展示，因?yàn)檫@里還只是構(gòu)思，還沒(méi)到設(shè)計(jì)，顏色搭配那一步呢。

總結(jié)

風(fēng)車彈出介紹自己（需要風(fēng)車）
相框出現(xiàn) 介紹家鄉(xiāng)（需要熊貓相框竹子）
建筑堆積起來(lái) 出現(xiàn)自己學(xué)校的名字

海洋篇

因?yàn)槭羌夹g(shù)求職簡(jiǎn)歷嘛，那么肯定就會(huì)有類似這樣的技術(shù)打分。。。

來(lái)源：羅禮權(quán)的簡(jiǎn)歷

而恰好海里面有魚，可以實(shí)現(xiàn)排列的效果，于是有了

然而，我現(xiàn)在都上面的技能展示，一點(diǎn)也不滿意，說(shuō)的都是一些不痛不癢的東西，當(dāng)時(shí)出于寫代碼寫累了所以就
隨便想了一些內(nèi)容上去，想想其實(shí)這些東西都可以改，倒也沒(méi)什么。

總結(jié)

魚各種魚

社區(qū)篇

在這里偏重于介紹自己的項(xiàng)目經(jīng)歷，以及社會(huì)經(jīng)歷

總結(jié)

這里剛開始沒(méi)想到該怎么展現(xiàn)。。。后來(lái)決定用車來(lái)展現(xiàn)

天空篇

這里還是自我批評(píng)。。。很多人都在吐槽，我作品最后不了了之，因?yàn)闀r(shí)間的關(guān)系

本來(lái)是想在這火箭升空的過(guò)程中賦詩(shī)一首的。。。結(jié)果把發(fā)射過(guò)程調(diào)完了，就又沒(méi)有文思了

O__O "… 但跟多的人吐槽的是，為什么上了太空?。。。。](méi)有聯(lián)系方式蹦出來(lái)?。。。。。?！有大瑕疵?。。。?！

silimasei

當(dāng)時(shí)我真的沒(méi)想到需要這個(gè)。。。。。。。我就是想讓男主陸?？?。。。。走一遭。。

總結(jié)

火箭升空，飛出大氣，飛向太空

設(shè)計(jì)篇

就放圖吧。。。設(shè)計(jì)看個(gè)人，因?yàn)閷W(xué)過(guò)畫畫也算是有點(diǎn)底子

在最初設(shè)計(jì)以及布局的時(shí)候，我是想用lowPoly效果來(lái)做山的

C4d制作3d

PS調(diào)C4D出的圖

不過(guò)最后效果還是不近人意，所以放棄了

然后一一切從簡(jiǎn)?。。。。?/h4>
人物設(shè)計(jì)：

背景設(shè)計(jì)：

搭配調(diào)節(jié)

對(duì)于一些不容易畫的（比如火焰）使用素材

將火焰素材，自己用ps導(dǎo)成一幀一幀的透明背景火焰（先是ps 導(dǎo)序列圖然后是選色區(qū) 刪除色區(qū) 再導(dǎo)出圖片）

里面的元素設(shè)計(jì)（最好玩的就是畫自己的學(xué)校。。。）

畫的像不像！?。?/p>

動(dòng)畫篇

這一步倒是很簡(jiǎn)單，但是要你想好了人物動(dòng)作與環(huán)境的搭配才簡(jiǎn)單，因?yàn)槿绻笃诓己镁种蟀褎?dòng)畫放上去有可能有一些地方人物動(dòng)畫與環(huán)境動(dòng)畫不太搭配，還要返回這一步。

有了畫好的人物，只需要把它“分尸” 放到DragonBone里面然后就可以制作你想要的幀動(dòng)畫了。（自己百度怎么用DragonBone）

導(dǎo)出：

后來(lái)改用雪碧圖的形式
用腳本生成了這樣

所以其他的動(dòng)畫部分大部分我都用了這種形式

給大家推薦這個(gè)腳本，我自己谷歌的。。。神器
zerosprites

前端篇

光有點(diǎn)子是不行的，還得把他實(shí)現(xiàn)。。。在前端做動(dòng)畫，當(dāng)然沒(méi)有在AE上那么爽，全都是自己一個(gè)一個(gè)代碼的去碼，我覺(jué)得只要大家有耐心，肯定能完成這個(gè)作品。

我只講講重難點(diǎn)吧

1.該怎么布局？
我選擇的的是

結(jié)構(gòu)

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

預(yù)加載界面
云層（layer-shu-1）
橫向的層有很多個(gè) 分別代表了不同的深度（遠(yuǎn)近程度吧），這是為了做視差效果才這樣弄的
- hen-1 也是云層（與上面那個(gè)云層效果不一樣不過(guò)最后都沒(méi)有采用）
- hen-2 遠(yuǎn)處的森林
- hen-3 這是最重要的一層，所有的運(yùn)動(dòng)元素都在這一層（除了開頭標(biāo)題還有男主外）
- hen-4 遠(yuǎn)山層
- hen-5 你看見(jiàn)了飛機(jī)還有熱氣球了嗎？
hen-6,shu-3是我剛開始預(yù)留出來(lái)可能后面要加一些動(dòng)畫用的，所以一直沒(méi)刪
Head層開頭的標(biāo)題（為什么單獨(dú)放一層，這是因?yàn)?我想剛開始的時(shí)候，也是就是人物還沒(méi)有開始運(yùn)動(dòng)的時(shí)候，這個(gè)標(biāo)題是一直居中的）
keybord層提示使用空格鍵
fallAnimation 剛開始的下落動(dòng)畫（注意與后面的運(yùn)動(dòng)動(dòng)畫不是同一個(gè)。。雖然看上去像是）
Karl ！?。。。。。?男主在此?。。?！
stationery 大家是否還記得那個(gè)文具鋪滿的場(chǎng)景對(duì)其實(shí)一開始就等在那里的
displayword 這里是展示自己想要說(shuō)的話
audio 這個(gè)就是后面的后搖音樂(lè)的

里面還有很多子層但都寫了詳細(xì)的注釋

js篇

值得注意的地方：

幀動(dòng)畫控制器

 
 /**
 * 自制了一個(gè)幀動(dòng)畫js調(diào)用對(duì)象
 *
 * @param id     獲取對(duì)象
 * @param classF   className前綴 
 * @param num    圖片的張數(shù)
 * @param settime   動(dòng)畫運(yùn)行快慢
 * @param Callback  當(dāng)動(dòng)畫完成后 是否有回調(diào)? 回調(diào)的話就 停止當(dāng)前動(dòng)畫  繼續(xù)下一個(gè)  如果沒(méi)有 就進(jìn)行循環(huán)動(dòng)畫
 * @param backnumber    動(dòng)畫第一遍 可能有一個(gè)初始化動(dòng)畫  在后面循環(huán)的時(shí)候可能就沒(méi)用了
 *          比如火箭發(fā)射 初始有一個(gè)或圖案由小變大的過(guò)程
 * @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ù)那在動(dòng)畫完了之后 關(guān)閉動(dòng)畫  開始回調(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();
});

這個(gè)幀動(dòng)畫控制器是基于class也就是改變backgroundPosition來(lái)產(chǎn)生動(dòng)畫的，不是更改url（一開始我也是改變url 但是在線的時(shí)候頻繁改變url導(dǎo)致頁(yè)面加載圖片加載不過(guò)，完全無(wú)法產(chǎn)生連貫的動(dòng)畫所以后來(lái)全部轉(zhuǎn)成background的形式）

meet函數(shù)

由于整個(gè)動(dòng)畫的觸發(fā)是通過(guò)判斷人物到了哪個(gè)地方觸發(fā)哪些動(dòng)畫，所以需要些一個(gè)函數(shù)來(lái)做判斷

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;//如果從右到左 的時(shí)候
             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;//如果從左到右 的時(shí)候
         } else {
             obj.Onoff = true;
         }
     }, 20);
 }
}

預(yù)加載

原因很明顯，這么多圖片。。如果不預(yù)加載簡(jiǎn)直沒(méi)法看。。。

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ī)已經(jīng)加載了%'+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)

 
 
- 在水里游泳的時(shí)候，長(zhǎng)按，或者不按 是會(huì)上下浮動(dòng)的。。。
   




## 最后
說(shuō)的比較簡(jiǎn)略，但是重難點(diǎn)已經(jīng)提出來(lái)了，只要大家有耐心去做，一定也可以做出來(lái)的。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

聽(tīng)說(shuō)你要找前端工作，寫一個(gè)酷炫的動(dòng)畫的簡(jiǎn)歷唄

聽(tīng)說(shuō)你要找前端工作，寫一個(gè)酷炫的動(dòng)畫的簡(jiǎn)歷唄

演示

源碼

如果

靈感：

制作過(guò)程：

構(gòu)思整個(gè)動(dòng)畫：

大地篇

總結(jié)

海洋篇

總結(jié)

社區(qū)篇

總結(jié)

天空篇

總結(jié)

設(shè)計(jì)篇

動(dòng)畫篇

前端篇

我只講講重難點(diǎn)吧

js篇

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

聽(tīng)說(shuō)你要找前端工作，寫一個(gè)酷炫的動(dòng)畫的簡(jiǎn)歷唄

演示

源碼

如果

靈感：

制作過(guò)程：

構(gòu)思整個(gè)動(dòng)畫：

大地篇

總結(jié)

海洋篇

總結(jié)

社區(qū)篇

總結(jié)

天空篇

總結(jié)

設(shè)計(jì)篇

動(dòng)畫篇

前端篇

我只講講重難點(diǎn)吧

js篇

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av