[{"data":1,"prerenderedAt":1606},["ShallowReactive",2],{"navigation":3,"post-\u002Fposts\u002F2019\u002Faudiowave-animation":20,"surroundPosts-\u002Fposts\u002F2019\u002Faudiowave-animation":1593},[4,8,12,16],{"title":5,"path":6,"stem":7},"首页","\u002F","00.index",{"title":9,"path":10,"stem":11},"文章","\u002Fposts","01.posts",{"title":13,"path":14,"stem":15},"动态","\u002Fmoments","02.moments",{"title":17,"path":18,"stem":19},"关于","\u002Fabout","09.about",{"id":21,"title":22,"body":23,"class":1574,"cover":1575,"coverSize":1574,"date":1576,"description":29,"draft":1577,"extension":1578,"hideComments":1577,"location":1574,"meta":1579,"navigation":149,"path":1580,"readingTime":1581,"seo":1585,"sitemap":1586,"stem":1587,"tags":1588,"time":1574,"weather":1591,"__hash__":1592},"posts\u002Fposts\u002F2019\u002F20190324.audiowave-animation.md","声波动画教程",{"type":24,"value":25,"toc":1572},"minimark",[26,30,34,38,42,50,53,132,428,1485,1488,1502,1508,1522,1535,1538,1554,1568],[27,28,29],"p",{},"最近项目中有一个声波动画的效果的需求，网上没找到合适的，于是手撸了一个。",[31,32,33],"h4",{"id":33},"效果",[35,36],"post-image",{"filename":37},"01.gif",[31,39,41],{"id":40},"demo","Demo",[27,43,44],{},[45,46,47],"a",{"href":47,"rel":48},"https:\u002F\u002Fjsfiddle.net\u002FHADB\u002Fx8vdkmqh\u002F",[49],"nofollow",[31,51,52],{"id":52},"示例代码",[54,55,60],"pre",{"className":56,"code":57,"language":58,"meta":59,"style":59},"language-html shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cdiv class=\"background\">\n  \u003Cdiv class=\"audiowave\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[61,62,63,96,122],"code",{"__ignoreMap":59},[64,65,68,72,76,80,83,87,91,93],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"sP7_E","\u003C",[64,73,75],{"class":74},"sQzsp","div",[64,77,79],{"class":78},"s9AJx"," class",[64,81,82],{"class":70},"=",[64,84,86],{"class":85},"sjJ54","\"",[64,88,90],{"class":89},"s_sjI","background",[64,92,86],{"class":85},[64,94,95],{"class":70},">\n",[64,97,99,102,104,106,108,110,113,115,118,120],{"class":66,"line":98},2,[64,100,101],{"class":70},"  \u003C",[64,103,75],{"class":74},[64,105,79],{"class":78},[64,107,82],{"class":70},[64,109,86],{"class":85},[64,111,112],{"class":89},"audiowave",[64,114,86],{"class":85},[64,116,117],{"class":70},">\u003C\u002F",[64,119,75],{"class":74},[64,121,95],{"class":70},[64,123,125,128,130],{"class":66,"line":124},3,[64,126,127],{"class":70},"\u003C\u002F",[64,129,75],{"class":74},[64,131,95],{"class":70},[54,133,137],{"className":134,"code":135,"language":136,"meta":59,"style":59},"language-javascript shiki shiki-themes material-theme-lighter github-light github-dark","\u002F*\n\nAuthor: HADB\nDate: 2019-03-24\nMy Blog: https:\u002F\u002Fhadb.me\nMy GitHub: https:\u002F\u002Fgithub.com\u002FHADB\n\n*\u002F\n\nconst wavePillarCount = 100 \u002F\u002F 柱子总数（用来调整密度）\nconst waveCount = 5 \u002F\u002F 波形总数（用来调整波形数量）\nconst waveAnimationDuration = 3 \u002F\u002F 单个动画秒数（与 animation-duration 一致）\nconst randomRate = 1 \u002F\u002F 随机倍率，越大越随机\n\nfor (i = 0; i \u003C wavePillarCount; i++) {\n  const offset = ((i \u002F wavePillarCount - 1) * waveCount * waveAnimationDuration) - Math.random() * randomRate\n  document.querySelector('.audiowave').innerHTML += `\u003Cdiv style=\"-webkit-animation-delay:${offset}s;\">\u003C\u002Fdiv>`\n}\n","javascript",[61,138,139,145,151,156,162,168,174,179,185,190,212,228,244,260,265,305,368,422],{"__ignoreMap":59},[64,140,141],{"class":66,"line":67},[64,142,144],{"class":143},"sutJx","\u002F*\n",[64,146,147],{"class":66,"line":98},[64,148,150],{"emptyLinePlaceholder":149},true,"\n",[64,152,153],{"class":66,"line":124},[64,154,155],{"class":143},"Author: HADB\n",[64,157,159],{"class":66,"line":158},4,[64,160,161],{"class":143},"Date: 2019-03-24\n",[64,163,165],{"class":66,"line":164},5,[64,166,167],{"class":143},"My Blog: https:\u002F\u002Fhadb.me\n",[64,169,171],{"class":66,"line":170},6,[64,172,173],{"class":143},"My GitHub: https:\u002F\u002Fgithub.com\u002FHADB\n",[64,175,177],{"class":66,"line":176},7,[64,178,150],{"emptyLinePlaceholder":149},[64,180,182],{"class":66,"line":181},8,[64,183,184],{"class":143},"*\u002F\n",[64,186,188],{"class":66,"line":187},9,[64,189,150],{"emptyLinePlaceholder":149},[64,191,193,197,201,205,209],{"class":66,"line":192},10,[64,194,196],{"class":195},"sbsja","const",[64,198,200],{"class":199},"s_hVV"," wavePillarCount",[64,202,204],{"class":203},"smGrS"," =",[64,206,208],{"class":207},"srdBf"," 100",[64,210,211],{"class":143}," \u002F\u002F 柱子总数（用来调整密度）\n",[64,213,215,217,220,222,225],{"class":66,"line":214},11,[64,216,196],{"class":195},[64,218,219],{"class":199}," waveCount",[64,221,204],{"class":203},[64,223,224],{"class":207}," 5",[64,226,227],{"class":143}," \u002F\u002F 波形总数（用来调整波形数量）\n",[64,229,231,233,236,238,241],{"class":66,"line":230},12,[64,232,196],{"class":195},[64,234,235],{"class":199}," waveAnimationDuration",[64,237,204],{"class":203},[64,239,240],{"class":207}," 3",[64,242,243],{"class":143}," \u002F\u002F 单个动画秒数（与 animation-duration 一致）\n",[64,245,247,249,252,254,257],{"class":66,"line":246},13,[64,248,196],{"class":195},[64,250,251],{"class":199}," randomRate",[64,253,204],{"class":203},[64,255,256],{"class":207}," 1",[64,258,259],{"class":143}," \u002F\u002F 随机倍率，越大越随机\n",[64,261,263],{"class":66,"line":262},14,[64,264,150],{"emptyLinePlaceholder":149},[64,266,268,272,276,278,281,284,287,289,291,293,296,299,302],{"class":66,"line":267},15,[64,269,271],{"class":270},"sVHd0","for",[64,273,275],{"class":274},"su5hD"," (i ",[64,277,82],{"class":203},[64,279,280],{"class":207}," 0",[64,282,283],{"class":70},";",[64,285,286],{"class":274}," i ",[64,288,71],{"class":203},[64,290,200],{"class":274},[64,292,283],{"class":70},[64,294,295],{"class":274}," i",[64,297,298],{"class":203},"++",[64,300,301],{"class":274},") ",[64,303,304],{"class":70},"{\n",[64,306,308,311,314,316,320,323,326,328,331,333,335,338,340,343,345,347,350,353,356,360,363,365],{"class":66,"line":307},16,[64,309,310],{"class":195},"  const",[64,312,313],{"class":199}," offset",[64,315,204],{"class":203},[64,317,319],{"class":318},"skxfh"," ((",[64,321,322],{"class":274},"i",[64,324,325],{"class":203}," \u002F",[64,327,200],{"class":274},[64,329,330],{"class":203}," -",[64,332,256],{"class":207},[64,334,301],{"class":318},[64,336,337],{"class":203},"*",[64,339,219],{"class":274},[64,341,342],{"class":203}," *",[64,344,235],{"class":274},[64,346,301],{"class":318},[64,348,349],{"class":203},"-",[64,351,352],{"class":274}," Math",[64,354,355],{"class":70},".",[64,357,359],{"class":358},"sGLFI","random",[64,361,362],{"class":318},"() ",[64,364,337],{"class":203},[64,366,367],{"class":274}," randomRate\n",[64,369,371,374,376,379,382,385,388,390,393,395,398,401,404,407,410,413,416,419],{"class":66,"line":370},17,[64,372,373],{"class":274},"  document",[64,375,355],{"class":70},[64,377,378],{"class":358},"querySelector",[64,380,381],{"class":318},"(",[64,383,384],{"class":85},"'",[64,386,387],{"class":89},".audiowave",[64,389,384],{"class":85},[64,391,392],{"class":318},")",[64,394,355],{"class":70},[64,396,397],{"class":274},"innerHTML",[64,399,400],{"class":203}," +=",[64,402,403],{"class":85}," `",[64,405,406],{"class":89},"\u003Cdiv style=\"-webkit-animation-delay:",[64,408,409],{"class":85},"${",[64,411,412],{"class":274},"offset",[64,414,415],{"class":85},"}",[64,417,418],{"class":89},"s;\">\u003C\u002Fdiv>",[64,420,421],{"class":85},"`\n",[64,423,425],{"class":66,"line":424},18,[64,426,427],{"class":70},"}\n",[54,429,433],{"className":430,"code":431,"language":432,"meta":59,"style":59},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","body {\n  padding: 0;\n  margin: 0;\n}\n\n.background {\n  width: 100vw;\n  height: 100vh;\n  background-color: #193082;\n}\n\n.audiowave {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 200px;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n\n.audiowave div {\n  top: 0;\n  background: rgba(44, 99, 255, 0.25);\n  z-index: 9;\n  width: 3px;\n  height: 0;\n  animation: audiowave 3s infinite linear;\n}\n\n@keyframes audiowave {\n  0% {\n    height: 28.75%;\n  }\n\n  5% {\n    height: 37.5%;\n  }\n\n  10% {\n    height: 56.25%;\n  }\n\n  15% {\n    height: 48.75%;\n  }\n\n  20% {\n    height: 68.75%;\n  }\n\n  25% {\n    height: 82.5%;\n  }\n\n  30% {\n    height: 71.25%;\n  }\n\n  35% {\n    height: 78.125%;\n  }\n\n  40% {\n    height: 68.75%;\n  }\n\n  45% {\n    height: 80.875%;\n  }\n\n  50% {\n    height: 90%;\n  }\n\n  55% {\n    height: 91.875%;\n  }\n\n  60% {\n    height: 87%;\n  }\n\n  65% {\n    height: 70%;\n  }\n\n  70% {\n    height: 60%;\n  }\n\n  75% {\n    height: 55%;\n  }\n\n  80% {\n    height: 45%;\n  }\n\n  85% {\n    height: 40%;\n  }\n\n  90% {\n    height: 35%;\n  }\n\n  95% {\n    height: 30%;\n  }\n\n  100% {\n    height: 28.75%;\n  }\n}\n","css",[61,434,435,444,458,469,473,477,487,502,516,532,536,540,548,560,571,582,595,609,621,634,647,660,665,670,682,693,729,742,755,766,791,796,801,813,821,836,842,847,855,869,874,879,887,901,906,911,919,933,938,943,951,965,970,975,983,997,1002,1007,1015,1029,1034,1039,1047,1061,1066,1071,1079,1092,1097,1102,1110,1124,1129,1134,1142,1156,1161,1166,1174,1188,1193,1198,1206,1220,1225,1230,1238,1252,1257,1262,1270,1284,1289,1294,1302,1316,1321,1326,1334,1348,1353,1358,1366,1380,1385,1390,1398,1412,1417,1422,1430,1444,1449,1454,1462,1475,1480],{"__ignoreMap":59},[64,436,437,441],{"class":66,"line":67},[64,438,440],{"class":439},"s83vy","body",[64,442,443],{"class":70}," {\n",[64,445,446,450,453,455],{"class":66,"line":98},[64,447,449],{"class":448},"soE4H","  padding",[64,451,452],{"class":70},":",[64,454,280],{"class":207},[64,456,457],{"class":70},";\n",[64,459,460,463,465,467],{"class":66,"line":124},[64,461,462],{"class":448},"  margin",[64,464,452],{"class":70},[64,466,280],{"class":207},[64,468,457],{"class":70},[64,470,471],{"class":66,"line":158},[64,472,427],{"class":70},[64,474,475],{"class":66,"line":164},[64,476,150],{"emptyLinePlaceholder":149},[64,478,479,482,485],{"class":66,"line":170},[64,480,355],{"class":481},"stp6e",[64,483,90],{"class":484},"sbgvK",[64,486,443],{"class":70},[64,488,489,492,494,496,500],{"class":66,"line":176},[64,490,491],{"class":448},"  width",[64,493,452],{"class":70},[64,495,208],{"class":207},[64,497,499],{"class":498},"sw1J6","vw",[64,501,457],{"class":70},[64,503,504,507,509,511,514],{"class":66,"line":181},[64,505,506],{"class":448},"  height",[64,508,452],{"class":70},[64,510,208],{"class":207},[64,512,513],{"class":498},"vh",[64,515,457],{"class":70},[64,517,518,521,523,527,530],{"class":66,"line":187},[64,519,520],{"class":448},"  background-color",[64,522,452],{"class":70},[64,524,526],{"class":525},"s39Yj"," #",[64,528,529],{"class":199},"193082",[64,531,457],{"class":70},[64,533,534],{"class":66,"line":192},[64,535,427],{"class":70},[64,537,538],{"class":66,"line":214},[64,539,150],{"emptyLinePlaceholder":149},[64,541,542,544,546],{"class":66,"line":230},[64,543,355],{"class":481},[64,545,112],{"class":484},[64,547,443],{"class":70},[64,549,550,553,555,558],{"class":66,"line":246},[64,551,552],{"class":448},"  position",[64,554,452],{"class":70},[64,556,557],{"class":199}," absolute",[64,559,457],{"class":70},[64,561,562,565,567,569],{"class":66,"line":262},[64,563,564],{"class":448},"  left",[64,566,452],{"class":70},[64,568,280],{"class":207},[64,570,457],{"class":70},[64,572,573,576,578,580],{"class":66,"line":267},[64,574,575],{"class":448},"  top",[64,577,452],{"class":70},[64,579,280],{"class":207},[64,581,457],{"class":70},[64,583,584,586,588,590,593],{"class":66,"line":307},[64,585,491],{"class":448},[64,587,452],{"class":70},[64,589,208],{"class":207},[64,591,592],{"class":498},"%",[64,594,457],{"class":70},[64,596,597,599,601,604,607],{"class":66,"line":370},[64,598,506],{"class":448},[64,600,452],{"class":70},[64,602,603],{"class":207}," 200",[64,605,606],{"class":498},"px",[64,608,457],{"class":70},[64,610,611,614,616,619],{"class":66,"line":424},[64,612,613],{"class":448},"  display",[64,615,452],{"class":70},[64,617,618],{"class":199}," flex",[64,620,457],{"class":70},[64,622,624,627,629,632],{"class":66,"line":623},19,[64,625,626],{"class":448},"  flex-direction",[64,628,452],{"class":70},[64,630,631],{"class":199}," row",[64,633,457],{"class":70},[64,635,637,640,642,645],{"class":66,"line":636},20,[64,638,639],{"class":448},"  align-items",[64,641,452],{"class":70},[64,643,644],{"class":199}," flex-start",[64,646,457],{"class":70},[64,648,650,653,655,658],{"class":66,"line":649},21,[64,651,652],{"class":448},"  justify-content",[64,654,452],{"class":70},[64,656,657],{"class":199}," space-between",[64,659,457],{"class":70},[64,661,663],{"class":66,"line":662},22,[64,664,427],{"class":70},[64,666,668],{"class":66,"line":667},23,[64,669,150],{"emptyLinePlaceholder":149},[64,671,673,675,677,680],{"class":66,"line":672},24,[64,674,355],{"class":481},[64,676,112],{"class":484},[64,678,679],{"class":439}," div",[64,681,443],{"class":70},[64,683,685,687,689,691],{"class":66,"line":684},25,[64,686,575],{"class":448},[64,688,452],{"class":70},[64,690,280],{"class":207},[64,692,457],{"class":70},[64,694,696,699,701,705,707,710,713,716,718,721,723,726],{"class":66,"line":695},26,[64,697,698],{"class":448},"  background",[64,700,452],{"class":70},[64,702,704],{"class":703},"sptTA"," rgba",[64,706,381],{"class":70},[64,708,709],{"class":207},"44",[64,711,712],{"class":70},",",[64,714,715],{"class":207}," 99",[64,717,712],{"class":70},[64,719,720],{"class":207}," 255",[64,722,712],{"class":70},[64,724,725],{"class":207}," 0.25",[64,727,728],{"class":70},");\n",[64,730,732,735,737,740],{"class":66,"line":731},27,[64,733,734],{"class":448},"  z-index",[64,736,452],{"class":70},[64,738,739],{"class":207}," 9",[64,741,457],{"class":70},[64,743,745,747,749,751,753],{"class":66,"line":744},28,[64,746,491],{"class":448},[64,748,452],{"class":70},[64,750,240],{"class":207},[64,752,606],{"class":498},[64,754,457],{"class":70},[64,756,758,760,762,764],{"class":66,"line":757},29,[64,759,506],{"class":448},[64,761,452],{"class":70},[64,763,280],{"class":207},[64,765,457],{"class":70},[64,767,769,772,774,777,780,783,786,789],{"class":66,"line":768},30,[64,770,771],{"class":448},"  animation",[64,773,452],{"class":70},[64,775,776],{"class":274}," audiowave ",[64,778,779],{"class":207},"3",[64,781,782],{"class":498},"s",[64,784,785],{"class":199}," infinite",[64,787,788],{"class":199}," linear",[64,790,457],{"class":70},[64,792,794],{"class":66,"line":793},31,[64,795,427],{"class":70},[64,797,799],{"class":66,"line":798},32,[64,800,150],{"emptyLinePlaceholder":149},[64,802,804,807,811],{"class":66,"line":803},33,[64,805,806],{"class":270},"@keyframes",[64,808,810],{"class":809},"s99_P"," audiowave",[64,812,443],{"class":70},[64,814,816,819],{"class":66,"line":815},34,[64,817,818],{"class":484},"  0%",[64,820,443],{"class":70},[64,822,824,827,829,832,834],{"class":66,"line":823},35,[64,825,826],{"class":448},"    height",[64,828,452],{"class":70},[64,830,831],{"class":207}," 28.75",[64,833,592],{"class":498},[64,835,457],{"class":70},[64,837,839],{"class":66,"line":838},36,[64,840,841],{"class":70},"  }\n",[64,843,845],{"class":66,"line":844},37,[64,846,150],{"emptyLinePlaceholder":149},[64,848,850,853],{"class":66,"line":849},38,[64,851,852],{"class":484},"  5%",[64,854,443],{"class":70},[64,856,858,860,862,865,867],{"class":66,"line":857},39,[64,859,826],{"class":448},[64,861,452],{"class":70},[64,863,864],{"class":207}," 37.5",[64,866,592],{"class":498},[64,868,457],{"class":70},[64,870,872],{"class":66,"line":871},40,[64,873,841],{"class":70},[64,875,877],{"class":66,"line":876},41,[64,878,150],{"emptyLinePlaceholder":149},[64,880,882,885],{"class":66,"line":881},42,[64,883,884],{"class":484},"  10%",[64,886,443],{"class":70},[64,888,890,892,894,897,899],{"class":66,"line":889},43,[64,891,826],{"class":448},[64,893,452],{"class":70},[64,895,896],{"class":207}," 56.25",[64,898,592],{"class":498},[64,900,457],{"class":70},[64,902,904],{"class":66,"line":903},44,[64,905,841],{"class":70},[64,907,909],{"class":66,"line":908},45,[64,910,150],{"emptyLinePlaceholder":149},[64,912,914,917],{"class":66,"line":913},46,[64,915,916],{"class":484},"  15%",[64,918,443],{"class":70},[64,920,922,924,926,929,931],{"class":66,"line":921},47,[64,923,826],{"class":448},[64,925,452],{"class":70},[64,927,928],{"class":207}," 48.75",[64,930,592],{"class":498},[64,932,457],{"class":70},[64,934,936],{"class":66,"line":935},48,[64,937,841],{"class":70},[64,939,941],{"class":66,"line":940},49,[64,942,150],{"emptyLinePlaceholder":149},[64,944,946,949],{"class":66,"line":945},50,[64,947,948],{"class":484},"  20%",[64,950,443],{"class":70},[64,952,954,956,958,961,963],{"class":66,"line":953},51,[64,955,826],{"class":448},[64,957,452],{"class":70},[64,959,960],{"class":207}," 68.75",[64,962,592],{"class":498},[64,964,457],{"class":70},[64,966,968],{"class":66,"line":967},52,[64,969,841],{"class":70},[64,971,973],{"class":66,"line":972},53,[64,974,150],{"emptyLinePlaceholder":149},[64,976,978,981],{"class":66,"line":977},54,[64,979,980],{"class":484},"  25%",[64,982,443],{"class":70},[64,984,986,988,990,993,995],{"class":66,"line":985},55,[64,987,826],{"class":448},[64,989,452],{"class":70},[64,991,992],{"class":207}," 82.5",[64,994,592],{"class":498},[64,996,457],{"class":70},[64,998,1000],{"class":66,"line":999},56,[64,1001,841],{"class":70},[64,1003,1005],{"class":66,"line":1004},57,[64,1006,150],{"emptyLinePlaceholder":149},[64,1008,1010,1013],{"class":66,"line":1009},58,[64,1011,1012],{"class":484},"  30%",[64,1014,443],{"class":70},[64,1016,1018,1020,1022,1025,1027],{"class":66,"line":1017},59,[64,1019,826],{"class":448},[64,1021,452],{"class":70},[64,1023,1024],{"class":207}," 71.25",[64,1026,592],{"class":498},[64,1028,457],{"class":70},[64,1030,1032],{"class":66,"line":1031},60,[64,1033,841],{"class":70},[64,1035,1037],{"class":66,"line":1036},61,[64,1038,150],{"emptyLinePlaceholder":149},[64,1040,1042,1045],{"class":66,"line":1041},62,[64,1043,1044],{"class":484},"  35%",[64,1046,443],{"class":70},[64,1048,1050,1052,1054,1057,1059],{"class":66,"line":1049},63,[64,1051,826],{"class":448},[64,1053,452],{"class":70},[64,1055,1056],{"class":207}," 78.125",[64,1058,592],{"class":498},[64,1060,457],{"class":70},[64,1062,1064],{"class":66,"line":1063},64,[64,1065,841],{"class":70},[64,1067,1069],{"class":66,"line":1068},65,[64,1070,150],{"emptyLinePlaceholder":149},[64,1072,1074,1077],{"class":66,"line":1073},66,[64,1075,1076],{"class":484},"  40%",[64,1078,443],{"class":70},[64,1080,1082,1084,1086,1088,1090],{"class":66,"line":1081},67,[64,1083,826],{"class":448},[64,1085,452],{"class":70},[64,1087,960],{"class":207},[64,1089,592],{"class":498},[64,1091,457],{"class":70},[64,1093,1095],{"class":66,"line":1094},68,[64,1096,841],{"class":70},[64,1098,1100],{"class":66,"line":1099},69,[64,1101,150],{"emptyLinePlaceholder":149},[64,1103,1105,1108],{"class":66,"line":1104},70,[64,1106,1107],{"class":484},"  45%",[64,1109,443],{"class":70},[64,1111,1113,1115,1117,1120,1122],{"class":66,"line":1112},71,[64,1114,826],{"class":448},[64,1116,452],{"class":70},[64,1118,1119],{"class":207}," 80.875",[64,1121,592],{"class":498},[64,1123,457],{"class":70},[64,1125,1127],{"class":66,"line":1126},72,[64,1128,841],{"class":70},[64,1130,1132],{"class":66,"line":1131},73,[64,1133,150],{"emptyLinePlaceholder":149},[64,1135,1137,1140],{"class":66,"line":1136},74,[64,1138,1139],{"class":484},"  50%",[64,1141,443],{"class":70},[64,1143,1145,1147,1149,1152,1154],{"class":66,"line":1144},75,[64,1146,826],{"class":448},[64,1148,452],{"class":70},[64,1150,1151],{"class":207}," 90",[64,1153,592],{"class":498},[64,1155,457],{"class":70},[64,1157,1159],{"class":66,"line":1158},76,[64,1160,841],{"class":70},[64,1162,1164],{"class":66,"line":1163},77,[64,1165,150],{"emptyLinePlaceholder":149},[64,1167,1169,1172],{"class":66,"line":1168},78,[64,1170,1171],{"class":484},"  55%",[64,1173,443],{"class":70},[64,1175,1177,1179,1181,1184,1186],{"class":66,"line":1176},79,[64,1178,826],{"class":448},[64,1180,452],{"class":70},[64,1182,1183],{"class":207}," 91.875",[64,1185,592],{"class":498},[64,1187,457],{"class":70},[64,1189,1191],{"class":66,"line":1190},80,[64,1192,841],{"class":70},[64,1194,1196],{"class":66,"line":1195},81,[64,1197,150],{"emptyLinePlaceholder":149},[64,1199,1201,1204],{"class":66,"line":1200},82,[64,1202,1203],{"class":484},"  60%",[64,1205,443],{"class":70},[64,1207,1209,1211,1213,1216,1218],{"class":66,"line":1208},83,[64,1210,826],{"class":448},[64,1212,452],{"class":70},[64,1214,1215],{"class":207}," 87",[64,1217,592],{"class":498},[64,1219,457],{"class":70},[64,1221,1223],{"class":66,"line":1222},84,[64,1224,841],{"class":70},[64,1226,1228],{"class":66,"line":1227},85,[64,1229,150],{"emptyLinePlaceholder":149},[64,1231,1233,1236],{"class":66,"line":1232},86,[64,1234,1235],{"class":484},"  65%",[64,1237,443],{"class":70},[64,1239,1241,1243,1245,1248,1250],{"class":66,"line":1240},87,[64,1242,826],{"class":448},[64,1244,452],{"class":70},[64,1246,1247],{"class":207}," 70",[64,1249,592],{"class":498},[64,1251,457],{"class":70},[64,1253,1255],{"class":66,"line":1254},88,[64,1256,841],{"class":70},[64,1258,1260],{"class":66,"line":1259},89,[64,1261,150],{"emptyLinePlaceholder":149},[64,1263,1265,1268],{"class":66,"line":1264},90,[64,1266,1267],{"class":484},"  70%",[64,1269,443],{"class":70},[64,1271,1273,1275,1277,1280,1282],{"class":66,"line":1272},91,[64,1274,826],{"class":448},[64,1276,452],{"class":70},[64,1278,1279],{"class":207}," 60",[64,1281,592],{"class":498},[64,1283,457],{"class":70},[64,1285,1287],{"class":66,"line":1286},92,[64,1288,841],{"class":70},[64,1290,1292],{"class":66,"line":1291},93,[64,1293,150],{"emptyLinePlaceholder":149},[64,1295,1297,1300],{"class":66,"line":1296},94,[64,1298,1299],{"class":484},"  75%",[64,1301,443],{"class":70},[64,1303,1305,1307,1309,1312,1314],{"class":66,"line":1304},95,[64,1306,826],{"class":448},[64,1308,452],{"class":70},[64,1310,1311],{"class":207}," 55",[64,1313,592],{"class":498},[64,1315,457],{"class":70},[64,1317,1319],{"class":66,"line":1318},96,[64,1320,841],{"class":70},[64,1322,1324],{"class":66,"line":1323},97,[64,1325,150],{"emptyLinePlaceholder":149},[64,1327,1329,1332],{"class":66,"line":1328},98,[64,1330,1331],{"class":484},"  80%",[64,1333,443],{"class":70},[64,1335,1337,1339,1341,1344,1346],{"class":66,"line":1336},99,[64,1338,826],{"class":448},[64,1340,452],{"class":70},[64,1342,1343],{"class":207}," 45",[64,1345,592],{"class":498},[64,1347,457],{"class":70},[64,1349,1351],{"class":66,"line":1350},100,[64,1352,841],{"class":70},[64,1354,1356],{"class":66,"line":1355},101,[64,1357,150],{"emptyLinePlaceholder":149},[64,1359,1361,1364],{"class":66,"line":1360},102,[64,1362,1363],{"class":484},"  85%",[64,1365,443],{"class":70},[64,1367,1369,1371,1373,1376,1378],{"class":66,"line":1368},103,[64,1370,826],{"class":448},[64,1372,452],{"class":70},[64,1374,1375],{"class":207}," 40",[64,1377,592],{"class":498},[64,1379,457],{"class":70},[64,1381,1383],{"class":66,"line":1382},104,[64,1384,841],{"class":70},[64,1386,1388],{"class":66,"line":1387},105,[64,1389,150],{"emptyLinePlaceholder":149},[64,1391,1393,1396],{"class":66,"line":1392},106,[64,1394,1395],{"class":484},"  90%",[64,1397,443],{"class":70},[64,1399,1401,1403,1405,1408,1410],{"class":66,"line":1400},107,[64,1402,826],{"class":448},[64,1404,452],{"class":70},[64,1406,1407],{"class":207}," 35",[64,1409,592],{"class":498},[64,1411,457],{"class":70},[64,1413,1415],{"class":66,"line":1414},108,[64,1416,841],{"class":70},[64,1418,1420],{"class":66,"line":1419},109,[64,1421,150],{"emptyLinePlaceholder":149},[64,1423,1425,1428],{"class":66,"line":1424},110,[64,1426,1427],{"class":484},"  95%",[64,1429,443],{"class":70},[64,1431,1433,1435,1437,1440,1442],{"class":66,"line":1432},111,[64,1434,826],{"class":448},[64,1436,452],{"class":70},[64,1438,1439],{"class":207}," 30",[64,1441,592],{"class":498},[64,1443,457],{"class":70},[64,1445,1447],{"class":66,"line":1446},112,[64,1448,841],{"class":70},[64,1450,1452],{"class":66,"line":1451},113,[64,1453,150],{"emptyLinePlaceholder":149},[64,1455,1457,1460],{"class":66,"line":1456},114,[64,1458,1459],{"class":484},"  100%",[64,1461,443],{"class":70},[64,1463,1465,1467,1469,1471,1473],{"class":66,"line":1464},115,[64,1466,826],{"class":448},[64,1468,452],{"class":70},[64,1470,831],{"class":207},[64,1472,592],{"class":498},[64,1474,457],{"class":70},[64,1476,1478],{"class":66,"line":1477},116,[64,1479,841],{"class":70},[64,1481,1483],{"class":66,"line":1482},117,[64,1484,427],{"class":70},[31,1486,1487],{"id":1487},"代码解析",[27,1489,1490,1491,1494,1495,1497,1498,1501],{},"核心还是通过 ",[61,1492,1493],{},"animation-delay"," 动画延迟来实现，",[61,1496,112],{}," 的 ",[61,1499,1500],{},"keyframes"," 是根据设计图中一个完整波形的大致高度来调整的，不需要太精确，因为我们会加一些随机数进去，这样可以使每个波形之间不完全一致，不然就太死板了。",[27,1503,1504,1507],{},[61,1505,1506],{},"wavePillarCount"," 是指整个声波中柱子的数量，可以根据总宽度和每个柱子的宽度按需调整。",[27,1509,1510,1513,1514,1517,1518,1521],{},[61,1511,1512],{},"waveCount"," 是波的数量，可以尝试把下面的 ",[61,1515,1516],{},"randomRate"," 设为 ",[61,1519,1520],{},"0"," 就可以清楚地看出来了。",[27,1523,1524,1526,1527,1529,1530,1517,1532,1534],{},[61,1525,1516],{}," 如上所述，是添加的随机延迟倍率，以便增加波形的杂音，不至于太死板。值越大杂音越大，值为 ",[61,1528,1520],{}," 的时候没有杂音。下面是把 ",[61,1531,1516],{},[61,1533,1520],{}," 的效果。",[35,1536],{"filename":1537},"02.gif",[27,1539,1540,1541,1543,1544,1547,1548,1550,1551,1553],{},"另外，",[61,1542,412],{}," 计算的时候之所以要减去 ",[61,1545,1546],{},"1","，是为了保证 ",[61,1549,412],{}," 的值为负数，这样可以保证动画在一开始就是完整的，不然部分波形一开始将不完整，等到了那个 ",[61,1552,412],{}," 时才会开始动。",[27,1555,1556,1557,1559,1560,1562,1563,1562,1565,1567],{},"基本上就是这样，通过通过 ",[61,1558,1500],{}," 来设置初始波形，通过微调 ",[61,1561,1506],{},"、 ",[61,1564,1512],{},[61,1566,1516],{}," 来获得更加的效果。",[1569,1570,1571],"style",{},"html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s83vy, html code.shiki .s83vy{--shiki-light:#E2931D;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sw1J6, html code.shiki .sw1J6{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sptTA, html code.shiki .sptTA{--shiki-light:#6182B8;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}",{"title":59,"searchDepth":98,"depth":98,"links":1573},[],null,"png","2019-03-24",false,"md",{},"\u002Fposts\u002F2019\u002Faudiowave-animation",{"text":1582,"minutes":124,"time":1583,"words":1584},"3 min read",180000,600,{"title":22,"description":29},{"loc":1580},"posts\u002F2019\u002F20190324.audiowave-animation",[1589,1590],"技术","前端","天气晴","sgdV0_o07zLLyyGhpqqjl1ZVLmOMtBlps06AjCbHWu0",[1594,1600],{"title":1595,"path":1596,"stem":1597,"date":1598,"description":1599,"children":-1},"及时行乐","\u002Fposts\u002F2019\u002Fcarpe-diem","posts\u002F2019\u002F20190407.carpe-diem","2019-04-07","今天又想到一个新的关于消费的理论：",{"title":1601,"path":1602,"stem":1603,"date":1604,"description":1605,"children":-1},"关于未来的思考 —— 给老板的邮件","\u002Fposts\u002F2019\u002Fthoughts-about-the-feture-email","posts\u002F2019\u002F20190320.thoughts-about-the-feture-email","2019-03-20","Mylo，我最近有些新的想法，想跟你同步一下。",1777580277564]