[SVG动画] 制作一个中二的魔法阵

# 效果图
[点击这里查看效果(anime.js版)(效果更酷炫)](https://codepen.io/semperia/pen/mGBVmV)
[点击这里查看效果(css版)(只有旋转)](https://codepen.io/semperia/pen/RYLGqG)
代码其实都在里面了

# 制作过程
## 准备工作
首先我们得准备一个好看的svg的魔法阵，虽然这种东西好难找的，我在谷歌上面也没找到几个。但是重要的是过程嘛。有的svg把所有内容糊成一团，像这样

整个图片就一个 path，这样样是没法把魔法阵拆成几个部分来画的（~~耐心好的话可以自己拆~~），我们需要的是把整个魔法阵分成多个 path 来绘制的，比如 demo 中使用的 svg ([来源：pixiv](https://www.pixiv.net/member_illust.php?mode=medium&illust_id=19282839) 画师：sharkpp 进行了一些改造）

```HTML
<svg id="demo" width="512" height="512" viewBox="0 0 512 512">
  <path id="path1" class="scale0" sodipodi:cx="251.04517" sodipodi:cy="248.84302" sodipodi:rx="122.21935" sodipodi:ry="122.21935" sodipodi:type="arc" fill="#1da57a" stroke="#1da57a" stroke-width="3.0174" d="M377.5,256c0,67.1-54.4,121.5-121.5,121.5S134.5,323.1,134.5,256S188.9,134.5,256,134.5S377.5,188.9,377.5,256z"/>
  <path id="path2" class="clockwise" inkscape:connector-curvature="0" fill="none" stroke="#ffffff" stroke-width="3" d="M244,190c-7.4,1.3-14.4,3.9-20.7,7.4l14.7,5.4l-11.1,24.1l-24.1,11.1l-5.5-14.8c-3.6,6.3-6.1,13.4-7.4,20.8l5.6-2.6L201,256l-5.4,14.6L190,268c1.3,7.4,3.8,14.4,7.4,20.7l5.5-14.8l24.1,11.1l11.1,24.1l-14.7,5.4c6.3,3.5,13.3,6.1,20.7,7.4l-2.6-5.6L256,311l14.6,5.4L268,322c7.4-1.3,14.4-3.9,20.7-7.4l-14.7-5.4l11.1-24.1l24.1-11.1l5.5,14.8c3.5-6.3,6.1-13.3,7.4-20.7l-5.6,2.6L311,256l5.4-14.6l5.6,2.6c-1.3-7.4-3.8-14.4-7.4-20.8l-5.5,14.8l-24.1-11.1l-11.1-24.1l14.7-5.4c-6.3-3.5-13.3-6.1-20.7-7.4l2.6,5.6L256,201l-14.6-5.4L244,190z"/>
  <path id="path3" class="clockwise" inkscape:connector-curvature="0" fill="none" stroke="#ffffff" stroke-width="3" d="M246.1,213.2l-10.4,22.5l-22.5,10.4l3.6,9.9l-3.6,9.9l22.5,10.4l10.4,22.5l9.9-3.6l9.9,3.6l10.4-22.5l22.5-10.4l-3.6-9.9l3.6-9.9l-22.5-10.4l-10.4-22.5l-9.9,3.6L246.1,213.2L246.1,213.2z"/>
  <path id="path4" class="sc" inkscape:connector-curvature="0" fill="none" stroke="#ffffff" stroke-width="3" d="M256,164l-14.6,31.6L256,201l14.6-5.4L256,164z M195.6,241.4L164,256l31.6,14.6L201,256L195.6,241.4z M316.4,241.4L311,256l5.4,14.6L348,256L316.4,241.4z M256,311l-14.6,5.4L256,348l14.6-31.6L256,311z"/>
  <path id="path5" class="clockwise" inkscape:connector-curvature="0" fill="none" stroke="#ffffff" stroke-width="3" d="M182.3,182.3l20.5,55.7l24.1-11.1l11.1-24.1L182.3,182.3L182.3,182.3z M329.7,182.3l-55.8,20.5l11.1,24.1l24.1,11.1L329.7,182.3L329.7,182.3z M202.8,273.9l-20.5,55.7l55.8-20.5l-11.1-24.1L202.8,273.9z M309.2,273.9l-24.1,11.1l-11.1,24.1l55.8,20.5L309.2,273.9L309.2,273.9z"/>
  <path id="path6" class="clockwise" inkscape:connector-curvature="0" fill="none" stroke="#ffffff" stroke-width="3" d="M197.3,197.3l10.9,29.5l12.8-5.9l5.9-12.8L197.3,197.3z M208.2,285.2l-10.9,29.5l29.5-10.9l-5.9-12.8L208.2,285.2z M285.2,208.2l5.9,12.8l12.8,5.9l10.9-29.5L285.2,208.2z M291.1,291.1l-5.9,12.8l29.5,10.9l-10.9-29.5L291.1,291.1z"/>
  <path id="path7" class="counterclockwise" inkscape:flatsided="false" inkscape:randomized="0" inkscape:rounded="0" sodipodi:arg1="0.78539816" sodipodi:arg2="1.1780972" sodipodi:cx="248.29247" sodipodi:cy="247.19141" sodipodi:r1="27.664173" sodipodi:r2="13.832087" sodipodi:sides="8" sodipodi:type="star" fill="none" stroke="#ffffff" stroke-width="3.1978" d="M274.4,274.4L261,268l-5,14l-5-14l-13.4,6.4L244,261l-14-5l14-5l-6.4-13.4L251,244l5-14l5,14l13.4-6.4L268,251l14,5l-14,5L274.4,274.4z"/>
  <path id="path8" class="counterclockwise" inkscape:flatsided="false" inkscape:randomized="0" inkscape:rounded="0" sodipodi:arg1="0.78539816" sodipodi:arg2="1.1780972" sodipodi:cx="248.29247" sodipodi:cy="247.19141" sodipodi:r1="27.664173" sodipodi:r2="13.832087" sodipodi:sides="8" sodipodi:type="star" fill="#ffffff" d="M264.8,264.8l-6.4-3.1l-2.4,6.7l-2.4-6.7l-6.4,3.1l3.1-6.4l-6.7-2.4l6.7-2.4l-3.1-6.4l6.4,3.1l2.4-6.7l2.4,6.7l6.4-3.1l-3.1,6.4l6.7,2.4l-6.7,2.4L264.8,264.8z"/>
  <path id="path9" class="counterclockwise-long" stroke="#1da57a" fill="#1da57a" inkscape:connector-curvature="0" d="M254.4,99.8v29c0.5,0,1.1,0,1.6,0s1.1,0,1.6,0v-29H254.4L254.4,99.8z M249.4,99.9l-3.2,0.2l1.5,29c1.1-0.1,2.1-0.1,3.2-0.1L249.4,99.9L249.4,99.9z M262.6,99.9l-1.5,29c1.1,0,2.1,0.1,3.2,0.1l1.5-29L262.6,99.9L262.6,99.9z M241.3,100.5l-3.2,0.3l3,28.9c1.1-0.1,2.1-0.3,3.2-0.4L241.3,100.5L241.3,100.5z M270.7,100.5l-3,28.8c1.1,0.1,2.2,0.2,3.2,0.4l3-28.9L270.7,100.5L270.7,100.5z M233.2,101.4L230,102l4.5,28.6c1.1-0.2,2.1-0.3,3.2-0.5L233.2,101.4L233.2,101.4z M278.8,101.4l-4.5,28.7c1.1,0.2,2.1,0.3,3.2,0.5L282,102L278.8,101.4L278.8,101.4z M225.1,102.9l-3.2,0.7l6,28.4c1-0.2,2.1-0.5,3.2-0.7L225.1,102.9z M286.9,102.9l-6,28.4c1.1,0.2,2.1,0.4,3.2,0.7l6-28.4L286.9,102.9z M217.1,104.7l-3.1,0.8l7.5,28c1-0.3,2.1-0.5,3.1-0.8L217.1,104.7L217.1,104.7z M294.9,104.7l-7.5,28c1,0.3,2.1,0.5,3.1,0.8l7.5-28L294.9,104.7L294.9,104.7z M209.2,106.9l-3.1,1l9,27.5c1-0.3,2-0.7,3.1-1L209.2,106.9z M302.8,106.9l-9,27.6c1,0.3,2,0.6,3.1,1l9-27.5L302.8,106.9z M201.5,109.6l-3,1.1l10.4,27.1c1-0.4,2-0.8,3-1.2L201.5,109.6z M310.5,109.6l-10.4,27c1,0.4,2,0.8,3,1.2l10.4-27.1L310.5,109.6z M193.9,112.6l-3,1.3l11.8,26.5c1-0.4,2-0.9,3-1.3L193.9,112.6z M318.1,112.6l-11.8,26.5c1,0.4,2,0.9,3,1.3l11.8-26.5L318.1,112.6z M186.5,116.1l-2.9,1.5l13.2,25.8c0.9-0.5,1.9-1,2.9-1.4L186.5,116.1L186.5,116.1z M325.5,116.1l-13.2,25.9c1,0.5,1.9,0.9,2.9,1.4l13.2-25.8L325.5,116.1z M179.3,119.9l-2.8,1.6l14.5,25.1c0.9-0.5,1.9-1.1,2.8-1.6L179.3,119.9z M332.7,119.9L318.2,145c0.9,0.5,1.9,1.1,2.8,1.6l14.5-25.1L332.7,119.9z M172.3,124.1l-2.7,1.8l15.8,24.3c0.9-0.6,1.8-1.2,2.7-1.7L172.3,124.1zM339.7,124.1L324,148.4c0.9,0.6,1.8,1.2,2.7,1.7l15.8-24.3L339.7,124.1L339.7,124.1z M165.5,128.7l-2.6,1.9l17,23.5h0c0.9-0.6,1.7-1.3,2.6-1.9L165.5,128.7L165.5,128.7z M346.5,128.7l-17,23.4c0.9,0.6,1.7,1.3,2.6,1.9c0,0,0,0,0,0l17-23.5L346.5,128.7L346.5,128.7z M158.9,133.6l-2.5,2l18.2,22.5c0.8-0.7,1.7-1.3,2.5-2L158.9,133.6L158.9,133.6z M353.1,133.6l-18.3,22.6c0.8,0.7,1.7,1.3,2.5,2l18.2-22.5L353.1,133.6L353.1,133.6z M152.7,138.8l-2.4,2.1l19.4,21.6c0.8-0.7,1.6-1.5,2.4-2.2L152.7,138.8L152.7,138.8z M359.3,138.8l-19.4,21.5c0.8,0.7,1.6,1.4,2.4,2.2l19.4-21.6L359.3,138.8L359.3,138.8z M146.7,144.4l-2.3,2.3l20.5,20.5c0.7-0.8,1.5-1.5,2.3-2.3L146.7,144.4L146.7,144.4z M365.3,144.4l-20.5,20.5c0.8,0.7,1.5,1.5,2.3,2.3l20.5-20.5L365.3,144.4L365.3,144.4z M141,150.3l-2.1,2.4l21.5,19.4c0.7-0.8,1.4-1.6,2.2-2.4L141,150.3z M371,150.3l-21.6,19.4c0.7,0.8,1.5,1.6,2.2,2.4l21.5-19.4L371,150.3z M135.6,156.4l-2,2.5l22.6,18.3c0.7-0.8,1.3-1.7,2-2.5L135.6,156.4L135.6,156.4zM376.4,156.4l-22.5,18.2c0.7,0.8,1.3,1.7,2,2.5l22.6-18.3L376.4,156.4L376.4,156.4z M130.6,162.9l-1.9,2.6l23.4,17c0.6-0.9,1.3-1.7,1.9-2.6v0L130.6,162.9L130.6,162.9z M381.4,162.9l-23.5,17c0,0,0,0,0,0c0.6,0.9,1.3,1.7,1.9,2.6l23.4-17L381.4,162.9L381.4,162.9z M125.9,169.6l-1.8,2.7l24.3,15.8c0.6-0.9,1.2-1.8,1.7-2.7L125.9,169.6z M386.1,169.6l-24.3,15.8c0.6,0.9,1.2,1.8,1.7,2.7l24.3-15.8L386.1,169.6z M121.5,176.5l-1.6,2.8l25.1,14.5c0.5-0.9,1.1-1.9,1.6-2.8L121.5,176.5L121.5,176.5z M390.5,176.5L365.4,191c0.5,0.9,1.1,1.9,1.6,2.8l25.1-14.5L390.5,176.5z M117.5,183.6l-1.5,2.9l25.9,13.2c0.5-1,0.9-1.9,1.4-2.9L117.5,183.6L117.5,183.6z M394.5,183.6l-25.8,13.2c0.5,0.9,1,1.9,1.4,2.9l25.9-13.2L394.5,183.6L394.5,183.6z M113.9,191l-1.3,3l26.5,11.8c0.4-1,0.9-2,1.3-3C140.4,202.8,113.9,191,113.9,191z M398.1,191l-26.5,11.8c0.4,1,0.9,2,1.3,3l26.5-11.8L398.1,191zM110.7,198.5l-1.1,3l27,10.4c0.4-1,0.8-2,1.2-3C137.8,208.9,110.7,198.5,110.7,198.5z M401.3,198.5l-27.1,10.4c0.4,1,0.8,2,1.2,3l27-10.4L401.3,198.5L401.3,198.5z M107.9,206.2l-1,3.1l27.6,9c0.3-1,0.6-2,1-3.1L107.9,206.2L107.9,206.2z M404.1,206.2l-27.5,9c0.3,1,0.7,2,1,3.1l27.6-9L404.1,206.2L404.1,206.2z M105.5,214l-0.8,3.1l28,7.5c0.3-1,0.5-2.1,0.8-3.1C133.5,221.5,105.5,214,105.5,214z M406.5,214l-28,7.5c0.3,1,0.5,2.1,0.8,3.1l28-7.5L406.5,214L406.5,214z M103.5,221.9l-0.7,3.2l28.4,6c0.2-1.1,0.4-2.1,0.7-3.2L103.5,221.9z M408.5,221.9l-28.4,6c0.2,1,0.5,2.1,0.7,3.2l28.4-6L408.5,221.9L408.5,221.9zM102,230l-0.5,3.2l28.7,4.5c0.2-1.1,0.3-2.1,0.5-3.2C130.6,234.5,102,230,102,230z M410,230l-28.6,4.5c0.2,1.1,0.3,2.1,0.5,3.2l28.7-4.5L410,230L410,230z M100.8,238.1l-0.3,3.2l28.8,3c0.1-1.1,0.2-2.2,0.4-3.2L100.8,238.1z M411.2,238.1l-28.9,3c0.1,1.1,0.3,2.1,0.4,3.2l28.8-3L411.2,238.1L411.2,238.1z M100.1,246.2l-0.2,3.2l29,1.5c0-1.1,0.1-2.1,0.1-3.2L100.1,246.2L100.1,246.2z M411.9,246.2l-29,1.5c0.1,1.1,0.1,2.1,0.1,3.2l29-1.5L411.9,246.2L411.9,246.2z M99.8,254.4v3.2h29c0-0.5,0-1.1,0-1.6c0-0.5,0-1.1,0-1.6C128.8,254.4,99.8,254.4,99.8,254.4z M383.2,254.4c0,0.5,0,1.1,0,1.6c0,0.5,0,1.1,0,1.6h29v-3.2H383.2zM128.9,261l-29,1.5l0.2,3.2l29-1.5C129,263.2,128.9,262.1,128.9,261L128.9,261z M383.1,261c0,1.1-0.1,2.1-0.1,3.2l29,1.5l0.2-3.2L383.1,261L383.1,261z M129.3,267.7l-28.8,3l0.3,3.2l28.9-3C129.5,269.8,129.4,268.8,129.3,267.7L129.3,267.7z M382.7,267.7c-0.1,1.1-0.2,2.2-0.4,3.2l28.9,3l0.3-3.2L382.7,267.7L382.7,267.7z M130.1,274.3l-28.7,4.5l0.5,3.2l28.6-4.5C130.4,276.4,130.3,275.4,130.1,274.3L130.1,274.3z M381.9,274.3c-0.2,1.1-0.3,2.1-0.5,3.2L410,282l0.5-3.2L381.9,274.3L381.9,274.3z M131.2,280.9l-28.4,6l0.7,3.2l28.4-6C131.6,283,131.4,281.9,131.2,280.9z M380.8,280.9c-0.2,1.1-0.4,2.1-0.7,3.2l28.4,6l0.7-3.2L380.8,280.9L380.8,280.9z M132.7,287.4l-28,7.5l0.8,3.1l28-7.5C133.2,289.5,133,288.4,132.7,287.4z M379.3,287.4c-0.3,1-0.5,2.1-0.8,3.1l28,7.5l0.8-3.1L379.3,287.4L379.3,287.4z M134.5,293.8l-27.6,9l1,3.1l27.5-9C135.1,295.8,134.8,294.8,134.5,293.8L134.5,293.8z M377.5,293.8c-0.3,1-0.6,2-1,3.1l27.5,9l1-3.1L377.5,293.8L377.5,293.8zM136.6,300.1l-27,10.4l1.1,3l27.1-10.4C137.4,302.1,137,301.1,136.6,300.1z M375.4,300.1c-0.4,1-0.8,2-1.2,3l27.1,10.4l1.1-3L375.4,300.1L375.4,300.1z M139.1,306.3l-26.5,11.8l1.3,3l26.5-11.8C140,308.3,139.5,307.3,139.1,306.3z M372.9,306.3c-0.4,1-0.9,2-1.3,3l26.5,11.8l1.3-3L372.9,306.3z M141.9,312.3l-25.9,13.2l1.5,2.9l25.8-13.2C142.9,314.2,142.4,313.3,141.9,312.3L141.9,312.3z M370.1,312.3c-0.5,1-0.9,1.9-1.4,2.9l25.8,13.2l1.5-2.9L370.1,312.3L370.1,312.3z M145,318.2l-25.1,14.5l1.6,2.8l25.1-14.5C146.1,320.1,145.5,319.1,145,318.2z M367,318.2c-0.5,0.9-1.1,1.9-1.6,2.8l25.1,14.5l1.6-2.8L367,318.2z M148.4,324l-24.3,15.8l1.8,2.7l24.3-15.8C149.6,325.8,149,324.9,148.4,324z M363.6,324c-0.6,0.9-1.2,1.8-1.7,2.7l24.3,15.8l1.8-2.7L363.6,324zM152.1,329.5l-23.4,17l1.9,2.6l23.5-17c0,0,0,0,0,0C153.4,331.2,152.7,330.4,152.1,329.5L152.1,329.5z M359.9,329.5c-0.6,0.9-1.3,1.7-1.9,2.6c0,0,0,0,0,0l23.5,17l1.9-2.6L359.9,329.5L359.9,329.5z M156.1,334.8l-22.6,18.3l2,2.5l22.5-18.2C157.5,336.5,156.8,335.6,156.1,334.8L156.1,334.8z M355.9,334.8c-0.7,0.8-1.3,1.7-2,2.5l22.5,18.2l2-2.5L355.9,334.8L355.9,334.8zM160.4,339.9l-21.5,19.4l2.1,2.4l21.6-19.4C161.8,341.5,161.1,340.8,160.4,339.9z M351.6,339.9c-0.7,0.8-1.4,1.6-2.2,2.4l21.6,19.4l2.1-2.4L351.6,339.9z M164.9,344.8l-20.5,20.5l2.3,2.3l20.5-20.5C166.4,346.4,165.6,345.6,164.9,344.8L164.9,344.8z M347.1,344.8c-0.7,0.8-1.5,1.5-2.3,2.3l20.5,20.5l2.3-2.3L347.1,344.8L347.1,344.8z M169.7,349.5L150.3,371l2.4,2.1l19.4-21.5C171.2,350.9,170.5,350.2,169.7,349.5L169.7,349.5z M342.3,349.5c-0.8,0.7-1.6,1.5-2.4,2.2l19.4,21.5l2.4-2.1L342.3,349.5L342.3,349.5z M174.7,353.9l-18.2,22.5l2.5,2l18.3-22.6C176.4,355.2,175.5,354.5,174.7,353.9L174.7,353.9z M337.3,353.9c-0.8,0.7-1.7,1.3-2.5,2l18.3,22.6l2.5-2L337.3,353.9L337.3,353.9z M179.9,357.9l-17,23.5l2.6,1.9l17-23.4C181.6,359.3,180.8,358.6,179.9,357.9L179.9,357.9L179.9,357.9z M332.1,357.9c-0.9,0.6-1.7,1.3-2.6,1.9l17,23.4l2.6-1.9L332.1,357.9L332.1,357.9L332.1,357.9z M185.4,361.8l-15.8,24.3l2.7,1.8l15.8-24.3C187.1,363,186.2,362.4,185.4,361.8z M326.6,361.8c-0.9,0.6-1.8,1.2-2.7,1.7l15.8,24.3l2.7-1.8L326.6,361.8L326.6,361.8z M191,365.4l-14.5,25.1l2.8,1.6l14.5-25.1C192.9,366.5,191.9,365.9,191,365.4z M321,365.4c-0.9,0.5-1.9,1.1-2.8,1.6l14.5,25.1l2.8-1.6L321,365.4z M196.8,368.6l-13.2,25.8l2.9,1.5l13.2-25.9C198.7,369.6,197.8,369.1,196.8,368.6L196.8,368.6z M315.2,368.6c-0.9,0.5-1.9,1-2.9,1.4l13.2,25.9l2.9-1.5L315.2,368.6z M202.8,371.6L191,398.1l3,1.3l11.8-26.5C204.7,372.5,203.7,372,202.8,371.6z M309.2,371.6c-1,0.4-2,0.9-3,1.3l11.8,26.5l3-1.3L309.2,371.6z M208.9,374.2l-10.4,27.1l3,1.1l10.4-27C210.9,375,209.9,374.6,208.9,374.2z M303.1,374.2c-1,0.4-2,0.8-3,1.2l10.4,27l3-1.1L303.1,374.2z M215.2,376.5l-9,27.5l3.1,1l9-27.6C217.2,377.2,216.2,376.9,215.2,376.5zM296.8,376.5c-1,0.3-2,0.7-3.1,1l9,27.6l3.1-1L296.8,376.5z M221.5,378.5l-7.5,28l3.1,0.8l7.5-28C223.6,379,222.5,378.8,221.5,378.5z M290.5,378.5c-1,0.3-2.1,0.5-3.1,0.8l7.5,28l3.1-0.8L290.5,378.5z M228,380.1l-6,28.4l3.2,0.7l6-28.4C230.1,380.6,229,380.4,228,380.1z M284,380.1c-1,0.2-2.1,0.5-3.2,0.7l6,28.4l3.2-0.7L284,380.1z M234.5,381.4L230,410l3.2,0.5l4.5-28.7C236.6,381.7,235.6,381.6,234.5,381.4L234.5,381.4z M277.5,381.4c-1.1,0.2-2.1,0.3-3.2,0.5l4.5,28.7l3.2-0.5L277.5,381.4L277.5,381.4z M241.1,382.3l-3,28.9l3.2,0.3l3-28.8C243.2,382.6,242.2,382.5,241.1,382.3L241.1,382.3z M270.9,382.3c-1.1,0.1-2.1,0.3-3.2,0.4l3,28.8l3.2-0.3L270.9,382.3L270.9,382.3z M247.7,383l-1.5,29l3.2,0.2l1.5-29C249.9,383.1,248.8,383,247.7,383L247.7,383z M264.3,383c-1.1,0.1-2.1,0.1-3.2,0.1l1.5,29l3.2-0.2L264.3,383L264.3,383zM254.4,383.2v29h3.2v-29c-0.5,0-1.1,0-1.6,0S254.9,383.2,254.4,383.2L254.4,383.2z"/>
  <path id="path10" sodipodi:cx="256" class="scale1" sodipodi:cy="258.20215" sodipodi:rx="93.5914" sodipodi:ry="93.5914" sodipodi:type="arc" fill="none" stroke="#1da57a" stroke-width="1.733" d="M418,256c0,89.5-72.5,162-162,162S94,345.5,94,256S166.5,94,256,94S418,166.5,418,256z"/>
  <path id="path11" class="clockwise-long" inkscape:connector-curvature="0" fill="none" stroke="#1da57a" stroke-width="3" d="M227.4,58.1c-15.9,2.3-31.2,6.4-45.6,12.2l29.4,18.6L227.4,58.1z M284.6,58.1l16.2,30.8l29.4-18.6C315.7,64.5,300.5,60.4,284.6,58.1zM132.3,98.9c-12.4,9.8-23.6,21-33.4,33.4l34.8,1.4L132.3,98.9L132.3,98.9z M379.7,98.9l-1.4,34.8l34.8-1.4C403.3,119.9,392.1,108.7,379.7,98.9z M70.3,181.8c-5.8,14.5-9.9,29.7-12.2,45.6l30.8-16.2L70.3,181.8z M441.7,181.8l-18.6,29.4l30.8,16.2C451.6,211.5,447.5,196.3,441.7,181.8z M58.1,284.6c2.3,15.9,6.4,31.2,12.2,45.6l18.6-29.4L58.1,284.6z M453.9,284.6l-30.8,16.2l18.6,29.4C447.5,315.7,451.6,300.5,453.9,284.6L453.9,284.6z M133.7,378.3l-34.8,1.4c9.8,12.4,21,23.6,33.4,33.4L133.7,378.3z M378.3,378.3l1.4,34.8c12.4-9.8,23.6-21,33.4-33.4L378.3,378.3z M211.2,423.1l-29.4,18.6c14.5,5.8,29.7,9.9,45.6,12.2L211.2,423.1L211.2,423.1z M300.8,423.1l-16.2,30.8c15.9-2.3,31.2-6.4,45.6-12.2L300.8,423.1L300.8,423.1z"/>
  <path id="path12" class="clockwise-long" inkscape:flatsided="false" inkscape:randomized="0" inkscape:rounded="0" sodipodi:arg1="0.52359878" sodipodi:arg2="0.78539817" sodipodi:cx="254.34839" sodipodi:cy="256" sodipodi:r1="183.68288" sodipodi:r2="125.9413" sodipodi:sides="12" sodipodi:type="star" fill="none" stroke="#1da57a" stroke-width="2.3143" d="M462.2,375.1l-90.8-3.6l3.6,90.8l-76.8-48.5L256,494.1l-42.3-80.4l-76.8,48.5l3.6-90.8l-90.8,3.6l48.5-76.8L17.9,256l80.4-42.3l-48.5-76.8l90.8,3.6l-3.6-90.8l76.8,48.5L256,17.9l42.3,80.4l76.8-48.5l-3.6,90.8l90.8-3.6l-48.5,76.8l80.4,42.3l-80.4,42.3L462.2,375.1z"/>
  <path id="path13" class="clockwise-long" inkscape:connector-curvature="0" fill="none" stroke="#1da57a" stroke-width="3" d="M256,34.7l-32.9,62.6c10.6-2.2,21.6-3.4,32.9-3.4c11.3,0,22.3,1.2,32.9,3.4L256,34.7z M145.3,64.3l2.8,70.8c16.4-14.6,35.7-25.9,57-33L145.3,64.3zM366.7,64.3l-59.8,37.8c21.3,7,40.6,18.4,57,33L366.7,64.3z M64.3,145.3l37.8,59.8c7-21.3,18.4-40.6,33-57L64.3,145.3zM447.7,145.3l-70.8,2.8c14.6,16.4,25.9,35.7,33,57L447.7,145.3z M97.3,223.1L34.7,256l62.6,32.9C95.1,278.3,94,267.3,94,256C94,244.7,95.1,233.7,97.3,223.1z M414.7,223.1c2.2,10.6,3.4,21.6,3.4,32.9c0,11.3-1.2,22.3-3.4,32.9l62.6-32.9L414.7,223.1zM102.1,306.8l-37.8,59.8l70.8-2.8C120.5,347.5,109.2,328.1,102.1,306.8z M409.9,306.8c-7,21.3-18.4,40.6-33,57l70.8,2.8L409.9,306.8L409.9,306.8z M148.2,376.9l-2.8,70.8l59.8-37.8C183.9,402.8,164.5,391.5,148.2,376.9z M363.8,376.9c-16.4,14.6-35.7,25.9-57,33l59.8,37.8L363.8,376.9z M223.1,414.7l32.9,62.6l32.9-62.6c-10.6,2.2-21.6,3.4-32.9,3.4C244.7,418,233.7,416.9,223.1,414.7L223.1,414.7z"/>
  <path id="path14" class="clockwise-long" inkscape:connector-curvature="0" fill="none" stroke="#1da57a" stroke-width="3" d="M256,52l-11.9,22.6L256,92.8l11.9-18.2L256,52z M154,79.4l1,25.4l19.3,9.8l1.2-21.6L154,79.4L154,79.4z M358,79.4L336.4,93l1.2,21.6l19.3-9.8L358,79.4L358,79.4z M79.4,154L93,175.6l21.6-1.2l-9.8-19.3L79.4,154z M432.6,154l-25.4,1l-9.8,19.3l21.6,1.2L432.6,154z M74.6,244.1L52,256l22.6,11.9L92.8,256L74.6,244.1z M437.4,244.1L419.2,256l18.2,11.9L460,256L437.4,244.1z M93,336.4L79.4,358l25.4-1l9.8-19.3L93,336.4z M419,336.4l-21.6,1.2l9.8,19.3l25.4,1L419,336.4z M174.4,397.4l-19.3,9.8l-1,25.4l21.5-13.6L174.4,397.4L174.4,397.4zM337.6,397.4l-1.2,21.6l21.5,13.6l-1-25.4L337.6,397.4L337.6,397.4z M256,419.2l-11.9,18.2L256,460l11.9-22.6L256,419.2z"/>
</svg>
```
可以看到每个path都有一个class，之后我们会用在 anime.js 中用 CSS 选择器对这些 path 进行变换。

## 旋转的魔法阵
这一部分比较简单，CSS 动画也可以做到。原理就是 CSS3 的 transform: rotate()属性，然后对不同 class 使用不同的旋转方向和速度。

```CSS
@keyframes rotate-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-counterclockwise {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.clockwise {
  animation: rotate-clockwise 5s linear 0s infinite;
}
.counterclockwise {
  animation: rotate-counterclockwise 5s linear 0s infinite;
}
.clockwise-long {
  animation: rotate-clockwise 20s linear 0s infinite;
}
.counterclockwise-long {
  animation: rotate-counterclockwise 30s linear 0s infinite;
}
path {
  transform-origin: center;
}
```

值得注意的是 transform-origin 属性，如果 transform-origin 不在圆心的话旋转起来就会鬼畜。

```javascript
  anime({
    targets: ".clockwise",
    rotate: ["0deg", "360deg"],
    loop: true,
    duration: 5000,
    easing: "linear",
    offset: 0
  })
  anime({
    targets: '.counterclockwise',
    rotate: ['360deg','0deg'],
    loop: true,
    duration: 10000,
    easing: 'linear',
    offset: 0
  })
  anime({
    targets: '.counterclockwise-long',
    rotate: ['360deg','0deg'],
    loop: true,
    duration: 10000,
    easing: 'linear',
    offset: 0
  })
  anime({
    targets: '.clockwise-long',
    rotate: ['0deg','360deg'],
    loop: true,
    duration: 20000,
    easing: 'linear',
    offset: 0
  })
  anime({
    targets: '.sc',
    rotate: ['0deg','360deg'],
    scale: [1.3,1.3],
    loop: true,
    duration: 5000,
    easing: 'linear',
    offset: 0
  })
```

anime.js 的操作方法类似，不过注意不建议用 timeline。每个 class 旋转的周期不一样，用 timeline 会造成周期短的旋转完停下来等待，除非强行按比例缩放 duration 和 totate 角度让所有图案的旋转周期相同（最小公倍数？）。

## 魔法阵的出现动画
这个完全就发挥想象力了，可以变换的内容很多，比如 scale, rotate, translate, dasharray 甚至 rotate3D，怎么喜欢怎么来就行。这里就用 anime.js 了，毕竟 CSS 莫法控制动画完成后操作（魔法阵旋转）

```javascript
var rotateloop = function(){
  anime({
    targets: ".clockwise",
    rotate: ["0deg", "360deg"],
    loop: true,
    duration: 5000,
    easing: "linear",
    offset: 0
  })
  //...
  //跟上面那段的代码一样，洗净备好，稍后再用
}
```
```javascript
$(document).ready(function(){
  document.getElementById('demo').style.display = 'block'
  var timeline = anime.timeline()
  timeline.add({
    targets: '.counterclockwise',
    strokeDasharray: {
      value: [(el) => `0 ${anime.setDashoffset(el)/8}`, (el) => `${anime.setDashoffset(el)/8} ${0}`],
      duration: 2000
    },
    // scale: [0,1],
    rotate: ['360deg','-360deg'],
    duration: 10000,
    easing: 'linear',
    offset: 0
  }).add({
    targets: '.scale0',
    scale: [0.001,1],
    duration: 3500,
    // easing: 'easeInOutSine',
    elasticity: 20,
    offset: 500
  }).add({
    targets: '.clockwise,.sc',
    scale: {
      value: [0.001, 1],
      duration: 2000,
      elasticity: 20
    },
    rotate: {
      value: ['-576deg','0deg'],
      duration: 8000,
      easing: 'linear'
    },
    duration: 1000,
    offset: 2000
  }).add({
    targets: '.sc',
    scale: {
      value: [1, 1.3],
      duration: 1000
    },
    rotate: {
      value: ['-360deg','0deg'],
      duration: 5000
    },
    offset: 5000,
    easing: 'linear'
  }).add({
    targets: '.scale1',
    scale: [0.001, 1],
    duration: 2000,
    easing: 'linear',
    offset: 5000
  }).add({
    targets: '.counterclockwise-long',
    scale: {
      value: [0.01, 1],
      duration: 1500,
      // elasticity: 200
      easing: 'easeInOutSine'
    },
    rotate: {
      value: ['180deg','0deg'],
      duration: 5000,
      easing: 'linear'
    },
    offset: 5000
  }).add({
    targets: '.clockwise-long',
    scale: {
      value: [0.01, 1],
      duration: 2000,
      // elasticity: 100
      easing: 'easeInOutSine'
    },
    rotate: {
      value: ['-81deg','0deg'],
      duration: 4500,
      easing: 'linear'
    },
    offset: 5500,
    complete: rotateloop
  })
})
```
timeline 用起来确实是很爽的，只要 add 各种变换就行了
* rotate[X/Y/Z/3D] 旋转
* translate[X/Y/Z] 平移
* scale 缩放
* strokeDasharray 虚线实-虚样式 [参见 MDN](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray)
* strokeDashoffset 虚线样式偏移 [参见 MDN](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dashoffset)
* 其实还有路径变形，填充，遮罩之类的高级玩法

不过由于 anime.js 自身的限制（倒不如说是 anime.js 不会合并 transform），同一个元素的 transform 不能分开到两个 anime 对象中（每个对象都是独立运行的）,这样只会有后一个生效，例如
```js
anime({
	targers: '#demo',
	rotate: '30deg'
})
anime({
	targers: '#demo',
	scale: 1.5
})

//或者
anime.timeline().add({
	targers: '#demo',
	rotate: '30deg'
}).add({
	targers: '#demo',
	scale: 1.5
})
```
然后就是各种参数的设定了，要注意动画的连续性（比如转到 30° 突然变回 0° 开始转），这里我是算好了旋转的速度然后根据 duration 计算旋转角度。最后就是可以用一些缓动函数来让魔法阵显得不那么生硬。

## 参考资料
[Anime.js Documentation](http://animejs.com/documentation/)
[缓动函数速查表](https://easings.net/)
[MDN SVG](https://developer.mozilla.org/zh-CN/docs/Web/SVG)
还有可以百度/谷歌到的各种 svg 动画的做法

如有问题，欢迎留言 / [Email me](mailto:Semperia@outclook.com)

[SVG动画] 制作一个中二的魔法阵

添加新评论

最新文章

归档

最近回复

分类

其它