改變顏色的徑向動畫

所以，我有這個「小部件」，就像是一個徑向進度條。我現在工作得很好。它在動畫時值變化很大，但我想使用紅綠燈配色方案，以便它越接近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>

正如你可能已經注意到，我使用的，所以我不使用jQuery，如果任何JavaScript是需要這麼純JavaScript角JS一切都需要！

我已成立了一個codepen所以你可以看到我的最新版本：

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

如果有人可以幫助我，這將是真棒。

來源

2017-06-30 r3plica

https://stackoverflow.com/questions/7128675/from從綠色到紅色依賴百分比這可能會幫助你 –

見here 我添加下面的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

來源

2017-06-30 13:49:16

改變顏色的徑向動畫

回答

相關問題