原神任意元素转换大法（误-低调大师

原神任意元素转换大法（误

2021-05-05 664

标题党勿怪 ε=ε=ε=┌(；・＿・)┘

svg形变动画以前有翻译过一篇文章（https://my.oschina.net/codingDog/blog/2054879），不过那里的动画实现方式是 SMIL 和 css，两者的兼容性和局限性都不小，前者需要你有一定的设计能力，使用相同的锚点数来对图形进行转换，而且有被新标准废弃的趋势，后者有前面的所有缺点，唯二的优势是写起来清晰简洁，而且正在被浏览器逐步支持。

所以这次，我就用了一个在flash时代就鼎鼎大名的前端动画框架——GSAP。gsap提供了动画时间轴的基地，核心的实现是它的一个非常强大的收费插件：MorphSVGPlugin。相较于SMIL和css，它的优势非常明显：

① 可以在不同的形状之间做形变动画，因为插件对所有形状自己实现了一套转化为path路径的算法

② 可以无视两个形状之间的锚点数，插件会自动补足

③ 更平滑的转场，不需要来事先设计锚点位置，插件会自动计算出相邻的锚点来进行形变

④ 只要浏览器支持svg即可创建动画，因为插件只是不停地修改属性值，并没有用到新标准的api。

ok，打完免费广告，代码量不大，直接放出源码。（这里的cdn使用的是社区为codepen提供的特殊版本，不可以进行商用开发，小伙伴们需要注意）

