Question

为什么画布动画与CSS过渡组合运行时会变得非常不稳定？

我已经在下面复制了我的问题，我调整了画布的大小，同时淡化了不透明度过渡的背景图像（在背景消失时密切观察宇航员的脚）：

嗯，有点不稳定。现在尝试删除JS中的$('#img1').addClass('fade');并观看动画运行......超级平滑！

为什么会这样？

（编辑：此问题在Firefox中不会发生）

代码来自：http://codepen.io/anon/pen/bpxJWV

var counter = 0;
var canvasMain, contextMain;

function easeInOutSine(currentIteration, startValue, changeInValue, totalIterations) {
  return changeInValue / 2 * (1 - Math.cos(Math.PI * currentIteration / totalIterations)) + startValue;
}

function render(image, alpha, canvas, context) {
  context.globalCompositeOperation = 'source-over';
  context.drawImage(alpha, 0, 0, canvas.width, canvas.height);
  context.globalCompositeOperation = 'source-in';
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  var newX = easeInOutSine(counter, image.width, 200, 200);
  var newY = easeInOutSine(counter, image.height, 200, 200);
  resizeCanvas(canvas, newX, newY);
  counter += 1;
  requestAnimationFrame(function() {
    render(image, alpha, canvas, context);
  });
}

function resizeCanvas(canvas, x, y) {
  var contextMain = canvasMain.getContext('2d');
  canvasMain.width = x;
  canvasMain.height = y;
  contextMain.clearRect(0, 0, x, y);
  contextMain.drawImage(canvas, 0, 0, x, y);
}

function createCanvas() {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  canvasMain = document.createElement('canvas');
  canvasMain.width = $('#img1').width();
  canvasMain.height = $('#img1').height();
  canvasMain.style.position = "fixed";
  var pos = $('#img1').position();
  canvasMain.style.top = pos.top;
  canvasMain.style.left = pos.left;
  canvasMain.style.zIndex = "101";
  canvas.width = $('#img1').width();
  canvas.height = $('#img1').height();
  $(canvasMain).appendTo($('body'));
  return [canvas, context];
}

$(document).ready(function() {
  $("#img1").on('click', function() {
    var [canvas, context] = createCanvas();
    var image = document.createElement('img');
    image.src = $('#hidden').attr('src');
    var alpha = document.createElement('img');
    alpha.src = $('#hidden').attr('alpha-src');
    render(image, alpha, canvas, context);
    //--------------------------REMOVE LINE BELOW TO SEE SMOOTH ANIMATION
    $('#img1').addClass('fade');
    $('#caption').addClass('fade');
  });
});

#hidden {
  display: none;
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
}

#img1 {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  z-index: 50;
  opacity: 1;
}

#img1.fade {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  z-index: 50;
  opacity: 0;
  transition: opacity 1.9s ease-in;
}

#caption {
  font-size: 24px;
  font-style: italic;
  top: 270px;
  position: absolute;
  transition: opacity .3s ease-in;
}

#caption.fade {
  font-size: 24px;
  font-style: italic;
  top: 270px;
  position: absolute;
  opacity: 0;
}

<body>
  <img id="img1" src="http://jim.studt.net/jpeg-alpha/astronaut-256.jpg">
  <img id="hidden" src="http://jim.studt.net/jpeg-alpha/astronaut-256-embed.jpg" alpha-src="http://jim.studt.net/jpeg-alpha/astronaut-256-mask.png">
  <p id="caption"> Click on image to animate.</p>
</body>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>

为什么Canvas + CSS Transition会创建Choppy Animation？

0 个答案: