MooTools to jQuery with Canvas element

Question

I have found a JS Fiddle that provides a perfect solution for a project I am working on. Unfortunately the framework selected in the fiddle is MooTools. I am working in jQuery 1.9.1 and when I switch framework to jQuery the fiddle breaks. I have tried to change out a few of the things I thought might be causing the issue, but no luck. I'm hoping someone has enough familiarity with both frameworks that they could fork off a jQuery working version of this...

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

I thought it might be something in how the variable is referencing the id:

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

but I would expect to see it like..

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

It's got to be deeper than that, but that is were I started. I just don't have enough knowledge of Canvas and MooTools to know what to look for.

Thanks in advance for any help!

Answer 1

You're right for the first part, it only needs to change the selectors and the mousemove event handler. But, for the animation author in this example uses MooTools Fx class, it’s the base class for all MooTools animations and its methods can be used without the need to bound a particular element and properties to it.

On the other hand, I do not know if jQuery offers something similar to the MooTools Fx class (it is possible that I'm wrong here), jQuery uses animate method for all sort of animations but there must be an element and some CSS properties that are animated.

One workaround is to create a dummy element and to start the animation with some arbitrary numerical property (as width). Now we can use step function (it is fired on every step of a transition) for our animation on canvas.

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

});

FIDDLE

Note:

MooTools example uses a bounce:out transition that is not implemented in the jQuery by default. Additional jQuery easing functions are available in the jQuery UI library, go to download site, select Bounce Effect, download and open the file, find and include jquery-ui-1.10.4.custom.min.js file in your project.