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>