Question

我正在开发一个程序，该程序代表某个细分受众群的百分比（请考虑饼图）。但是，我不想使用饼图，而是要绘制标记的圆圈，并用与百分比成比例的颜色填充圆圈。我已经知道了那部分。

但是，圆的值可以响应用户输入而更改，我很想拥有一个动画，该动画会导致圆的“填充”随着输入的更改而上升或下降。我主要是一名后端开发人员，并且几乎没有动画方面的经验，我感觉自己在转动轮子。

我的前端是React。当前，每个圆圈都是我传递“百分比”属性的React组件。然后，我给圆分配线性渐变，该渐变取决于传递的百分比。这将使圆圈填充适当的数量。

我过去使用的几乎所有动画（如果可以这样称呼）都使用了过渡。但是，我的研究使我相信线性渐变无法转换-这使我处于必须重做我的圈子代码（我不知道如何打开它）或弄清楚的地方。一种动画线性渐变的解决方法。

render() {
    let circleStyle = {
      background: `linear-gradient(transparent ${100-this.props.percent}%, ${this.props.color} ${100-this.props.percent}%)`
    };

    return (
      <div className="circle-container">
        <div className="circle" style={circleStyle} onClick={this.props.onClick}>
        <div className="circle-info">
          <p className="circle-text">{this.props.percent}%</p>
          <p className="circle-text-hidden">CU Avg: {this.props.industryPercent}%</p>
          {strike}
        </div>
        </div>
        <h1>{this.props.segmentName}</h1>

      </div>
    )

希望我能得到一些关于解决此问题的最佳方法的明智的React / CSS-Guru建议。正是在那个怪异的山谷里，感觉像它应该是世界上最简单的东西，但是我无法停止对它的撞击。

Answer 1

我建议在圆内放置第二个div并对其高度设置动画，可以使用CSS进行转换。很难在不看CSS的情况下确切地说出它的放置位置以及它的外观，但是我想它看起来可能像这样：

circle

您将需要其他CSS才能完成此工作。我建议制作position: relative circle-fill和position: absolute z-index，使其宽度为100％。您可能还需要对git fetch --tags --progress -- git@url_of_the_repo.git +refs/pull/*:refs/remotes/origin/pr/* +refs/heads/*:refs/remotes/origin/*进行更多调整，才能同时正确显示您的内容。

动画化一个以动态百分比从下往上填充的圆圈

1 个答案: