javascript - canvas/raphael.js - 在 Canvas 上动画对象

标签 javascript jquery html svg raphael

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

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
});

最佳答案

在 raphael 中,你不能只为“x”属性设置动画,你必须使用翻译,如下所示:

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

关于javascript - canvas/raphael.js - 在 Canvas 上动画对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7996521/

相关文章:

javascript - 使用 JQuery 验证包含内容

javascript - 尽管有几种方法,但无法让 clearInterval 工作

javascript - 如何在重复的div中获取特定内容的滚动位置

javascript - 用户滚动经过 div 后切换图标

javascript - 跨浏览器兼容性

html - CSS 文件在单独的文件夹中时无法正确链接到 html

javascript - 无法在浏览器中打开新标签页?

jquery - Fancybox: 100% 宽度 -100px

javascript - 将 <div> 固定到顶部,直到它到达容器的末尾

html - 如何将less css文件导入html head