MooTools到带有Canvas元素的jQuery

Question

我发现了一个JS Fiddle，它为我正在进行的项目提供了完美的解决方案。不幸的是，在Fiddle中选择的框架是MooTools。我在jQuery 1.9.1中工作，当我将框架切换到jQuery时，小提琴就坏了。我试着改变了一些我认为可能导致问题的事情，但没有成功。我希望有人对这两个框架都足够熟悉，他们可以开发出一个jQuery工作版本。。。

http://jsfiddle.net/oskar/Aapn8/

我想这可能是因为变量引用id:的方式

var range = document.id('range');

但我希望看到它像。。

var range = document.getElementById('range');

它一定比这更深，但那是我开始的。我只是对Canvas和MooTools的了解不够，不知道该找什么。

提前感谢您的帮助！

Answer 1

您对了第一部分，它只需要更改选择器和mousemove事件处理程序。但是，对于本例中使用MooTools Fx类的动画作者来说，它是所有MooTools动画的基类，其方法可以在不需要绑定特定元素和属性的情况下使用。

另一方面，我不知道jQuery是否提供了类似于MooTools Fx类的东西(可能我错了)，jQuery对所有类型的动画都使用animate方法，但必须有一个元素和一些CSS属性是动画化的。

一种解决方法是创建一个虚拟元素，并使用一些任意的数字属性(如宽度)开始动画。现在我们可以在画布上使用step函数(它在转换的每一步都会触发)来制作动画。

jQuery(function ($) {
var range = $('#range');
var bg = $('#counter').get( 0 );
var ctx = bg.getContext('2d');
var imd = null;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
ctx.beginPath();
ctx.strokeStyle = '#99CC33';
ctx.lineCap = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10.0;
imd = ctx.getImageData(0, 0, 240, 240);
var draw = function( current ) {
ctx.putImageData(imd, 0, 0);
ctx.beginPath();
ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false);
ctx.stroke();
}
range.on( 'mousemove', function() {
draw(this.value / 100);     
});
$('<div />').animate({ width: 100 }, {
duration: 2000, 
easing: "easeOutBounce",
step: function( now ) {
draw( now / 100 );
range.val( now );
}
});
});

小提琴

注意：

MooTools示例使用默认情况下在jQuery中未实现的bounce:out转换。jQuery UI库中提供了其他jQuery轻松功能，请访问下载站点，选择Bounce Effect，下载并打开文件，找到jquery-ui-1.10.4.custom.min.js文件并将其包含在您的项目中。