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

Posted

技术标签:

【中文标题】操纵 svg 圆原点以创建围绕中心的旋转动画【英文标题】:Manipulate svg circle origin to create rotation animation around center 【发布时间】:2019-06-05 18:55:45 【问题描述】:

我通过两个<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"
        
        
        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-
        />
        <circle
          className='inner'
          cx="50"
          cy="50"
          r="35"
          fill="none"
          stroke="#d50000"
          stroke-dasharray="55 55"
          stroke-dashoffset="55"
          stroke-linecap="round"
          stroke-
        />
      </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;

不知道如何用我的一段代码制作一个实际工作的 sn-p,sry

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

【问题讨论】:

【参考方案1】:

您需要在 svg 的中心设置 transform-origin。但是,您可以采取不同的做法。您可以像这样为stroke-dashoffset 设置动画,而不是为transform 设置动画:

.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;
    
  

svgborder:1px solid
<svg  xmlns="http://www.w3.org/2000/svg"
        
        
        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-
        />
        <circle
          class='inner'
          cx="50"
          cy="50"
          r="35"
          fill="none"
          stroke="#d50000"
          stroke-dasharray="55"
          stroke-dashoffset="55"
          stroke-linecap="round"
          stroke-
        />
      </svg>

【讨论】:

确实做到了。谢谢! SVG 动画有时对我来说就像是一种魔法:D【参考方案2】:

欢迎来到 Stack。

您需要进行一些小调整才能使其正常工作。

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

0deg 动画到360deg

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

对于反向动画,您可以使用反转方向

animation-direction: alternate; 在你的 CSS 中

【讨论】:

谢谢您的问候! :D 我可能对我的&lt;circle /&gt; 有点不清楚。我通过 标签绘制了两个未完成的圆圈。这可能是我的动画搞砸的原因。我用一个例子编辑了我的问题。附言我应用了你的更正。仍然无法按预期工作

以上是关于操纵 svg 圆原点以创建围绕中心的旋转动画的主要内容,如果未能解决你的问题,请参考以下文章

如何相对于其中心点旋转或缩放(变换)SVG 路径?

围绕世界原点旋转对象

动画制作小球围绕中心旋转的效果

Safari SVG 变换原点缩放动画

SVG 变换原点 CSS 动画 – Firefox 错误

如何在 Matplotlib 中围绕旋转轴做一个 3D 圆