Question

我正在努力让缩放动画与RaphaelJS合作，但我没有运气。这就是我的代码：

paper.animate（{ 规模：2 }）;

但动画不起作用。这是使用RaphaelJS制作缩放效果动画的正确方法，还是必须手动设置动画（使用JavaScript间隔等等）？

- 编辑 -

我的错误，我指的是一个元素。

elementFromPaper.animate（{ 规模：2 }）;

Answer 1

Paper是Raphael中元素的容器，它没有animate方法。
只有圆圈，圆圈等元素才有animate方法如果要更改容器的大小，可以使用setSize。（但这不会扩展容器中的任何元素）。

编辑：如果要实现放大或缩小等效果，可以使用setViewBox方法。

EDIT2：scale不在here

中列出的元素属性列表中

要使用比例制作动画，您可以使用通用transform参数。

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

我为你写了一个简单的演示：http://jsfiddle.net/qiao/EhCyd/1/

Answer 2

与画布位置的唯一本机交互是通过方法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);
}

使用RaphaelJS进行动画缩放

2 个答案: