Объединение нескольких HTML5 холст анимации

Question

Я это jsfiddle http://jsfiddle.net/t9L6g3bd/4/

// requestAnimationFrame Shim 
(function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
window.requestAnimationFrame = requestAnimationFrame; 
})(); 


var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 75; 
var endPercent = 101; 
var curPerc = 0; 
var counterClockwise = false; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 

context.lineWidth = 2; 
context.strokeStyle = '#333'; 
animate(); 


function animate(current) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
    context.stroke(); 
    curPerc++; 
    if (curPerc < endPercent) { 
     requestAnimationFrame(function() { 
      animate(curPerc/100) 
     }); 
    } else { 
     ex(126, 126); 
     cross(126, 126); 
     //fadein(0); 
    } 
} 

function fadein(a) { 
    context.lineWidth = 1.5; 
    context.globalAlpha = a; 
    context.beginPath(); 
    context.moveTo(166, 84); 
    context.lineTo(84, 166); 
    context.stroke(); 
    context.beginPath(); 
    context.moveTo(166, 166); 
    context.lineTo(84, 84); 
    context.stroke(); 
    if (a != 0.8) { 
     requestAnimationFrame(function() { 
     fadein(a + 0.01); 
     }); 
    } 
} 

    function ex(x, y) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.moveTo(84, x); 
    context.lineTo(168, y); 
    context.stroke(); 
    if (x != 168) { 
     requestAnimationFrame(function() { 
      ex(x + 1, y - 1) 
     }); 
    } 
} 
function cross(x, y) { 
    // context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.moveTo(84, x); 
    context.lineTo(168, y); 
    context.stroke(); 
    if (x != 84) { 
     requestAnimationFrame(function() { 
      cross(x - 1, y + 1) 
     }); 
    } 

} 

мне было интересно, если есть способ, чтобы объединить круг анимации и х одновременно, или один за другим, так что они оба находятся на экране, и оба имеют гладкие края.

Answer 1

Вам необходимо было реорганизовать ваш код.

Link to refactored jsfiddle

function animate() { 

    if (curPerc < endPercent) { 
      context.clearRect(0, 0, canvas.width, canvas.height);  
      drawCircle(curPerc/100); 
      fadeIn(curPerc/100); 
      curPerc++; 
      requestAnimationFrame(function() { 
       animate(); 
      }); 
    } 
} 

В основном вам необходимо изменить свой код так, что только один анимационный цикл выполняется, и на каждой итерации цикла вызова функцию обновления для каждой анимации. Я бы сказал, однако, что код в целом довольно сложно поддерживать, и вы должны рассмотреть дальнейший рефакторинг, чтобы исправить это. Надеюсь это поможет.

Answer 2

Вы действительно должны использовать только один запросAnimationFrame, потому что его накладные расходы довольно большие, но в основном для ясности вашего кода (трудно узнать, как это объект, который анимируется или нет).
- >> Как насчет сохранения всех данных анимации в объектах и ​​даже позволить объекту оживить/привлечь себя?
Таким образом, у вас есть четкое разделение проблем, и изменение одного аспекта анимации намного проще.
я начал делать это в этой скрипке:

http://jsfiddle.net/0200h552/6/

петля анимации становится довольно просто:

function animate() { 
    requestAnimationFrame(animate); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    // 
    circle.draw(); 
    if (!circle.animate()) { 
     ex.draw(); 
     cross.draw(); 
     ex.animate(); 
     cross.animate(); 
    } 
} 

И вот три объекта в использовании:

var circle = { 
    x: centerX, 
    y: centerY, 
    radius: 75, 
    curPerc: 0, 
    endPercent: 101, 
    animate: function() { 
     if (this.curPerc < this.endPercent) { 
      this.curPerc++; 
      return true; 
     } 
     return false; 
    }, 
    draw: function() { 
     var perc = this.curPerc/this.endPercent; 
     var oldAlpha = context.globalAlpha; 
     context.globalAlpha = perc; 
     context.beginPath(); 
     context.arc(this.x, this.y, this.radius, -(quart), ((circ) * perc) - quart, false); 
     context.stroke(); 
     context.globalAlpha = oldAlpha; 
    } 
}; 

«Ex»:

var ex = { 
    x: centerX, 
    y: centerY, 
    animate: function() { 
     if (this.x != 168) { 
      this.x++; 
      this.y--; 
      return true; 
     } 
     return false; 
    }, 
    draw: function() { 
     var x = this.x; 
     var y = this.y; 
     context.beginPath(); 
     context.moveTo(84, x); 
     context.lineTo(168, y); 
     context.stroke(); 
    } 
}; 

Крест:

var cross = { 
    x: centerX, 
    y: centerY, 
    animate: function() { 
     if (this.x != 84) { 
      this.x--; 
      this.y++; 
      return true; 
     } 
     return false; 
    }, 
    draw: function() { 
     var x = this.x; 
     var y = this.y; 
     context.beginPath(); 
     context.moveTo(84, x); 
     context.lineTo(168, y); 
     context.stroke(); 
    } 
};