Вам нужно реализовать условие, чтобы вы могли разорвать цикл, например (при необходимости принять):

var isRunning = true;

function loop() {

    ... funky stuff here ...

    /// test condition before looping
    if (isRunning) requestAnimationFrame(loop);
}

Теперь, когда вы установите isRunning на false, цикл прервется. Для удобства рекомендуется иметь метод для запуска и остановки цикла:

function startLoop(state) {

    if (state && !isRunning) {
        isRunning = true;
        loop();             /// starts loop

    } else if (!state && isRunning) {
        isRunning = false;
    }
}

Условие может быть установлено чем угодно, что вам нужно, например, при обратном вызове после завершения анимации и т. д. Важной частью является то, что флаг условия доступен для обеих областей, использующих его (т.е. чаще всего в глобальном объем).

ОБНОВЛЕНИЕ:

Более конкретно в этом случае то, что ваше условие (радиус) никогда не достигнет условия, необходимого для остановки цикла.

Вот что вы можете сделать, чтобы это исправить:

ДЕМО

var isPlaying = false;

function animate(){
    /**
     * To make sure you will reach the condition required you need
     * to either make sure you have a fall-out for the steps or the
     * step will become 0 not adding/subtracting anything so your
     * checks below won't trigger. Here we can use a simple max of
     * the step and a static value to make sure the value is always > 0
    */
    if(mouseover){
        radius += Math.max( ((targetRadius-radius)/ease)*speed, 0.5);
    } else {
        radius -= Math.max( ((radius-baseRadius)/ease)*speed,   0.5);
    }

    /**
     * Now the checks will trigger properly and we can use the
     * isPlaying flag to stop the loop when targets are reached.
    */
    if(radius >= targetRadius) {
        radius = targetRadius;
        isPlaying = false;              /// stop loop after this
    } else if (radius <= baseRadius) {
        radius = baseRadius;
        isPlaying = false;              /// stop loop after this
    }
    
    drawDday(radius);

    /// loop?
    if (isPlaying === true) requestAnimationFrame(animate);
}

Чтобы запустить цикл, мы используем метод, который проверяет, работает ли цикл, если нет, он сбрасывает флаг isPlaying и запускает цикл. Мы делаем это внутри обоих mouseover и mouseout:

canvas.on('mouseover', function(e){
    mouseover = true;
    startAnim();

}).on('mouseout', function(){
    mouseover = false;
    startAnim();
});

Метод просто проверяет isPlaying, и если он не установлен, он устанавливает значение true и запускает цикл — так что цикл запускается только один раз:

function startAnim() {
    if (!isPlaying) {
        isPlaying = true;
        requestAnimationFrame(animate);
    }
}

В демо я добавил ведение журнала консоли, чтобы показать, когда цикл запущен и когда цели поражены.

Надеюсь это поможет.

Причина, по которой ваша функция animate вызывается непрерывно, заключается в том, что вы начинаете с вызова requestAnimationFrame(animate);, а затем каждый вызов animate безоговорочно вызывает requestAnimationFrame(animate); снова. Цикл никогда не будет прерван, если вы не используете cancelAnimationFrame в какой-то момент (чего вы не делаете) или убедитесь, что animate запрашивает другой кадр, только если это необходимо.

Другая проблема заключается в том, что radius в настоящее время никогда не достигнет ни targetRadius, ни baseRadius, и, следовательно, ни одно из следующих утверждений никогда не будет истинным:

if(radius > targetRadius) radius = targetRadius;
if(radius < baseRadius) radius = baseRadius;

Это напрямую не отвечает за непрерывные вызовы animate, но поскольку targetRadius и baseRadius используются для указания конечных точек вашей анимации, нам нужно сформировать с ними какое-то разумное условное выражение.

Итак, вы можете сделать что-то вроде: http://jsfiddle.net/PLDUq/9/

var radius = baseRadius = 50,
    targetRadius = 110,
    ease = 50,
    speed = 12,
    currentAnim;

function animate(){
    if(mouseover){
        radius += ((targetRadius-radius)/ease)*speed;
    } else {
        radius -= ((radius-baseRadius)/ease)*speed;
    }

    drawDday(radius);

    if(Math.round(radius) >= targetRadius) {
        // uses Math.round() to ensure condition can be fulfilled

        radius = targetRadius;
        return; // doesn't call next frame
    }
    if(Math.round(radius) <= baseRadius) {
        radius = baseRadius;
        return; // doesn't call next frame
    }

    requestAnimationFrame(animate);
}

canvas.on('mouseenter mouseleave', function (e) {
    if (currentAnim) {requestAnimationFrame(currentAnim);}
    // cancels current animation if one is playing to
    // prevent several concurrent loops calling animate()

    mouseover = (e.type === 'mouseenter');

    requestAnimationFrame(animate);
});