Масштабирование анимации с помощью RaphaelJS - PullRequest
Новая
       21

Масштабирование анимации с помощью RaphaelJS

0 голосов
/ 31 января 2012

Я пытаюсь заставить масштабную анимацию работать с RaphaelJS, но мне не повезло.Вот как выглядит мой код:

paper.animate ({scale: 2});

Но анимация не работает.Это правильный способ анимации эффекта масштаба с помощью RaphaelJS или это то, что нужно вручную анимировать (используя интервал JavaScript и т. Д.)?

- EDIT -

Моя ошибка, я имел в виду элемент.

elementFromPaper.animate ({scale: 2});

Ответы [ 2 ]

4 голосов
/ 31 января 2012

Paper - это контейнер элементов в Рафаэле, и у него просто нет метода animate.
Только элементы, такие как круги, контуры и т. Д., Имеют метод animate.
Если вы хотите изменить размер контейнера, вы можете использовать setSize . (Но это не приведет к масштабированию каких-либо элементов в контейнере).

РЕДАКТИРОВАТЬ: Если вы хотите добиться эффекта, такого как увеличение или уменьшение масштаба, вы можете использовать метод setViewBox .

EDIT2: scale отсутствует в списке атрибутов элемента, как указано в здесь

Для анимации с использованием масштаба вы можете использовать общий параметр transform . 

ele.animate({transform: 's2'}) // here `s2` means a 2x scale

Я написал для вас простое демо: http://jsfiddle.net/qiao/EhCyd/1/

2 голосов
/ 14 августа 2012

Единственное встроенное взаимодействие с положением холста осуществляется с помощью метода setViewBox , однако оно не анимирует переход к положению холста или уровню масштабирования.Чтобы добиться анимации, вы можете использовать изящный метод анимации javascript window.requestAnimationFrame , чтобы плавно перейти к желаемому состоянию viewBox.

Прежде всего, инициализируйте метод для всех браузеров:

    window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();

Вот пример кода для анимации панорамирования 

var viewBoxX = 0;
var viewBoxY = 0;

//@param direction 'up', 'down', 'right' or 'left'
function pan(direction) {
    var start = Date.now();

    function step(timestamp) {
        var progress = timestamp - start;
        var x = viewBoxX,
            y = viewBoxY;

        if(direction == 'up') {
            y = viewBoxY - progress * 0.7;
        }
        else if (direction == 'down') {
            y = viewBoxY + progress * 0.7;
        }
        else if(direction == 'right') {
            x = viewBoxX + progress * 0.7;
        }
        else {
            x = viewBoxX - progress * 0.7;
        }

        //Now we set the view box at the modified x and y coordinates
        //Replace 100,100 with the size of your canvas
        paper.setViewBox(x, y, 100, 100);
        if (progress < 400) {
            window.requestAnimFrame(step);
        }
        else {
            viewBoxX = x;
            viewBoxY = y;
        }
    }
    window.requestAnimFrame(step);
}
...