CODEWITHSUNDEEP
javascriptanimationraphael
matsko
matsko

Reputation: 22193

Animate Scaling with RaphaelJS

I'm trying to get the scaling animation to work with RaphaelJS, but I'm having no luck. This is what my code looks like:

paper.animate({ scale : 2 });

But the animation doesn't work. Is this the correct way to animate a scale effect using RaphaelJS or is something that has to manually animated (using a JavaScript interval and so on...)?

-- EDIT --

My mistake, I was referring to an element.

elementFromPaper.animate({ scale : 2 });

Upvotes: 0

Views: 3716

Answers (2)

qiao
qiao

Reputation: 18219

Paper is a container of elements in Raphael, and it simply doesn't have the animate method.
Only the elements such as circles, rects, etc .. has the animate method.
If you want to change the size of the container, you can use setSize.(But this will not scale any elements in the container).

EDIT: If you want to achieve an effect like zoom in or zoom out, you can use the setViewBox method.

EDIT2: scale is not in the list of element attributes, as listed in here

To animate with scale, you can use the generic transform parameter. 

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

I wrote a simple demo for you: http://jsfiddle.net/qiao/EhCyd/1/

Upvotes: 4

indieman
indieman

Reputation: 1121

The only native interaction with the canvas position is done through the method setViewBox, however it doesn't animate a transition to the canvas position or zoom level. To achieve an animation, you can use a nifty javascript animation method window.requestAnimationFrame to smoothly transition to the viewBox state that you want.

First of all, initialize the method for all browsers: 

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

Here is an example code for animating panning 

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

Upvotes: 2

Related Questions