操纵 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 我可能对我的<circle />
有点不清楚。我通过 以上是关于操纵 svg 圆原点以创建围绕中心的旋转动画的主要内容,如果未能解决你的问题,请参考以下文章