前端svg甩臂动画

3分钟阅读

主要是是从JIE_JOE这里学习的一个可操控性很强的甩臂动画实现 先从他给的样例学习起吧

第一步

用AI矢量绘图软件将你需要的交互svg图形画出来，并且要将他们需要运动的图层之间分开，然后将每个图层分为单独的svg图片

第二步

结构好body

<body>
    <svg viewBox="0 0 550 799.7" class="venus">
      <image width="550" height="799.7" href="venus/venus body.svg" />
      <g class="venus_forearm">
        <image width="550" height="799.7" href="venus/venus forearm.svg" />
        <circle class="venus_circle" cx="214" cy="549.8" r="10.7" />
 
        <line class="venus_line" x1="234.8" y1="527.2" x2="362.5" y2="432.8" />
 
        <image
          width="550"
          height="799.7"
          class="venus_hand"
          href="venus/venus hand.svg"
        />
      </g>
    </svg>
  </body>

其中，每张svg中的viewbox就是svg的可视化区域，其大小就需要填上刚刚导出来的那张整体svg图片的大小

其用image标签（svg中的标签，不是html的标签）的href来分别导入需要运动的每张svg图片，每张的宽高都要和viewBox一样

设置完毕过后就开始用css来写动画了

第三步

学习了一下css当中的CSS animation属性

这里甩臂就用transform:rotate()属性，旋转嘛 效果如下：

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=initial-scale=1.0" />
    <title>venus</title>
    <style>
      * {
        font-size: 2vmin;
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        background-color: #171717;
      }
      .venus {
        position: absolute;
        width: 25rem;
        overflow: visible;
      }
      .venus_forearm {
        animation: venus_forearm 2s ease infinite;
        transform-origin: 159.7px 575.7px;
        transform: rotate(15deg);
        overflow: visible;
      }
      @keyframes venus_forearm {
        0% {
          transform: rotate(-10deg);
        }
        30% {
          transform: rotate(40deg);
        }
 
        100% {
          transform: rotate(-10deg);
        }
      }
      .venus_hand {
        animation:venus_hand 2s ease infinite;
        transform-origin: 395.9px 407.6px;
      }
      @keyframes venus_hand {
        0% {
          transform: rotate(-10deg);
        }
        30% {
          transform: rotate(40deg);
        }
 
        100% {
          transform: rotate(-10deg);
        }
      }
      .venus_circle {
        fill: #b20426;
        animation: venus_circle 2s ease infinite;
      }
 
      .venus_line {
        fill: none;
        stroke: #17f700;
        stroke-width: 10.6454;
        stroke-linecap: round;
        stroke-miterlimit: 10;
        stroke-dasharray: 100, 20;
        animation: venus_line 2s linear infinite;
      }
 
      @keyframes venus_line {
        0% {
          stroke-dashoffset: 0;
        }
        30% {
          stroke-dashoffset: -20;
        }
 
        100% {
          stroke-dashoffset: -120;
        }
      }
      @keyframes venus_circle {
        0% {
          fill: #17f700;
        }
        30% {
          fill: #b20426;
        }
 
        100% {
          fill: #17f700;
        }
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 550 799.7" class="venus">
      <image width="550" height="799.7" href="venus/venus body.svg" />
      <g class="venus_forearm">
        <image width="550" height="799.7" href="venus/venus forearm.svg" />
        <circle class="venus_circle" cx="214" cy="549.8" r="10.7" />
 
        <line class="venus_line" x1="234.8" y1="527.2" x2="362.5" y2="432.8" />
 
        <image
          width="550"
          height="799.7"
          class="venus_hand"
          href="venus/venus hand.svg"
        />
      </g>
    </svg>
  </body>
</html>