有點(diǎn)懶得把文章同步到公眾號(hào)之外的平臺(tái)，所以晚了半個(gè)月(3月29日發(fā)布)，但還是再發(fā)上來吧。
建議大家先看看這個(gè)視頻(已上傳b站：「一場(chǎng)因顏色混合模式而開啟的視覺盛筵！」，一鍵三連，お願(yuàn)い)再閱讀本文，以便對(duì)最終制作的內(nèi)容先有所了解。
這兩天古柳突然想實(shí)踐下“顏色混合模式”，看看開啟這個(gè)設(shè)置后可視化作品會(huì)有什么效果，其實(shí)不太記得為什么突然有這個(gè)想法，可能是因?yàn)樵诳匆恍╊伾?色彩相關(guān)內(nèi)容時(shí)，想起 Nadieh Bremer 為客戶 Kantar Consulting 做的可視化作品 MotiveMix，因?yàn)椤肮庑А碧每?，所以一直銘記于心?br>
可一直不知道這“光效”到底是什么實(shí)現(xiàn)的，且用“光效”二字描述，也表明古柳此前總覺得大概有什么沒接觸過的技術(shù)/實(shí)現(xiàn)方式才能產(chǎn)生類似發(fā)光的效果。
但沒想太多，先翻出這個(gè)作品重新理解下。遺憾的是海報(bào)圖片里文字信息很模糊、看不清，即使眼睛瞪得像銅鈴加上連蒙帶猜也只能了解這個(gè)作品的很少信息，到底有哪些數(shù)據(jù)屬性、是如何映射呈現(xiàn)到作品里的、能否找到原始數(shù)據(jù)等等都不甚清楚。
雖然滿是疑問，但這次古柳想到干脆擺脫原始數(shù)據(jù)的束縛、也別管怎么對(duì)數(shù)據(jù)進(jìn)行處理和映射，直接構(gòu)造些隨機(jī)的偽數(shù)據(jù)來試驗(yàn)下心中的想法：會(huì)不會(huì)“光效”是由于開了“顏色混合模式”而產(chǎn)生的？
有這樣的想法其實(shí)是因?yàn)橐恢敝馈?code>顏色混合模式/Color Blending”這個(gè)概念，但從來沒實(shí)踐過不知道效果如何，但古柳直覺認(rèn)為大概和所想的八九不離十，因而決定動(dòng)手實(shí)踐下。
做法就是實(shí)現(xiàn)類似 MotiveMix 的徑向圖，擺上兩種顏色的、位置大小各異的圓圈，再開啟顏色混合模式即可。
首先是徑向圖，實(shí)現(xiàn)過很多次，但也忘了些細(xì)節(jié)，看看以前文章里的思路與代碼，復(fù)制黏貼再改下就行。參見：財(cái)新網(wǎng)「星空彩繪諾貝爾獎(jiǎng)」可視化作品復(fù)現(xiàn) - 古柳 2020-09-30、關(guān)于推特30天地圖挑戰(zhàn)全部7.6k+圖片的顏色可視化 - 古柳 2020-12-12
接著構(gòu)造偽數(shù)據(jù)，用 Math.random() 隨機(jī)數(shù)給各種屬性來一遍，沒啥復(fù)雜的地方。
最后是”顏色混合模式“的使用，臨時(shí)抱佛腳看看 Nadieh Bremer 這篇文章 「Beautiful color blending effects with SVGs & d3.js」，所謂“顏色混合模式”指的就是當(dāng)元素有重疊時(shí)顏色應(yīng)該如何顯示，默認(rèn) D3.js/SVG 里后繪制的元素會(huì)遮擋覆蓋先繪制的元素，想要有不同的顯示效果，就可以設(shè)置”顏色混合模式“，不同參數(shù)有不同效果，可自行了解。
這次具體只需簡單設(shè)置三處地方即可：給所有圓圈設(shè)置 mix-blend-mode: screen 樣式、給圓圈的父元素 group 設(shè)置 isolation: isolate 樣式、以及設(shè)置整體背景為黑色 background-color: #000 即可，由于后續(xù)會(huì)將 SVG 導(dǎo)出成圖片，所以設(shè)置 SVG 的背景色為黑色，而非 body 等為黑色，以免導(dǎo)出時(shí)失去效果。
/*設(shè)置 group 元素為 isolate */
g.circleWrapper { isolation: isolate; }
/* 設(shè)置 SVG 元素的混合模式/blend mode，如 screen, multiply 等 */
circle { mix-blend-mode: screen; }
/* 設(shè)置背景為黑色 */
svg { background-color: #000; }
最終實(shí)現(xiàn)效果和古柳預(yù)想的類似，也和 MotiveMix 效果很像，看來光效確實(shí)是這么實(shí)現(xiàn)的，非常簡單，但視覺效果很棒。
原本到這里可能就結(jié)束了，但正好這兩天古柳了解到 Ant Design 系統(tǒng)級(jí)色彩體系的相關(guān)內(nèi)容。
Ant Design 系統(tǒng)級(jí)色彩體系同樣源于「自然」的設(shè)計(jì)價(jià)值觀。設(shè)計(jì)師通過對(duì)自然場(chǎng)景的抽象捕捉，結(jié)合螞蟻的技術(shù)基因，形成了特有的 12 色。進(jìn)一步又通過大量的觀察，捕捉不同色彩在自然光下的變化規(guī)律，借助美術(shù)中素描的思路，對(duì) 12 個(gè)顏色進(jìn)行了衍生。
了解到這 12個(gè)主色，且尤其喜歡其中寓意自然、生機(jī)的 Lime / 青檸色(lime-6 #a0d911)，于是用青檸和其他顏色搭配又做了幾張圖，發(fā)現(xiàn)都很好看，尤其喜歡其中“紅龍果”配色的左上一圖。
接著小小改動(dòng)代碼，進(jìn)行動(dòng)態(tài)呈現(xiàn)。
當(dāng)然這樣隨機(jī)手動(dòng)搭配過于抓瞎，為了不遺漏更多絕妙搭配，并且考慮到既然都變成動(dòng)態(tài)效果了，干脆就順手做成方便錄制視頻的形式好了，于是古柳繼續(xù)進(jìn)一步對(duì)12種顏色全部兩兩搭配的66組效果進(jìn)行依次動(dòng)態(tài)呈現(xiàn)，并且在每一組結(jié)束后將其導(dǎo)出成圖片，方便后續(xù)查看和分享給更多感興趣的人。(公眾號(hào)后臺(tái)回復(fù)顏色混合模式即可領(lǐng)取)
并且最后再做個(gè)12種顏色、66組搭配的整體圖，用于放視頻開頭展示。
于是就是這個(gè)視頻「一場(chǎng)因顏色混合模式而開啟的視覺盛筵！」
就這樣從一開始突然想實(shí)踐下“顏色混合模式”，看看能不能復(fù)現(xiàn)出 MotiveMix 作品的類似光效，到利用 Ant Design 系統(tǒng)級(jí)色彩體系的12主色制作所有66組效果圖，并順帶制作了一期視頻，以方便更多人能直觀感受到古柳稱之為“視覺盛筵”的這些作品的震撼效果，私心覺得比之前小火的23萬播放量的「中國傳統(tǒng)顏色可視化」視頻還要贊，希望大家也會(huì)喜歡。
最后，本次實(shí)現(xiàn)的更多具體細(xì)節(jié)及代碼開源，就等后續(xù)有空寫文章再介紹啦，感興趣的可以「點(diǎn)贊」、「在看」、「留言」等支持，大家越有熱情，文章也會(huì)越早面世，畢竟沒啥人感興趣的話或許就一直鴿鴿鴿了，逃...
