Question

我正在使用raphaeljs在画布上创建一系列图表，当每个新图表添加到画布时，我想对前面的图表进行一系列更改（使它们更小并移动它们） - 但这些动画似乎不起作用。我已经能够为中风设置动画，所以我猜它至少是可能的，但显然我的语法不起作用。这是我的代码：

var chartArray = [];

Raphael.fn.pieChart = function (cx, cy, r, rin, graphArray, stroke) {

  var groupName;
  var paper = this,
      rad = Math.PI / 180,
      chart = this.set();

  function sector(cx, cy, r, startAngle, endAngle, params) {
    return paper.path([ ... ]).attr(params); //creates each slice of the pie chart
  }

  ...

  chartArray.push(chart);
  return chart;

}

$('#clicker').click(function(){
  raphCanvas.pieChart(125, 125 + (graphID*10), 100, 50, graphArray, "#fff");
  chartArray[0][j].animate({stroke: "#000"}, 2000); //works to set the stroke of each item in the set to black
  chartArray[0].animate({x: 0}, 2000); //does not work to move the x position of the set
});

Answer 1

在raphael中，你不能只为“x”属性设置动画，你可以使用翻译，如下所示：

var moveX = 100;
var moveY = 0;
view.animate({translation : (moveX)+" , "+(moveY)},500,function(){
  console.log("finished");
});

canvas / raphael.js - 在画布上设置动画对象的动画

1 个答案: