設計動機

很多人相信眼見為憑，只相信看得到和摸得到的東西是存在的。但是這個世界上很多事物雖然看不到，但是卻確實存在。例如愛，愛不是以物質的形式來存在，看不到，摸不到，聽不到，也聞不到，但是透過人跟人之間的互動，我們知道愛存在，甚至愛也有超越人與人之間的層面。

這次的主題記憶也是如此，記憶看不到也摸不到，但是他卻確實存在。人很容易會對這類看不到的東西產生好奇，產生懷疑，覺得好像瞭解，但換個角度，又好像摸不透，有種超自然的神秘感。

置換背景

所以在這次的設計當中，我希望我們的記憶方塊也能散發出這種迷幻的神秘感。
首先我要先讓我的背景變成黑色，但是我不想要死板板的黑，這樣很不神秘，我希望是那種要黑不黑，好像從黑暗裡面可以看見一盞明燈的那種黑
src/App.css

.App {
  background: #232526;  /* 背景顏色 */
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;  /* 左右置中 */
  align-items: center;      /* 上下置中 */
  box-sizing: border-box;
}

背景換了黑色之後，跟昨天 Day24 的成果比起來，整體的氛圍就不一樣了。

方塊光暈

接著，我希望方塊可以有在黑暗中發出微微光暈的感覺，所以我想要透過 box-shadow 為他加上一些光暈
src/containers/MemoryBlocks/components/Block/Styled.js

// box-shadow 語法
// box-shadow: x y blur spread color inset;

box-shadow: 0px 0px ${SHADOW_WIDTH}px 5px ${BLOCK_COLORS[id] + '80'};

CSS box-shadow Property
CSS box-shadow 產生陰影效果或光暈效果的特性

會呼吸的方塊

雖然加上光暈之後，開始有一些神秘的氣息出現了，但是靜態的東西總是少了一些生命力，好像死死的躺在那裡。所以，為了讓他活過來，活人跟死人從視覺上來辨識的話，最簡單的方式就是看他有沒有在呼吸。

記得大學住在宿舍裡面的時候，室友們熬夜都會熬得很晚，特別是要趕 deadline 和期中期末考之前，凌晨三到五點的時候，真的感覺得到自己的肝好像要燒掉了，有時候不禁覺得這樣不健康的生活持續那麼久真的不會死嗎？所以早上出門去上課之前，發現明明已經打鐘了，室友的鬧鐘也已經持續叫了好幾個小時，卻還躺在那裡，都會先確認一下他們有沒有呼吸，再安心的去上課。

呼吸就是看一個人肚子會不會脹起來和消下去，不斷的消長，為了讓記憶方塊也有活著的感覺，我想要他的光暈也可以像有在呼吸那樣，可以不斷的消長閃爍，因此我這邊要為 box-shadow 加入 keyframe 的動畫，這個動畫我給他取名字叫做 breathShadow。
src/containers/MemoryBlocks/components/Block/Styled.js

const breathShadow = props => keyframes`
    0% {
        box-shadow: none;
    }
    100% {
        box-shadow: 0px 0px ${SHADOW_WIDTH}px 5px ${BLOCK_COLORS[props.blockId] + '80'};
    }
`;

然後這個動畫我希望他不要只播放一次，而是可以無限的播放，並且來回循環

animation: ${breathShadow} 1.5s infinite alternate-reverse;

infinite 這邊是定義我們動畫重複的次數是永無止盡的重複。然後 alternate 是指播放兩次以上的話，會從 0% 至 100% ，再從 100% 回到 0% ，依此類推。我這邊是用 alternate-reverse ，跟 alternate 相反，會先從 100% 開始播放，我覺得效果差不多，兩個都可以。然後循環的速度是 1.5 秒，這個速度讓我覺得比較接近呼吸的速度。

CSS3 動畫基礎

死而復活 - 呼吸交錯

目前的光暈已經可以呼吸了，但是不會讓人覺得他是活著的感覺，原因是因為他真的太同步了，全部的方塊一起消長，很像當兵的時候在對腳步，很機械化，所以不會給人他是活著的感覺，我印象比較深刻會有呼吸需要同步的時候，一個是管樂隊吹樂器要對節奏的時候，另一個就是七龍珠裡面的主角要合體的時候。

這個世界上每個人都有不同的特質，因此生活也有不同的步調，長相也都不一樣，喜歡的東西也不一樣，不同特質的人彼此可以很和諧的生活在一起，就會有一種生意盎然的感覺。

為了要讓他更生意盎然，更活生生，我希望每個方塊消長的時間不要同步，要錯開，所以我這邊要使用 animation-delay ，並且讓每個方塊的 delay 時間用隨機來決定，這樣就能夠幫助我錯開每個方塊的呼吸時間。另外，為了讓動畫開始的時候不會頓一下，所以我希望在我看到畫面之前，動畫就已經開始播放了，所以這邊的 delay 我設為負的。
src/containers/MemoryBlocks/components/Block/Styled.js

animation-delay: ${(props) => -2 * Math.random(props.blockId)}s;

接下來要展示我們會呼吸的記憶方塊，為了讓效果顯眼一點，我調整一下 sideLength 參數，用 5x5 的來展示

到這裡，我們炫炮又迷幻且會呼吸的記憶方塊動畫就完成了，很酷吧！哈哈哈！做到這邊的時候，總是會被他迷幻又華麗的樣子吸引住，然後一直痴痴的看，滿意的笑，但是記得不要一直盯著動畫看太久，不然可能會有暈眩感，嚴重的話會想吐，真的(汗)。

方塊滑鼠互動樣式

最後我們再做一些樣式的調整就結束，首先，我要來做方塊 hover 後的樣式，為了跟 active 得時候有所區別， hover 的時候我不想給他太強烈的樣式來蓋過後面點擊下去 active 時的樣式，所以這邊我只給他半透明的背景
src/containers/MemoryBlocks/components/Block/Styled.js

&:hover {
    ${(props) => {
        const id = props.blockId;
        return `
            background: ${BLOCK_COLORS[id] + '4d'};
        `
    }}
}

然後 active 的時候我想給他霓虹燈突然亮起來的感覺，所以會給他一個不透明的背景色，並且加強他的光暈。

但是我們肉眼看到霓虹燈閃完之後，通常會有視覺暫留的效果，不會馬上暗掉，所以這邊我希望用 transition 這個屬性來幫助我做到這個效果。 CSS transitions 是 CSS3 specification 草案的一部分，他可以用來調整 CSS animation 變動的速度。所以 active 變亮的時候，transition 是 0s ，滑鼠放開，從亮變成暗的時候，transition 是 0.5s 。

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.

src/containers/MemoryBlocks/components/Block/Styled.js

transition: 0.5s;
&:active {
    ${(props) => {
        const id = props.blockId;
        return `
            animation: none;
            background: ${BLOCK_COLORS[id]};
            box-shadow: 0px 0px ${SHADOW_WIDTH}px 7px ${BLOCK_COLORS[id]};
        `;
    }}
    transition: 0s;
}

CSS Transitions
CSS 轉場

今日成果展示

最後我們來展示一下我們今天的成果

參考程式碼 & 遊戲展示

Memory Blocks - Github