fillStyle顏色上的過渡

Question

我有一個可視化器設置，它每7.5秒改變一次顏色，問題是，它會立即執行，你可以在fillStyle上使用.animate（）嗎？如果沒有，是否有任何添加到fillStyle的轉換的方法？

Answer 1

fillStyle沒有自動爲其轉換設置動畫的方法。

但是，它很容易創建動畫過渡的動畫循環。

你要做的就是提醒你瘋狂的內容兩次每幀的動畫循環存在的過度2.50秒：

• 戰平具有超過您2.50秒降低不透明度起始顏色。

• 繪製結束顏色的不透明度增加超過2.50秒。

這裏的註釋的示例代碼和演示：

// canvas related variables 
 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var duration=2.50; 
 

 
// starting and ending colors 
 
var rgbStart='#BC49FF'; 
 
var rgbEnd='#574FFF'; 
 
// calculate the # of frames that requestAnimationFrame can 
 
// draw during the duration 
 
var opacitySteps=parseInt(60*duration); 
 
// set the current opacity step at its starting number (0) 
 
var opacityStep=0; 
 

 
// start the 2.5 second animation 
 
requestAnimationFrame(animate); 
 

 

 
function animate(time){ 
 

 
    // calculate the current opacity as a percentage 
 
    //  of opacityStep/opacitySteps 
 
    var opacity=100*(opacityStep/opacitySteps); 
 
    if(opacityStep>=opacitySteps-1){ opacity=100; } 
 

 
    // clear the canvas 
 
    ctx.clearRect(0,0,cw,ch); 
 

 
    // draw with the starting color using a lessening opacity 
 
    ctx.globalAlpha=(100-opacity)/100; 
 
    ctx.fillStyle=rgbStart; 
 
    ctx.fillRect(20,20,100,75); 
 
    ctx.strokeRect(20,20,100,75); 
 

 
    // draw with the ending color using a increasing opacity 
 
    ctx.globalAlpha=(opacity)/100; 
 
    ctx.fillStyle=rgbEnd; 
 
    ctx.fillRect(20,20,100,75); 
 
    ctx.strokeRect(20,20,100,75); 
 

 
    // clean up, reset globalAlpha to it's default of 1.00 
 
    ctx.globalAlpha=1.00; 
 

 
    // return if all steps have been played 
 
    if(++opacityStep>=opacitySteps){return;} 
 

 
    // otherwise request another frame 
 
    requestAnimationFrame(animate); 
 
} 
 

 
$('#again').click(function(){ 
 
    opacityStep=0; 
 
    requestAnimationFrame(animate);  
 
})

body{ background-color: ivory; } 
 
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Transitioning a fillStyle over 2.50 seconds</h4> 
 
<br><button id=again>Again</button> 
 
<br><canvas id="canvas" width=300 height=300></canvas>