分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 包含“摇动”效果的HTML Canvas动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个使用canvas创建的动画.动画几乎完成,它显示爆炸.我想知道是否有办法创造一种震动效果,好像画布的内容在发生爆炸时会震动几秒钟.

任何帮助赞赏.

最佳答案

摇动屏幕的一种简单方法是在每次抽奖之前以随机方向翻译整个上下文.
您必须保存/恢复上下文以使其保持“干净”状态.

var ctx=cv.getContext('2d');

function preShake() {
  ctx.save();
  var dx = Math.random()*10;
  var dy = Math.random()*10;
  ctx.translate(dx,dy);  
}

function postShake() {
  ctx.restore();
}

function drawThings() {  
  ctx.fillStyle = '#F00';
  ctx.fillRect(10,10,50,30);
  ctx.fillStyle = '#0F0';
  ctx.fillRect(140,30,90,110);
  ctx.fillStyle = '#00F';
  ctx.fillRect(80,70,60,40);
}

drawThings();

function animate() {
  // keep animation alive
  requestAnimationFrame(animatE);
  // erase
  ctx.clearRect(0,cv.width,cv.height);
  //
  preShake();
  //
  drawThings();
  //
  postShake();
}

animate();

请注意,您可能更喜欢使用一些sin函数和一些缓动来获得更平滑的效果：

var ctx=cv.getContext('2d');

var shakeDuration = 800;
var shakeStartTime = -1;

function preShake() {
  if (shakeStartTime ==-1) return;
  var dt = Date.Now()-shakeStartTime;
  if (dt>shakeDuration) {
      shakeStartTime = -1; 
      return;
  }
  var easingCoef = dt / shakeDuration;
  var easing = Math.pow(easingCoef-1,3) +1;
  ctx.save();  
  var dx = easing*(Math.cos(dt*0.1 ) + Math.cos( dt *0.3115))*15;
  var dy = easing*(Math.sin(dt*0.05) + Math.sin(dt*0.057113))*15;
  ctx.translate(dx,dy);  
}

function postShake() {
  if (shakeStartTime ==-1) return;
  ctx.restore();
}

function startShake() {
   shakeStartTime=Date.Now();
}

function drawThings() {  
  ctx.fillStyle = '#F00';
  ctx.fillRect(10,cv.height);
  //
  preShake();
  //
  drawThings();
  //
  postShake();
}

startShake();
seTinterval(startShake,2500);
animate();