Question

我想使用路径机制绘制一个简单的形状来设置html5画布元素的动画。当鼠标悬停在它上面时，我想放大它，使它更不透明并改变颜色。我可以使用jQuery的animate（）函数吗？什么是最好的方法？ canvas是否有机制来执行此类动画？

Answer 1

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

幸运的是，如果使用SVG代替画布，你可以这样做，因为SVG中的所有形状都是DOM节点，就像HTML中的div和span一样。

不幸的是，IE不支持SVG。

幸运的是，在IE上，您可以使用VML代替SVG。

不幸的是，您无法使用jQuery轻松地为SVG和VML对象制作动画。

幸运的是，Raphaël是一个JavaScript库，其API受到jQuery的启发，可以为您完成所有工作。它在IE上使用VML，在其他bowsers上使用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 demo撰写的关于Raphaël的this answer。

更新

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

Answer 2

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

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

我认为如果google选择它，它比raphaelJS更可靠;）。但是，Canvas动画代码非常复杂。我几乎不明白发生了什么事。

在画布对象上使用jQuery动画

2 个答案:

更新