jquery - 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>