使 SVG Circle stroke-dashoffset 动画化

Question

我想为 SVG Circle 的 strokeDashoffset 设置动画，

我画了一个圈，我从数组中获取数据（稍后将成为数据库）这改变了 strokeDashoffset 目前它的动画效果不流畅，我想要一个 ease-in-out 1s 如果我想让它从 0 变为 100%，我会在 css 中使用 "from{}" 和 "to{}" 的关键帧，但我想为发生的任何变化制作动画，因为也会有一些颜色变化。

<svg>
      <circle
        cx="50%"
        cy="50%"
        r={radiusHR}
        fill="none"
        stroke={strokedefaultcolor}
        strokeWidth={strokewidth}
      />
      <circle
        id="HRprogress"
        cx="50%"
        cy="50%"
        r={radiusHR}
        fill="none"
        stroke="#E1E5FA"
        strokeWidth={strokewidth}
        strokeDasharray={circumferenceHR}
        strokeDashoffset={circumferenceHR * (1 - this.props.value1 / 101)}
      />

</svg>

Answer 1

就我个人而言，我使用 Greensock Animation Platform 来处理这类事情。以下是我在 Firmament Wars 中的做法，这是我制作的一款浏览器 RTS 游戏：

TweenMax.to([DOM.targetLine, DOM.targetLineShadow], .2, {
    startAt: {
        strokeDashoffset: 0
    },
    strokeDashoffset: -12,
    repeat: -1,
    ease: Linear.easeNone
});

它随附您能想到的任何便利，所以他们也会照顾到这一点。

Answer 2

只需使用style属性中的道具，并设置一个transition。例如：

const Circle = (props) => (
  <circle
    cx="50%"
    cy="50%"
    r={radius}
    fill="none"
    style={{
      stroke: props.color,
      transition: 'all 0.3s',
      strokeWidth: props.width,
      strokeDasharray: props.dashArray,
      strokeDashoffset: props.dashOffset
    }}
  />
);

每 800 毫秒随机值的完整示例：

const Circle = ({ // default values used if not given in props
  radius,
  color = 'lightslategray',
  width = 1,
  dashArray = '0',
  dashOffset = 0
}) => (
  <circle
    cx="50%"
    cy="50%"
    r={radius}
    fill="none"
    style={{
      stroke: color,
      transition: 'all 0.3s ease-in-out', // animation duration and easing function
      strokeWidth: width,
      strokeDasharray: dashArray,
      strokeDashoffset: dashOffset
    }}
  />
);

class Circles extends React.Component {
  constructor() {
    super();
    this.state = { // initial values
      dashOffset: 0,
      dashArray: '10, 10',
      width: 1
    };
  }

  componentDidMount() {
    setInterval( // change to some random crap every 800 ms
      () =>
        this.setState({
          dashOffset: this.state.dashOffset + 10,
          dashArray: `${Math.random() * 10}, 10`,
          width: 1 + Math.random() * 4
        }),
      800
    );
  }

  render() {
    return (
      <svg>
        <Circle
          radius={50}
          color="#eb26a8"
          width={this.state.width}
          dashArray={this.state.dashArray}
          dashOffset={this.state.dashOffset * 1}
        />
        <Circle
          radius={60}
          color="#2645eb"
          width={this.state.width * 2}
          dashArray={this.state.dashArray}
          dashOffset={this.state.dashOffset * 4}
        />
        <Circle
          radius={70}
          width={2}
          dashArray="1, 5"
        />
        <Circle
          radius={25}
          width={2}
          dashArray="1, 5"
        />
      </svg>
    );
  }
}

ReactDOM.render(
  <Circles />,
  document.getElementById("mount")
);

<div id="mount"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

定时函数列表：https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

您甚至可以创建一个自定义的：https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function

使 SVG Circle stroke-dashoffset 动画化

Make SVG Circle stroke-dashoffset animate

javascript

svg

svg-animate

reactjs