Question

我尝试在CSS中制作一个动态饼图，它的效果相当不错，我希望动画从不到50％到超过50％，反之亦然。

这是一个codepen（我没有找到如何在堆栈的工具中使用SCSS）：http://codepen.io/mbrillaud/pen/NNgqYE

有没有办法避免这种影响？

HTML

<div class="wrapper">
  <div class="pie percent-10" id="pie"></div>
  <div class="border"></div>
</div>
<div class="buttons">
  <button data-value="10">10%</button>
  <button data-value="20">20%</button>
  <button data-value="30">30%</button>
  <button data-value="40">40%</button>
  <button data-value="50">50%</button>
  <button data-value="60">60%</button>
  <button data-value="70">70%</button>
  <button data-value="80">80%</button>
  <button data-value="90">90%</button>
  <button data-value="100">100%</button>
</div>

CSS

@import 'compass';
body {
  background-color: #2c333b;
}
.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  @include transform(translate(-50%, -50%));
  .pie,
  .border {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .pie {
    background-color: #FDDED9;
    background-image: linear-gradient(to right, transparent 50%, #ff4081 0);
    &::before {
        content: '';
        display: block;
        top: 0;
        left: 50%;
        width: 50%;
        margin-left: 50%;
        height: 100%;
        border-radius: 0 100% 100% 0 / 50%;
        background-color: inherit;
        transform-origin: left;
        transition: transform .2s linear;
    }
    &.percent-10::before {
        transform: rotate(.1turn);
    }
    &.percent-20::before {
        transform: rotate(.2turn);
    }
    &.percent-30::before {
        transform: rotate(.3turn);
    }
    &.percent-40::before {
        transform: rotate(.4turn);
    }
    &.percent-50::before {
        transform: rotate(.5turn);
    }
    &.percent-60::before {
        transform: rotate(.1turn);
        background-color: #ff4081;
    }
    &.percent-70::before {
        transform: rotate(.2turn);
        background-color: #ff4081;
    }
    &.percent-80::before {
        transform: rotate(.3turn);
        background-color: #ff4081;
    }
    &.percent-90::before {
        transform: rotate(.4turn);
        background-color: #ff4081;
    }
    &.percent-100::before {
        transform: rotate(.5turn);
        background-color: #ff4081;
      }

  }
  .border {
    border: 5px solid #FDDED9
  }
}

JS

$(document).ready(function() {

  var $pie = $('#pie'),
      className;

  $('button').on('click', function() {
    className = $pie.attr('class').match(/percent[\w-]*\b/);
    $pie
      .removeClass(className[0])
      .addClass('percent-' + $(this).data('value'));
  });
});

Answer 1

您使用的方法非常适合静态饼图，但在50％标记之间永远不会很好地制作动画。我个人更喜欢去SVG路线。

Lea Verou写了一篇关于如何处理这样的事情的好文章： https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

它基本上归结为创建<circle>应用与圈子本身一样宽的stroke并使用CSS操纵stroke-dasharray属性。

<强> HTML

<svg width="100" height="100" class="svg">
    <circle r="50" cx="50" cy="50" class="circle"/>
    <circle id="pie" r="22.5" cx="50" cy="50" class="circle  percent-10"/>
</svg>

<强> SCSS

// circumference = 2π * radius
// so in this case circumference = 2π × 22.5 ≈ 141):
 $circumference: 141;

.svg {

    /* Appearance */
    transform: rotate(-90deg);
}

.circle {

    /* Appearance */
    fill: #fdded9;
}

#pie {

    /* Appearance */
    stroke: #ff4081;
    stroke-dasharray: 0 $circumference;
    stroke-width: 45;
    transition: stroke-dasharray .2s linear;

    &.percent-10 { stroke-dasharray: ($circumference * 0.1) $circumference; }
    &.percent-20 { stroke-dasharray: ($circumference * 0.2) $circumference; }
    &.percent-30 { stroke-dasharray: ($circumference * 0.3) $circumference; }
    &.percent-40 { stroke-dasharray: ($circumference * 0.4) $circumference; }
    &.percent-50 { stroke-dasharray: ($circumference * 0.5) $circumference; }
    &.percent-60 { stroke-dasharray: ($circumference * 0.6) $circumference; }
    &.percent-70 { stroke-dasharray: ($circumference * 0.7) $circumference; }
    &.percent-80 { stroke-dasharray: ($circumference * 0.8) $circumference; }
    &.percent-90 { stroke-dasharray: ($circumference * 0.9) $circumference; }
    &.percent-100 { stroke-dasharray: ($circumference * 1) $circumference; }
}

我现在唯一关心的是你的代码不是很容易扩展。我认为根据stroke-dasharray动态设置data-attribute可能是更好的方法。

<强>的JavaScript

$('button').on('click', function(){

    var CIRCUMFERENCE = 141,
        percentage = Number($(this).data('value')),
        factor = percentage / 100,
        strokeDashArray = (CIRCUMFERENCE * factor) + ' ' + CIRCUMFERENCE);

    $pie.css('stroke-dasharray', strokeDashArray;
});

这是基于原始代码的CodePen，因此您可以看到它的实际效果： http://codepen.io/rvmook/pen/LNLGoE

CSS饼图动画从40％到60％

1 个答案: