在画布对象上使用jQuery动画

Question

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

Answer 1

不幸的是你想要做的事情使用canvas非常困难(不再是这种情况 - 请参阅下面的UPDATE),因为一旦你在画布上绘制一个路径,它只是像素,所以你不能像使用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,它创建一个圆圈,鼠标悬停完全符合您的要求 - 放大它,使其更不透明并更改颜色.

另请参阅我为此回答有关Raphaël的演示.

UPDATE

当我最初发布这个答案时,我写道,你要求的东西使用canvas非常困难,因为你必须维护一些画布中不存在的对象层次结构,就像它在SVG或VML中一样.它仍然是真的,但是现在有些库可以为你做"非常困难"的部分,例如 EaselJS, KineticJS, Paper.js或 Fabric.js等等(参见作者所保持的画布库的比较) Fabric.js更多).