色彩變化的徑向動畫

Question

因此，我有這個“小部件”，就像一個放射狀的進度條。 我目前運作良好。 當值變化很大時會進行動畫處理，但是我想使用交通信號燈配色方案，以便它越接近100％就會變得越紅，接近0％就會變得越綠，而50％則變成黃色。

我為此使用的HTML看起來像這樣：

        <div class="radial-progress" data-progress="{{ controller.progress }}">
        <div class="circle">
            <div class="mask full">
                <div class="fill"></div>
            </div>
            <div class="mask half">
                <div class="fill"></div>
                <div class="fill fix"></div>
            </div>
            <div class="shadow"></div>
        </div>
        <div class="inset">
            <div class="percentage">
                <span id="progress">0</span>%
            </div>
        </div>
    </div>

    <div class="footer">
        <div>
            <div>
                <strong>Credit limit: </strong><span class="pull-right">{{
                    controller.data.currencyCharacter }}{{ controller.data.creditLimit |
                    number: 2}}</span>
            </div>
            <div>
                <strong>Available credit: </strong><span class="pull-right"
                    ng-class="{'lead text-danger': controller.data.availableCredit < 0 }">{{
                    controller.data.currencyCharacter}}{{
                    controller.data.availableCredit | number: 2}}</span>
            </div>
        </div>
    </div>

您可能已經注意到，我使用的是angular js，所以我沒有使用jQuery，因此，如果根本不需要任何javascript，就需要純javascript！

我已經設置了一個Codepen，因此您可以看到我的當前版本：

https://codepen.io/r3plica/pen/JJpwRe

如果有人可以幫助我，那太好了。

Answer 1

看到這里我添加了以下javascript

var percentColors = [
{ pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
{ pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
{ pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function(pct) {
    for (var i = 1; i < percentColors.length - 1; i++) {
        if (pct < percentColors[i].pct) {
            break;
        }
    }
    var lower = percentColors[i - 1];
    var upper = percentColors[i];
    var range = upper.pct - lower.pct;
    var rangePct = (pct - lower.pct) / range;
    var pctLower = 1 - rangePct;
    var pctUpper = rangePct;
    var color = {
        r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
        g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
        b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
    };
    return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
    // or output as hex if preferred
} 

並修改了您的更新功能，以及我添加了transition:0.5s; 給你.fill CSS