大佬教程收集整理的这篇文章主要介绍了我需要使用递归函数为画布 FabricJs 上的同心圆设置动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我想使用 FabricJs Canvas 为 10 个同心圆制作动画。 我的目标是第一个内圈应该首先显示，然后第二个，依此类推，通过使用递归或其他一些技术来避免代码重复。 我设法为两个第一个内圈设置动画，但代码冗余。
const canvas = new fabric.Canvas('gameCanvas',{
SELEction: false
});
fabric.object.prototype.originX = fabric.object.prototype.originY = 'center';
let circles = [];
document.addEventListener('DOMContentLoaded',function() {
drawCircles();
});
document.getElementByID('animateBtn').addEventListener('click',function() {
animateCircles();
});
function makeCircle(r) {
return new fabric.Circle({
left: 300,top: 120,strokeWIDth: 1.5,radius: r,fill: 'white',stroke: 'black',SELEctable: false,hovercursor: 'default',hasControls: false,hasborders: false
});
}
function drawCircles()
{
for(let i = 9; i >= 0; i--)
{
let circle = makeCircle(10*(i + 1));
circles.push(circlE);
canvas.add(circlE);
}
}
function animateCircles()
{
canvas.clear();
circles[9].animate({
opacity: 1
},{
duration: 2000,easing: fabric.util.ease['easeInElastic'],onChange: canvas.renderAll.bind(canvas),onComplete: function () {
circles[9].setCoords();
canvas.add(circles[9]);
canvas.renderAll();
circles[8].animate({
opacity: 1
},{
duration: 2000,onComplete: function () {
circles[8].setCoords();
canvas.add(circles[8]);
canvas.renderAll();
//On this line i need to use the code for animation
}
}
);
}
});
}#container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
#animateBtn {
margin-top: .5em;
}<div ID="container">
<canvas ID="gameCanvas" wIDth="600" height="240" style="border: 2px solID green;"></canvas>
<button ID="animateBtn">Start Animation</button>
</div>
<script src="https://cdnjs.cloudFlare.com/AJAX/libs/fabric.Js/3.0.0/fabric.min.Js"></script>
创建一个函数 loop(i)，它具有 one 圈的重复代码（因此没有初始 clear() 调用）。令 i 为圆的索引。然后在 onComplete 回调中，调用 loop，但现在使用参数 i-1。添加停止条件（当 i 变为负数时）。
这是带有该实现的代码：
const canvas = new fabric.Canvas('gameCanvas',{
SELEction: false
});
fabric.object.prototype.originX = fabric.object.prototype.originY = 'center';
let circles = [];
document.addEventListener('DOMContentLoaded',drawCircles);
document.getElementById('animateBtn').addEventListener('click',animateCircles);
function makeCircle(r) {
return new fabric.Circle({
left: 300,top: 120,strokeWidth: 1.5,radius: r,fill: 'white',stroke: 'black',SELEctable: false,hovercursor: 'default',hasControls: false,hasBorders: false
});
}
function drawCircles() {
for (let i = 9; i >= 0; i--) {
let circle = makeCircle(10*(i + 1));
circles.push(circlE);
canvas.add(circlE);
}
}
function animateCircles() {
canvas.clear();
function loop(i) {
if (i < 0) return; // end the asynchronous loop
circles[i].animate({
opacity: 1
},{
duration: 300,easing: fabric.util.ease['easeInElastic'],onChange: canvas.renderAll.bind(canvas),onComplete: function () {
circles[i].setCoords();
canvas.add(circles[i]);
canvas.renderAll();
loop(i - 1);
}
});
}
loop(9); // start the asynchronous loop
}#container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
#animateBtn {
margin-top: .5em;
}<div id="container">
<canvas id="gameCanvas" width="600" height="240" style="border: 2px solid green;"></canvas>
<button id="animateBtn">Start Animation</button>
</div>
<script src="https://cdnjs.cloudFlare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>以上是大佬教程为你收集整理的我需要使用递归函数为画布 FabricJs 上的同心圆设置动画全部内容，希望文章能够帮你解决我需要使用递归函数为画布 FabricJs 上的同心圆设置动画所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。