jquery - fillStyle颜色上的过渡

我有一个可视化器设置，它每7.5秒更改一次颜色，问题是，它立即完成了，您可以在fillStyle上使用.animate（）吗？如果没有，是否有任何方法可以添加到fillStyle的过渡？

最佳答案

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>

关于jquery - fillStyle颜色上的过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29447306/