canvas / raphael.js - анимация объекта на холсте - PullRequest
Новая
       37

canvas / raphael.js - анимация объекта на холсте

2 голосов
/ 03 ноября 2011

Я использую 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
});

1 Ответ

0 голосов
/ 14 января 2012

В Рафаэле вы не можете просто анимировать атрибут "x", вы должны использовать перевод, как этот: 

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