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>

fillStyle颜色的过渡

1 个答案: