javascript - 织物 js 动画。单击时有效，但只有一次。每次点击后如何让它工作？

Question

刚开始学习 Fabric.js。请看下面的代码。目的是让对象在用户单击时旋转 360 度。它第一次对每个方 block 起作用。但是如果我第二次点击一个方 block ，就没有动画了。我做错了什么？

var canvas = new fabric.Canvas('game', {
  width: 900,
  height: 600
});

var rectLets = [];
var drawGrid = function() {
  var start = 50;
  var gap = 5;
  var numcols = 3;
  var numrows = 3;
  var size = 100;

  for (var i = 0; i < numrows; i++) {
    for (var j = 0; j < numcols; j++) {
      var top = start + i * (size + gap);
      var left = start + j * (size + gap);
      console.log("top, left = ", top, left);
      var rect = new fabric.Rect({
        fill: 'indianred',
        width: size,
        height: size,
        originX: 'center',
        originY: 'center',
      });

      var letA = new fabric.Text('A', {
        originX: 'center',
        originY: 'center'
      });

      var group = new fabric.Group([rect, letA], {
        left: left,
        top: top,
        originX: 'center',
        originY: 'center',
        lockMovementX: true,
        lockMovementY: true,
        lockScalingX: true,
        lockScalingY: true,
        lockRotation: true
      });

      rectLets.push(group);
    }
  }
};

drawGrid();
rectLets.forEach(function(objinst) {
  objinst.on('mousedown', function(e) {
    console.log(e.target);
    e.target.animate({
      'angle': 360
    }, {
      onChange: canvas.renderAll.bind(canvas)
    });
  });
});

rectLets.forEach(function(rect) {
  canvas.add(rect);
});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div class="row" style="margin-top: 100px;">
    <div class="col s10 offset-s2">
        <canvas id="game"></canvas>
    </div>
</div>

Answer 1

Animate 有 onComplete 回调，在那里将对象 Angular 设置为 0。由于您始终将动画设置为 360 度，因此您看不到效果。

演示

var canvas = new fabric.Canvas('game', {
  width: 900,
  height: 600
});

var rectLets = [];
var drawGrid = function() {
  var start = 50;
  var gap = 5;
  var numcols = 3;
  var numrows = 3;
  var size = 100;

  for (var i = 0; i < numrows; i++) {
    for (var j = 0; j < numcols; j++) {
      var top = start + i * (size + gap);
      var left = start + j * (size + gap);
      console.log("top, left = ", top, left);
      var rect = new fabric.Rect({
        fill: 'indianred',
        width: size,
        height: size,
        originX: 'center',
        originY: 'center'
      });

      var letA = new fabric.Text('A', {
        originX: 'center',
        originY: 'center'
      });

      var group = new fabric.Group([rect, letA], {
        left: left,
        top: top,
        originX: 'center',
        originY: 'center',
        lockMovementX: true,
        lockMovementY: true,
        lockScalingX: true,
        lockScalingY: true,
        lockRotation: true,
        hasBorders:false,
        hasControls:false
      });

      rectLets.push(group);
    }
  }
};

drawGrid();
rectLets.forEach(function(objinst) {
  objinst.on('mousedown', function(e) {
    console.log(e.target);
    e.target.animate({
      'angle': 360
    }, {
      onChange: canvas.requestRenderAll.bind(canvas),
      onComplete: function(){
        e.target.angle = 0;
      }
    });
  });
});

rectLets.forEach(function(rect) {
  canvas.add(rect);
});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div class="row" style="margin-top: 100px;">
    <div class="col s10 offset-s2">
        <canvas id="game"></canvas>
    </div>
</div>