所見即所得，實現乙個有趣的動畫效果

每次重新整理的頭像和『you』的位置都是不同的，說實話，我覺得蠻有意思的，於是我自己嘗試去實現了一下。

下面我會從我的角度去分析實現這樣的效果，因為我不知道fed他們是怎麼實現的

先分析下小方塊的結構，就是：

img是頭像，span控制背景色，i用來製作鏡面的效果。

我們知道了這樣乙個效果，本人近視，十公尺開外男女不分的那種，然後看這個布局看著好熟悉，我看到的這個結構大概是這種感覺

[ ' ', ' ***x xx *** ', ' x x x x ', ' ***x x x x ', ' x x x x ', ' ***x xx *** ', ' ',

]

哎嘿嘿，這個不就是是個字串陣列嗎嘛，那我當作二維陣列處理，豈不是可以輕易的找出要顯示的字元的橫座標和縱座標，豈不美哉。先別急著擼起袖子就是幹，根據我長年不思考擼起袖子就是幹被坑的經驗，我想了一會，似乎用一圍陣列更好一點，dom方面的處理也更加方便一些。每乙個方格就是陣列的乙個個體。

想到這，我掐指一算我大概需要126個方格，方格呈7 * 18的布局方式，我又掐指一算我好像要寫126的span標籤,就像下面這樣：

萬能的編輯器，我後來發現原來可以span*126+tab，機智如我，美滋滋。

啊？你問我上面的span是怎麼弄的，我靠，我當然是手慢慢敲的的啊

呃，感覺還是用js來生成更好些吧，方便，**量也少很多，好，我們擼起袖子就是幹：

const facelist = (new array(126)).map(() => );

我們開啟網頁：

這是個什麼玩意？

好吧，不開玩喜了，我們舉個例子吧，現在我想建立乙個長度為十，陣列成員都是相應下標的陣列，應該怎麼辦？

const arr = (new array(10)).map...

打住，正確的姿勢是這樣的：

array.from(, (v, i) => i);//第一種

當然你還可以使用遞迴的方式，我本人來說，一直使用第一種，感覺比較好用，我們重新實現下：

const facelist = array.from(, () => );

將dom渲染到頁面，緊接著是找出我們要渲染字元的位置了：

let eoitextarr = 
[ ' ',
' ***x xx *** ',
' x x x x ',
' ***x x x x ',
' x x x x ',
' ***x xx *** ',
' ',
];let eoiarr = ;
eoitextarr.foreach((v, i) => 
}})

const textarr = .concat(eoiarr);
const imgarr = .concat(eoiarr);

這樣我們初期的準備工作已經完成，我們拿到了dom，還有需要處理的元素的位置，下面就是處理背景色和如何顯示。我們分別拿到了要改變的span的陣列和img的陣列，我們只需要先改變背景色後控制的顯示就好了。過程肯定是需要通過定時器來控制的，而且顯示的地方位置是隨機的，也就是我們也需要math.random方法，我們通過不斷的splice來獲取陣列的個體，也避免了會拿到重複的個體，**如下：

const colortimer = setinterval(() => 
}, 25);

const showimg = () => 
}, 25);
}

當到最後一張的時候顯示『you』。

完成效果

因為我實在是不想找那麼多，大概只拷貝了十份，然後乘以3，所以會出現乙個頭像重複三次的情況,原始碼。一次小小的嘗試，覺得挺有意思，感謝能看完的你～

所見即所得，實現乙個有趣的動畫效果

所見即所得文章編輯器CKEditor的使用方法

所見即所得富文字編輯器實現原理

所見即所得富文字編輯器實現原理轉

所見即所得，實現乙個有趣的動畫效果

所見即所得文章編輯器CKEditor的使用方法

所見即所得富文字編輯器實現原理

所見即所得富文字編輯器實現原理 轉

相關推薦

所見即所得富文字編輯器實現原理轉