在画布对象上使用 jQuery 动画答案

【问题标题】：Using jQuery animate on canvas objects在画布对象上使用 jQuery 动画
【发布时间】：2011-03-16 23:43:21
【问题描述】：

我想用路径机制绘制一个简单的形状来制作一个 html5 画布元素的动画。将鼠标悬停在它上面时，我想放大它，使其更不透明并更改颜色。我可以用 jQuery 的 animate() 函数来做到这一点吗？最好的方法是什么？画布有做这种动画的机制吗？

【问题讨论】：

标签： jquery html canvas css

【解决方案1】：

不幸的是，使用画布你想要做的事情会非常困难（不再是这种情况 - 请参阅下面的更新）因为一旦你在画布上绘制了一条路径，它就只是像素，所以你不能只是附加事件处理程序就像 DOM 一样。

幸运的是，如果您使用 SVG 而不是 canvas，那么您可以做到这一点，因为 SVG 中的所有形状都是 DOM 节点，就像 HTML 中的 div 和 span 一样。

很遗憾，IE 不支持 SVG。

幸运的是，在 IE 上你可以使用VML 而不是 SVG。

很遗憾，您不能使用 jQuery 轻松地为 SVG 和 VML 对象制作动画。

幸运的是，Raphaël 是一个 JavaScript 库，其 API 深受 jQuery 启发，可以为您完成所有工作。它在 IE 上使用 VML，在其他浏览器上使用 SVG。它适用于 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+。

这就是你如何制作一个红色圆圈，当鼠标悬停时它会慢慢变成黄色：

// make a Raphael "paper" similarly to an HTML5 canvas:
var paper = Raphael(10, 10, 320, 240);

// make a circle on this paper:
var circle = paper.circle(100, 80, 20);

// change some attributes:
circle.attr({
    fill: 'red'
});

// register mouse enter and mouse leave event handlers:
circle.hover(
    function() {
        circle.animate({
            fill: 'yellow'
        }, 300);
    },
    function() {
        circle.animate({
            fill: 'red'
        }, 300);
    }
);

就是这样——见DEMO。

请看这个更复杂的DEMO，它会形成一个圆圈，鼠标悬停时会完全按照您的要求进行操作 - 放大它，使其更不透明并更改颜色。

另请参阅我为this answer 写的关于拉斐尔的this demo。

更新

当我最初发布这个答案时，我写道，使用画布很难做到你所要求的，因为你必须维护一些在画布中不存在的对象层次结构，就像在 SVG 或 VML 中一样。这仍然是正确的，但是现在有一些库可以为您完成“非常困难”的部分，例如 EaselJS, KineticJS, Paper.js 或 Fabric.js 和其他一些人（有关更多信息，请参见 Fabric.js 的作者维护的 comparison of canvas libraries）。

【讨论】：

我很困惑：我们到底是幸运还是不幸？
幸运的是，SVG is supported 在 IE9 上。
@Derek：不幸的是，我们仍然需要支持 IE 7 和 8 (6?) :)

【解决方案2】：

谷歌在这个页面上使用了一些动画画布图标。 http://www.google.com/chromeos/features.html

当您深入研究代码时，您会发现他们使用了 JS Tweener。 http://coderepos.org/share/wiki/JSTweener

如果谷歌选择它，我认为它比 raphaelJS 更可靠;)。画布动画代码虽然非常复杂。我几乎不明白发生了什么。

【讨论】：