MooTools для jQuery с элементом Canvas

Я нашел JS Fiddle, который обеспечивает идеальное решение для проекта, над которым я работаю. К сожалению, в скрипте выбрана платформа MooTools. Я работаю в jQuery 1.9.1, и когда я переключаю фреймворк на jQuery, скрипка ломается. Я попытался изменить несколько вещей, которые, как я думал, могут быть причиной проблемы, но безуспешно. Я надеюсь, что кто-то достаточно знаком с обеими фреймворками, чтобы они могли создать рабочую версию jQuery этого...

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

Я подумал, что это может быть что-то в том, как переменная ссылается на идентификатор:

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

но я ожидал увидеть это как ..

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

Это должно быть глубже, чем это, но это то, с чего я начал. У меня просто недостаточно знаний о Canvas и MooTools, чтобы знать, что искать.

Заранее благодарю за любую помощь!


javascript canvas jquery mootools
person Archetype    schedule 20.02.2014    source источник
comment
В этой скрипке используется Moo.FX, а в jQuery его нет. Что вы можете сделать, так это добавить MooTools на свою страницу. После скрипта jQuery добавьте Mootools. Или используйте просто MooTools, и мы поможем вам преобразовать ваш jQuery :)   -  person Sergio    schedule 20.02.2014
comment
Это дубликат: stackoverflow .com/questions/21952749/   -  person Sergio    schedule 22.02.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вы правы для первой части, нужно только изменить селекторы и обработчик события 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 );
        }
    });

});

FIDDLE

Примечание.

В примере MooTools используется переход bounce:out, который по умолчанию не реализован в jQuery. Дополнительные функции смягчения jQuery доступны в библиотеке jQuery UI, перейдите на сайт скачать, выберите Bounce Effect, загрузите и откройте файл , найдите и включите файл jquery-ui-1.10.4.custom.min.js в свой проект.

person Danijel    schedule 14.03.2014