Question

我想动画SVG Circle的strokeDashoffset，

我做了一个圆圈，我从数组中获取数据（稍后将成为数据库）这会改变strokeDashoffset 目前它没有平稳的动画，我喜欢轻松的1s 如果我希望它从0变为100％，我会使用关键帧和＃34;来自{}＆＃34;和＆＃34;到{}＆＃34;在css中，但我想动画发生的任何变化，因为也会有一些颜色变化。

<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

只需使用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

Answer 2

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

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

它带有你能想到的任何轻松，所以他们也会照顾它。

使SVG Circle stroke-dashoffset动画

2 个答案: