在canvas对象上使用jQuery animate [英] Using jQuery animate on canvas objects

问题描述

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

解决方案

不幸的是，你想做的是很难使用canvas （不再是这样 - 见下面的UPDATE），因为一旦你在canvas上绘制一个路径，它只是像素，所以你不能像DOM一样附加事件处理程序。

幸运的是，如果不使用canvas，您可以使用 SVG ，因为所有SVG中的形状都是DOM节点，就像HTML中的div和跨度。

不幸的是，IE不支持SVG。

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

不幸的是，您不能使用jQuery轻松地对SVG和VML对象进行动画处理。

幸运的是Raphaël，一个JavaScript库，其中的API大量灵感来自jQuery，这一切都为你。它使用VML在IE和SVG在其他bowsers。它适用于Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+和Internet Explorer 6.0+。

这将是一个红色圆圈在鼠标上慢慢地改变颜色为黄色：

  //使一个Raphael纸类似于HTML5画布：
 var paper = Raphael（10，10，320，240）; 
 
 //在这张纸上画一个圆圈：
 var circle = paper.circle（100，80，20）; 
 
 //改变一些属性：
 circle.attr（{
 fill：'red'
}）; 
 
 //注册鼠标输入和鼠标离开事件处理程序：
 circle.hover（
 function（）{
 circle.animate（{
 fill： 'yellow'
}，300）; 
}，
 function（）{
 circle.animate（{
 fill：'red'
} 300）; 
} 
）; 
  

就是这样 - 见 DEMO 。

查看更复杂 DEMO 创建一个圆形，鼠标悬停在鼠标悬停器上时，它会完全满足您的要求 - 放大它，使其更加不透明，

另请参阅我为此写的演示 关于Raphaël的这个回答。 / p>

UPDATE

当我最初发布此答案时，我写道你要的是很难做使用画布，因为你将不得不维护一些对象层次结构，不存在于画布，就像它在SVG或VML。它仍然是真的，但现在有图书馆可以做你的非常困难的部分，例如
EaselJS ，
KineticJS ，
Paper.js 或
面料。 js 和其他一些（参见画布库比较）作者Fabric.js for更多）。

I want to animate an html5 canvas element with just a simple shape drawn using the path mechanism. When hovering a mouse over it I want to zoom in on it, make it more opaque and change the colors. Can I do this with jQuery's animate() function? What's the best approach? Does canvas have a mechanism to do this kind of animation?

解决方案

Unfortunately what you want to do would be very difficult using canvas (no longer the case - see UPDATE below) because once you draw a path on canvas it's just pixels so you can't just attach event handlers to it like with the DOM.

Fortunately you can do it if instead of canvas you use SVG because all of the shapes in SVG are DOM nodes just like divs and spans in HTML.

Unfortunately, SVG is not supported on IE.

Fortunately on IE you can use VML instead of SVG.

Unfortunately you can't use jQuery to animate SVG and VML objects easily.

Fortunately there's Raphaël, a JavaScript library with API heavily inspired by jQuery that does it all for you. It uses VML on IE and SVG on other bowsers. It works on Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

This is how you would make a red circle that would slowly change color to yellow on mouse over:

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

And that's it – see DEMO.

See this more complicated DEMO that makes a circle and on mouse hover does exactly what you asked about – zoom in on it, make it more opaque and change the colors.

See also this demo that I wrote for this answer about Raphaël.

UPDATE

When I originally posted this answer I wrote that what you are asking for would be very difficult to do using canvas because you would have to maintain some object hierarchy that is not present in canvas like it is in SVG or VML. It is still true but now there are libraries that can do the "very difficult" part for you, like for example EaselJS, KineticJS, Paper.js or Fabric.js and some others (see this comparison of canvas libraries maintained by the author of Fabric.js for more).

这篇关于在canvas对象上使用jQuery animate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！