代码之家 › 专栏 › 技术社区 › moshyfawn

操纵SVG圆原点以围绕中心创建旋转动画

styled-components svg reactjs

moshyfawn · 技术社区 · 7 年前

我在一页上画了一个通过两个 <circle /> .需要以原点为中心,将两条路径旋转到不同的方向,因此,圆围绕SVG的中心旋转,而不进行平移。

尝试使其具有动画效果 transform: rotate(360deg) . 道路乱成一团,从别处开始。尝试管理 viewBox 但没有成功。

import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { prop } from 'styled-tools';

class Loader extends PureComponent {
  render() {
    return (
      <Spinner
        xmlns="http://www.w3.org/2000/svg"
        width="200"
        height="200"
        preserveAspectRatio="xMidYMid"
        viewBox="0 0 100 100"
      >
        <circle
          className='outer'
          cx="50"
          cy="50"
          r="40"
          fill="none"
          stroke="#374a67"
          stroke-dasharray="63 63"
          stroke-linecap="round"
          stroke-width="4"
        />
        <circle
          className='inner'
          cx="50"
          cy="50"
          r="35"
          fill="none"
          stroke="#d50000"
          stroke-dasharray="55 55"
          stroke-dashoffset="55"
          stroke-linecap="round"
          stroke-width="4"
        />
      </Spinner>
    )
  }
}

const Spinner = styled.svg`
  & .outer {
    animation: rotate 2s linear infinite;
  }

  & .inner {
    animation: reverseRotate 2s linear infinite;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes reverseRotate {
    100% {
      transform: rotate(-360deg);
    }
  }
`;


export default Loader;

不知道如何用我的代码片段制作一个真正的工作片段,sry

以下是我当前动画的一个示例:

2 回复 | 直到 7 年前

enxaneta 7 年前

你需要设置 transform-origin 在你的SVG中心。不过,你也可以用不同的方法。而不是动画 transform 您可以设置 stroke-dashoffset 这样地:

.outer {
    stroke-dashoffset:0;
    animation: rotate 2s linear infinite;
  }

.inner {
    animation: reverseRotate 2s linear infinite;
  }

 @keyframes rotate {
    100% {
      stroke-dashoffset:126px;
    }
  }

  @keyframes reverseRotate {
    100% {
      stroke-dashoffset:-55px;
    }
  }

svg{border:1px solid}

<svg  xmlns="http://www.w3.org/2000/svg"
        width="200"
        height="200"
        preserveAspectRatio="xMidYMid"
        viewBox="0 0 100 100"
      >
        <circle
          class='outer'
          cx="50"
          cy="50"
          r="40"
          fill="none"
          stroke="#374a67"
          stroke-dasharray="63"
          stroke-linecap="round"
          stroke-width="4"
        />
        <circle
          class='inner'
          cx="50"
          cy="50"
          r="35"
          fill="none"
          stroke="#d50000"
          stroke-dasharray="55"
          stroke-dashoffset="55"
          stroke-linecap="round"
          stroke-width="4"
        />
      </svg>

Badrush 7 年前

欢迎来到Stack。

你需要做一些小的调整才能让它工作。

只需使用一个从0%到100%的动画。

从动画 0deg 到 360deg

@keyframes rotate {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }

对于反向动画,可以使用

animation-direction: alternate; 在你的CSS中