ps：由于网上找不到元素的矢量图，我直接用AI进行了重绘，为了避免锚点过多影响性能，在尽可能还原的基础上去除了部分锚点，位图和矢量图的原稿我就放到文末了，有兴趣自取~

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>元素转换大法</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
  <script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html {
      user-select: none;
    }
    body {
      text-align: center;
    }
    ul {
      list-style: none;
      margin-top: 30px;
    }
    li {
      display: inline-block;
      width: 50px;
      height: 50px;
      font-size: 30px;
      border-radius: 50%;
      background-color: lightgray;
      margin-right: 30px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      font-family: 'SimHei', monospace;
      box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.6);
    }
    li:active {
      transform: translate(1px, 1px);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
    }
    li.pyro {
      background-color: #ff6641;
    }
    li.anemo {
      background-color: #49f2ac;
    }
    li.geo {
      background-color: #efd458;
    }
    li.hydro {
      background-color: #05e6ff;
    }
    li.cryo {
      background-color: #8fccd9;
    }
    li.electro {
      background-color: #fca7ff;
    }
    li.dendro {
      background-color: #a4e829;
    }
    svg {
      width: 500px;
      height: 500px;
      margin-top: 20px;
    }
    path {
      fill: url(#bg);
    }
  </style>
</head>
<body>

<ul>
  <li class="pyro">火</li>
  <li class="anemo">风</li>
  <li class="geo">岩</li>
  <li class="hydro">水</li>
  <li class="cryo">冰</li>
  <li class="electro">雷</li>
  <li class="dendro">草</li>
</ul>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 400 400">
  <linearGradient id="bg" gradientUnits="userSpaceOnUse" x1="200" y1="400" x2="200" y2="0">
    <stop id="bg-stop-1" offset="0"/>
    <stop id="bg-stop-2" offset="1"/>
  </linearGradient>
  <path id="path" d=""/>
</svg>

<script>
  const elemental = {
    pyro: {
      path: `M195.9,20.9C179.1,97.2,87.5,139,211.9,185.8c91.8,22,86.2,142-19.6,126
              c-31.7-5.3-33.3-42.6-9.8-57.7c-77.7-21.4-48.4,98.3,65.7,62c56.5-16.3,78-67,55.4-115c18,11.3,35.8,30.1,31.1,53.7
              c-14.8,46.7-94,64-131.7,98.7c-50.4-39.2-204.9-81.4-98-158.9c-63.4,68.8,52.6,123.8,29.1,100.9c-37.9-45,11.1-108.6,66.9-106.6
              c2.4-2.1-27.2-10.8-31.6-15.4c-24.4-13.8-39.2-33.5-39.2-52c0-4.9,0-4.9-2.2-0.8c-22.8,48.1-88.9,93.8-75.2,151.2
              c34,48.5,108.7,68.1,148.8,109.6c10.2-2.9,24-21,34.6-26.5c14.1-10.6,39.1-25.3,54-33.5c73.5-34.6,76.5-94.4,14.3-143.1
              c-16.7-10.1-36.7-45.6-38.8-63.7c-18.9,12-26.2,48.8-10.5,64.7c4.3,2.6,15.8,24.7,10.6,21.2c-30.1-27.5-43.9-59.3-26.5-103.8
              c-25.7,11.8-59.6,54.7-30.7,77.1c-59.8-49.5,40.7-68.2,17.8-112.9C225.3,55.6,197.8,12.2,195.9,20.9 M194.8,207.6
              c-16,0.5-41.8,20.3-38.1,31.2c46.6-21.9,78.1,18,61.5,51.9C280.8,274.7,251,198.3,194.8,207.6`,
      color1: '#ff6641',
      color2: '#ec3634',
    },
    anemo: {
      path: `M257.2,24.2c32.9,53.7,7.5,124.5-39.4,163c-2.9,2.6-2.9,2.7,3.7,1c33.8-8.8,70.6-26,86.2-56.8
            C328.2,89.9,303.3,35.4,257.2,24.2 M139.1,25.2c-38.9,12.5-60.3,52-52.5,90.4c6.4,30,32,49.6,62.6,62.8c9.8,4.3,37.7,12.9,35,10.7
            c-47.8-37.4-74.9-111.5-41.8-164.5C142.5,24.2,141.7,24.3,139.1,25.2 M63.3,77.2c-25.7,43.9-22.8,97.8,30.7,115.7
            c9.6,4.2,31.9,4.8,45.6,9.3c51.8,11.2,79.1,66.8,25.7,86.8c-6.5,3.7-10-1.4-15.8-4.7c-5-0.1-12.2-0.4-14.4,2.7
            c25.8,20.7,47.2,51.6,63.2,85.8c2.2,4.3,1.3,3.8,3.5-0.4c13.6-28.9,31.4-56.3,51.8-75.1c-0.1-0.4,5.4-5.6,8.8-8.3
            c2.3-1.8,2.5-2,2-2.5c-1.5-2.2-9.6-2.6-13.9-2.2c-5.7,3-9.2,8.4-15.7,4.7c-60.7-24.4-18.3-84.7,42.9-90.6
            c55.1-3,88.9-43.7,69.3-97.7c-0.2-0.8-1.2-3.4-1.2-4.2c-0.3-0.1-2.3-5-2.3-5.6c0-0.2-0.1-0.4-0.2-0.4c-0.2,0-1.3-2.6-1.3-3
            c-1.7-2.4-1.8-4.5-3.7-7.1c-2.5-4.7-3.2-5.2-3.2-2.2c0.1,1.5-0.9,5.8-1,7.2c-6.9,36.8-24.5,71-58.7,90.1
            c-26.1,13.9-70,33.9-74.5,56.3c-0.9,2.8-1,2.8-1.6,0.5c-1.5-14.9-33.8-37-56-47c-14.2-6.3-36.7-19.5-45.8-31.5
            c-17.1-18.2-29.7-48.3-33.1-78L63.3,77.2 M27.1,147.6c-5.7,20-7.6,45.7,2.1,63.8c10,21.6,37.5,36.6,59.8,33.2
            c12.7-1.8,29.9-7.7,46.5-16c15.3-9.2,32.8-2.5,34.7,11.9c1.6,3.5-1.6,14.5-4.8,15.3c-4,5.1-15.7,7.3-23.2,7.3c-2,0-2-0.2-1.5,3.6
            c1.4,12.2,17.1,15.2,26.4,10.7c12.8-5.5,17.4-26.4,11.2-41.7c-7.3-17.5-28.4-27.3-60.6-28.1C74.3,207.6,55.9,187.3,27.1,147.6
             M370,151c-10.1,14.9-23.3,30.4-33.5,39c-30,29.9-103,4.3-116.1,48.9c-3.5,13-1.9,28.2,9.1,36.8c11.6,8.8,31.1,1.7,29.9-12.5
            c-47.7,1.9-33.2-53.3,4.1-35.1c11.6,6,33.1,14.1,43.6,15.8c44.1,7.2,78.1-32.3,69.4-79.4c-0.5-3.3-0.9-5.4-2.4-11.8
            C372.5,146.4,372.9,146.6,370,151 M201.3,281.7c5,9.9,13.4,17.2,23.4,20.1c2.5,0.7,2.5,0.8-0.1,1.5c-9.1,2.6-18.3-0.9-24.7-7.8
            c-6.4,6.9-15.6,10.4-24.7,7.8c-2.5-0.7-2.6-0.9-0.3-1.5C197.7,295.7,198.8,272.8,201.3,281.7 M202.1,309.6c4,3.7,8.7,6.4,13.5,8.6
            c-26.1,31.7-4.6,34.4-31.3-0.1c4.9-1.8,11.7-6.7,15.6-10.4C200,307.7,200.9,308.5,202.1,309.6`,
      color1: '#4bfbb2',
      color2: '#49f2ac',
    },
    geo: {
      path: `M198.8,22.6C156.9,52.3,116.6,91,84.3,128.8c-1.6,22.7,18,58.4,27.8,77.3
              c24.1-23.3,61.2-65.5,89.9-68.6c23.6,24.2,48.9,41.2,13,65.1c-16.2,16-29.7,17.7-6,37c20-13.5,44.8-34.2,62.1-52
              c-11.1-25.9-46.6-71.8-71.2-94c-19.9,14.1-44.5,37-64,53.2c-38.7,32.3,44.4-93.9,64.1-105c53.1,57.8,103.9,134,130,209.4
              c41.4-54.4,47.5-43.3,1.8-103C294.3,101.4,249.3,52.3,198.8,22.6 M67.3,151.7c-10,12.3-27.3,36.5-34.3,48.3
              c29.8,51.3,77.6,105.6,123.2,144.4c14.9,9.9,33.3,32.7,46.4,31.8c42-30.3,78-64.9,111.6-103.5c6.6-22-18.6-62-26.3-79
              c-24.9,26.2-56.5,57.3-87.9,70.3c-16.9-14.2-30.7-31.5-35.9-46.5c12.1-11.7,26.3-25.7,39-36.7c8.3-4-11.2-19.1-12-20.5
              c-12.6,7.7-52.8,40.6-62.1,52.2c15.3,31.5,34.5,54.8,57.4,80.2c18.2,20.8,12.8,13.2,33.7-2c15.8-13.3,30.8-26.2,46.6-39.8
              c21-21.2-6.4,30.4-12.6,40.1c-18,27.6-29.3,41.2-52,65.1c-3.9,6.4-11.5-10.6-15.9-13c-30.6-35.9-60.5-78.1-83.7-120.7
              C90.2,207.5,75.1,149.1,67.3,151.7`,
      color1: '#efd458',
      color2: '#ba840a',
    },
    hydro: {
      path: `M189.8,27.5C150.5,30,115.1,44.8,85.4,69C69.1,84.1,36.2,115.3,47,137.3
              c6.5,13.3,31.5,17.3,39.1,6.3c49-73.8,162.4-80.1,218.6-12.4c55.5,60.4,39.5,166.3-31.4,207.6c94.7-71.1,36.6-237.4-99.4-212.7
              c-23.2,4.5-33.3,12.8-33.3,27.1c0,11.4,5.1,19.9,14,23.1c9.6,2.8,17.2-0.9,27.1-2.8C248.5,158.9,311,230,286.8,292.5
              c-22.2,65.2-98,75.6-155.1,50.6c-10.5-3.5-21.6-8.4-30.4-13.4c-3.5-2-3.4-2-2.4,0.4c5.1,16.5,35.9,32.6,59.4,37.5
              c137.5,34.5,257.9-108.8,199.4-237.9C329.1,64.7,260.2,23.2,189.8,27.5 M46.3,178.4c-39.7,11.2-9.9,68.8,22.5,41.4
              C86,203.2,70.1,172.9,46.3,178.4 M191.7,221c-91.3,14.5-56.3,149.4,29.9,119.2c10.5-2.9,29-19.4,30.8-26.9
              c-79.8,68.3-130.6-45.2-60.3-53.3c10.5,0,18,6.6,20.3,17.9c3,24.8,38.3,26.5,43.8,3.5C264.6,244.8,225,216.2,191.7,221 M80.8,260.8
              c-26.4,3.9-14.7,44.4,9.6,32.5C107.2,285.2,99.4,258.8,80.8,260.8`,
      color1: '#05e6ff',
      color2: '#0069fe',
    },
    cryo: {
      path: `M198.8,18C185.6,47,168.5,77,150.6,103.8c0,0.5,11-2.6,12.3-3.5c1.9-1.4,2.8-0.8,7.3,4.8
              c13.1,16.3,23.5,43.9,28.8,76.1c0.9,5.8,1.1,6.1,1.6,2.6c4.7-29.6,14.2-63.7,34.3-84.5c1.2,0.4,18,7.6,13.5,2.7
              C234.5,82.6,213,44,203,21.9C200.3,17.5,200.6,13.1,198.8,18 M202.3,76c20.5,24.1,14.5,1.9,3,41.7c-2.4,5-5.5,32.2-5.9,21.7
              c-2.2-16.1-8.4-35.1-15.7-49.9c3.2-1.7,12.1-10.5,15-14.9C200,72.6,199.8,72.5,202.3,76 M40.8,108.7c13.9,18.7,42.2,65.4,50.7,85.4
              c1.2,3.5,3.1-10.1,4-14.3c26.5-7.2,66,2.8,91.2,13.1c1.2,0.5,1.9,0.4,1.1-0.2c-1.8-1.4-3.9-3.2-6.3-5.2c-20.9-17.8-44.3-42.1-51-68
              c3-2.1,11.3-9.8,11-10.2c-22.7,2.1-79.7,1.2-101.2-1.4L40.8,108.7 M353.9,108.2c-24.3,2.9-71.6,2.7-95.4,1
              c-0.3,0.3,7.1,7.4,10.1,9.5c0.6,0.4,1,0.8,1,0.9c-7.1,26-32.6,52.5-57.8,73.5c26.6-10.2,65-20.7,92.6-13.4c0.5,3.7,2.6,13.9,3.3,15
              c3.1-4.9,13.8-27.4,17.9-33.6c8.6-15.2,19.8-32.8,29.8-47.3C358.8,108,362.9,107.3,353.9,108.2 M114.3,133.2
              c44.4,59.5,53.7,31.7-18.2,25.9c-3.2-31.8-16.9-17.1,13.4-27.2C113.5,130.5,112,129.9,114.3,133.2 M291.7,132.4
              c5.7,2.2,12.3,3.6,18.3,4.1c-3.5,7.7-5.5,15.4-6.2,22.7c-13.4-0.3-39,6-53.7,12c13.3-10.6,28.2-26.1,37.3-40.5
              C288.7,131.2,289.7,131.6,291.7,132.4 M171.5,151.6c0.2-0.9-2.2,17.5-2.5,21c8.2,8.2,18.8,18.1,26.9,24.5c2.2,1.8,2.3,1.9,1.5,1.4
              c-2.6-1.3-31.7-10.1-35.2-10.6c-4.3,0.9-14.4,9.7-16.9,10.9c-0.8,0.6-1.5,1.2-1.6,1.3c0.6,0.9,13.7,10.5,16.8,12.9
              c43.4-10.3,47.5-23.9,9.4,14.1c0.3,3.8,1.7,19.6,1.8,21.6c1.4,0.2,18-7.6,19.4-7.8c3.6-9.4,6.4-25,8.7-38.6c1.1,8.2,7,30.7,8.7,37.3
              c0,0,1.8,0.8,3.8,1.8c2.8,1.3,15.3,7.4,15.9,7.3c0.7-5.2,2-16.1,2.6-21.3c-7.8-8.1-22.3-20.9-28.4-26c4.8,2,20.4,6.6,28.6,8.8
              c4.2,1.2,6.6,1.8,7.2,1.8c-0.1,0.7,17.9-11.8,18-12.4c-0.7-0.7-13.8-10.5-16.9-12.8c-44.1,10.8-46.3,22.8-9.5-14
              c-0.4-3.8-1.6-19.6-1.7-21.4c-3.2-0.1-14.3,6-19.8,7.8c-2.8,9.4-7.2,29.6-8,36.1c-0.2,2.2-0.6,2-0.9-0.6c-0.3-3.1-5.9-25.7-7.7-32.5
              c-0.5-2-0.5-2-2-2.7C184.2,157.2,169.9,149.8,171.5,151.6 M87,214.9c-12.5,25.4-29.9,53.3-45.5,75.2c-1.6,2.2-1.9,2.1,5,1.5
              c20.5-2.2,70.2-3.1,92.6-0.9c7,1.6-7.9-9.3-8.7-10.2c-0.3-0.2,0.7-3.7,2.1-7.3c9.6-24.2,33.1-48.4,54.6-65.5
              c-28.2,9.2-69.5,19.9-91.7,12.4c-0.5-4.1-2.8-15.1-3.4-15.1C92,205.2,89.7,209.5,87,214.9 M307.3,206.1c-0.8,2.3-2.3,10.2-2.9,14.1
              c-22.7,7-61.8-2.2-92.3-12.9c21.7,16.8,44.2,41.6,52.7,60.4c8.5,18.5,3.8,10.1-6.3,23c14.7-0.4,19-1.4,41.5-1.1
              c24.4-0.2,38.3,0.9,53.6,2.1c6.3,0.6,6.6,0.5,4.8-1.5c-0.4-0.3-6-8.6-6.3-9c-14.4-21.1-30.6-48.3-40.7-69.1
              C307.8,204.6,307.9,204.7,307.3,206.1 M199.5,215.1c-4.9,31.3-14.5,64.8-34.4,85.5c-3.6-1.7-13.8-4.9-14.6-4.6
              c2.8,5.2,8.9,13,15.2,23.7c11.2,18.4,24.6,43.5,33.1,62.3c1.1,2.5,1.3,2.6,1.9,1.1c2.6-6.2,14-28.9,18.4-36.9
              c7.7-14.1,16-28.4,25.7-42.9c4.6-7,5.1-7.8,4.1-7.4c-3.4,0.9-10.5,3.1-14,4.7c-17.2-18-25.9-43.6-31.7-70
              C201.7,225.7,200.4,209.4,199.5,215.1 M150,228.9c-11.7,8.9-28.3,26.1-36.3,38.9c-0.9,1.3-1.1,1.5-1.7,1.3
              c-32.4-11.9-19.5,4-15.9-28C114.4,239.9,135,234.8,150,228.9 M255.5,230.8c15.5,5.8,31.6,9,48.4,10.2c4.7,34.6,15.5,15.3-16.5,28.3
              c-7.5-13.2-25.7-30.9-36.9-40.4C250.8,229.1,253,229.9,255.5,230.8 M200.4,259.6c1.5,11.3,5.2,25.7,9.8,37.2
              c1.7,4.4,1.9,4.7,4.3,9.9c1.6,3.5,1.7,3.8,1.2,4.1c-26.2,20.5-5.7,20.6-31.6,0.1c-0.6-0.4-0.6-0.5,1-4c6.8-14.4,12.3-32.5,14.1-46.3
              C199.9,257.1,200.1,256.8,200.4,259.6`,
      color1: '#a5ffff',
      color2: '#8fccd9',
    },
    electro: {
      path: `M200.2,26c18.2,9.2,34.2,18.3,50,31.4c49,36,49.2,107-4.7,130c-56.9,23.3-111.1-64.3-36.5-73.8
              c-46.6-39.2-101.8-25.3-144.4,20.7c1.4-21.5,10.9-43.2,29.7-70.8c1.7-2.5,1.1-2.4-2.3,0.4c-47,36.6-72.3,99.2-64,159.2
              c2.2,20.3,11.9,47.7,22.2,64.7c0.4,0.4,0.4-1,0-7.8c-15.1-157.6,144-156.9,137.2-58.7c-4.3,32.9-44.2,48.9-64.2,16.1
              c-15.9,56.3,34,103.1,89.1,113.3c-19.5,10.9-56.6,12.3-77.8,9.6c40.8,20.8,105.5,17.7,149.1-6.9c25.4-12.6,56.9-43.3,68.5-67.1
              c-21.7,13.7-42.3,25.3-62.9,30.9c-69.7,27.5-136.9-59.2-77.7-108c32.7-27.3,81.8-2.1,61,38.7c-1.3,2.2-1.1,2.2,2.9,0.6
              c55.9-20.5,68-82.3,50.5-133.8c19.5,13.1,33.1,33.6,44,55.7c3.7,7.5,4.1,8,3.6,4.3C363.1,91,282.8,22.5,200.2,26`,
      color1: '#fca7ff',
      color2: '#7a519a',
    },
    dendro: {
      path: `M197,26.3c-26.5,25.2-36.8,69.2,0,89.2c38-7.7,40.2-54.8,6.4-88.7C199.7,22.7,200.1,22.7,197,26.3
             M34.1,94.3c-2.9,0.6-5.5-0.5-4.6,2.8c4.2,34.9,20.5,45.2,45.7,42.3c-13.6,16.5-21.9,49.3-18.5,74.1c-11.2-11.3-24.7-9.1-37.4,6.9
            c-9.4,6.4,29.5,24.6,38.5,1.1c1.8,7.2,3.7,15,7,21.7c28.8,67.4,109.2,58.5,133.8,131c1.3,3.6,1.2,3.6,2.7-0.1
            c19-52.3,52.8-55.7,90.1-82c26.2-14.9,45.7-45.4,51.1-70.3c7,14,21,15.7,38.1,4c3-2,3-1.7,0.5-4.9c-12.6-16.4-26.7-18.9-37.9-7.2
            c2.9-22.4-2.8-55.5-18.5-74.5c27.8,5.4,43.9-14.1,45.9-44.2c-24.2-5.5-58,4.8-53.1,35.9c-17.5-17.2-43.7-27.7-64-25.4
            c-30,4.8-66.9,22.6-37.3,44.3c2.6,1.8,2.4,1.9,3.7-1.2c4.3-9.8,13.6-16.9,23.2-19c93.4-18.1,102.2,121,21,147.1
            c-28.8,13.1-51.4,22.8-64.1,45.8c-11.6-26.9-58.4-41.1-82.1-55.2C81.5,243.1,69,195,89.2,157.4c13.2-31.8,77.7-41.7,90.8-9.1
            c2.7,9.1,23.2-15.2,10.9-23.4c-29.4-28.6-80.4-23.4-108.3,6C84.2,104.6,67.8,91,34.1,94.3 M139.5,149.3
            c-38.4,1.9-49.2,43.6-21.7,70.3c-10.5,0.4-18.4,5.2-20.3,14.9c-0.8,3.6-0.8,3.7,0.8,2.3c12.5-13.4,42.7,1.4,61.6,14.7
            c7.9,4.3,26.6,15.2,19.5,9c-31.6-23.1-67.7-90.3-8-92.2c5.1,0,5,0.3,2.8-4.1C168.7,153.4,156.6,148.2,139.5,149.3 M248.7,149.5
            c-8.9-1.7-34,20.1-20.1,18.8c60.4,3.2,23.2,68.8-8.1,92.2c-3,2.6-2.4,2.6,3.4-0.3c21-10.2,59.6-41,77.3-23.7c1.8,1.7,2,1.3,1.2-2.6
            c-1.6-8.8-10-13.9-20.1-14.3C314.1,189.5,292.6,142.5,248.7,149.5`,
      color1: '#a4e829',
      color2: '#06ac2e',
    },
  }

  let curEleName = 'cryo'

  const setup = function () {
    let tweenShape
    let tweenColor1
    let tweenColor2

    const $path = document.querySelector('#path')
    const $bgStop1 = document.querySelector('#bg-stop-1')
    const $bgStop2 = document.querySelector('#bg-stop-2')
    const curEle = elemental[curEleName]
    $path.setAttribute('d', curEle.path)
    $bgStop1.setAttribute('stop-color', curEle.color1)
    $bgStop2.setAttribute('stop-color', curEle.color2)
    const $ul = document.querySelector('ul')

    // 事件委托
    $ul.onclick = function (e) {
      let $ul_ = e.target.closest('ul')
      if (!$ul_) return
      if (!$ul.contains($ul_)) return
      const newEleName = e.target.className
      const newEle = elemental[newEleName]
      if (newEle) {
        tweenShape = gsap.timeline({ paused: true })
          .to($path, {
              duration: 0.6,
              ease: 'back.inOut(1)',
              morphSVG: newEle.path,
            }
          )
        tweenColor1 = gsap.timeline({ paused: true })
          .to($bgStop1, {
            duration: 0.6,
            stopColor: newEle.color1,
          })
        tweenColor2 = gsap.timeline({ paused: true })
          .to($bgStop2, {
            duration: 0.6,
            stopColor: newEle.color2,
          })
        tweenShape.play()
        tweenColor1.play()
        tweenColor2.play()
        curEleName = newEleName
      }
    }
  }

  setup()
</script>
</body>
</html>

实现效果如下：

如果本文对您有帮助还请点个赞😁

SVG与PNG源文件地址

完整代码戳这里

在线演示

微信关注我们

原文链接：https://my.oschina.net/codingDog/blog/5038992

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Proxy-Go 控制面板 v2.9 发布，sps 综合代理重构！

Proxy-Go 控制面板 ProxyAdmin是强大的代理服务工具snail007/goproxy的控制面板，运行了它，一秒让你的服务器变为强大的代理服务器，友好的交互界面，小白也能轻松上手，让你用起来得心应手，心情舒畅。更新内容： 1.sdk升级到最新版，重构sps代理，sps独立服务时不再依赖内部本地开启的一个上级，性能大幅度提速。升级提示： 1.备份配置目录数据文件。 2.卸载旧版本，重新安装新版本。 3.使用备份的数据库文件覆盖配置目录的数据文件。功能预览展现客户端参数实时日志参数文件管理调试模式下载地址: Gitee Github

2021-05-05

937

演示链接(纯UI离线版) 多树商城(中文) 多树商城(英文) 多树管理后台更新日志通用移除了Delete by query支持，仅在个别情况下支持id批量删除内部服务直接调用彼此无需通过proxy mt15-saga-orchestrator 重新设计了Saga模式, 将复杂分布式事务逻辑集中在Saga，以此来简化其它服务的回滚逻辑，以便更好debug mt0-access 支持csrf与cors的动态配置 bugfix mt1-proxy 同步支持csrf与cors的动态配置 mt2-profile 采用事件溯源重新设计了订单类(Axon Framework) 重构了Address与Cart的验证层采用分布式锁来保证添加购物车,地址的并发安全移除了回滚相关逻辑，完全由Saga来驱动 mt3-mall 移除了回滚相关逻辑，完全由Saga来驱动 mt-common 简化了幂等设计 mt9-oauth-ui UI同步更新新增catalog动态树 bugfix mt14-web-component,mt9-object-market bugfix 更多详情

2021-05-05

758

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。