如何将 jQuery 函数应用于内联 CSS

Question

我一直在使用我找到的零碎物品制作一个动画统计圈计数器。圆圈的中心是数字统计数据，当它运行时，我已经成功地从零开始计数。

<div class="single-circle">
  <h6 class="counter stat">50</h6>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 165" class="circle-svg">
    <g id="circles" data-name="circles">
      <circle class="back-circle" cx="82.5" cy="82.5" r="75" />
      <circle class="front-circle" cx="82.5" cy="82.5" r="75" style="stroke-dashoffset: -235px;" />
    </g>
  </svg>
</div>

这里是 jQuery：

$('.counter').each(function () {
    var $this = $(this);
    jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
        duration: 2000,
        easing: 'swing',
        step: function () {
            $this.text(Math.ceil(this.Counter));
        }
    });
});

我现在想通过定位内联样式选择器“strokedash-offset”将相同的功能应用于“.front-circle”，以便让圆圈与数字计数器一起动画，但我正在努力实现这一目标。

完整的 JS Fiddle 与 SCSS 在这里：https://jsfiddle.net/ch8phcbd/

为了澄清，我想定位和操作内联样式选择器的值，以实现这一点并避免在 jQuery 中放置可变值，因为在最终版本中，该值将被动态拉入视图页面。

感谢任何帮助。

谢谢！

Answer 1

https://jsfiddle.net/vvkqmqLm/4/

计算偏移量然后应用它：

 var r = $circle.attr('r');
 var c = Math.PI*(r*2);

 (val < 0) { val = 0;}
 (val > 100) { val = 100;}

 pct = ((100-val)/100)*c;

还编辑了css，所以加载动画是顺时针的

.circle-svg {
  transform: rotate(90deg) scaleX(-1);
}

如果稍微改写一下，就不需要水平翻转（scaleX(-1)），但你明白了。

Answer 2

我所做的是删除 css 过渡，这样它们就不会影响动画，并且每一步都会减少红色圆圈的 stroke-dashoffset。

$('.counter').each(function () {
    var $this = $(this);
    jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
        duration: 2000,
        easing: 'swing',
        step: function () {
            $this.text(Math.ceil(this.Counter));
    var increase = Math.ceil(this.Counter);
    $(".front-circle").css("stroke-dashoffset", "-=2.5");
        }
    });
});

JsFiddle：https://jsfiddle.net/ch8phcbd/4/

更新：

为了更好地控制计数器，我们首先需要确定笔画偏移需要多少像素才能使圆圈变为 100% 红色。 您的情况下的数字是 472，这意味着圆的 1% 是 4.72px。 然后我们需要让它每个数字只增加一次行程偏移量。因为该函数被调用了超过 50 次并且只是对数字进行四舍五入，所以我添加了一个 if 语句来检查中间的数字自上一步以来是否发生了变化，如果是，则在偏移量中添加 1%：

if(Math.ceil(this.Counter) > $this.text())
      {
        $(".front-circle").css("stroke-dashoffset", "-=" + singlePercent);
      }

如果您更改<h6 class="counter stat">50</h6> 中的数字，您可以看到它适用于任何百分比。

JsFiddle：https://jsfiddle.net/ch8phcbd/10/