拉斐尔视框动画缩放答案

【问题标题】：raphael viewbox animated zoom拉斐尔视框动画缩放
【发布时间】：2012-11-14 09:38:37
【问题描述】：

我正在使用 javascript 和 Raphael 库构建一种 javascript 地图。单击时我可以放大对象，但我希望它具有动画效果（例如慢慢潜入等等）。有没有办法在不重新发明轮子的情况下做到这一点？

【问题讨论】：

查看类似问题：stackoverflow.com/questions/7736690/…
我的意思更多的是“动画（...）”，所以我可以做的不仅仅是平滑缩放。
我认为您应该返回并再次查看 Joan 的链接 - @patrics 答案（如果您问我，这同样值得接受！）看起来很适合您正在寻找的东西.添加缓动函数也很简单......

【解决方案1】：

没有理由不能为 svg 对象的视图框设置动画 - Raphael 根本没有提供开箱即用的此类功能。但是，创建插件相当简单。例如：

Raphael.fn.animateViewBox = function animateViewBox( x, y, w, h, duration, easing_function, callback )
{
    var cx = this._viewBox ? this._viewBox[0] : 0,
        dx = x - cx,
        cy = this._viewBox ? this._viewBox[1] : 0,
        dy = y - cy,
        cw = this._viewBox ? this._viewBox[2] : this.width,
        dw = w - cw,
        ch = this._viewBox ? this._viewBox[3] : this.height,
        dh = h - ch,
        self = this;;
    easing_function = easing_function || "linear";

    var interval = 25;
    var steps = duration / interval;
    var current_step = 0;
    var easing_formula = Raphael.easing_formulas[easing_function];

    var intervalID = setInterval( function()
        {
            var ratio = current_step / steps;
            self.setViewBox( cx + dx * easing_formula( ratio ),
                             cy + dy * easing_formula( ratio ),
                             cw + dw * easing_formula( ratio ),
                             ch + dh * easing_formula( ratio ), false );
            if ( current_step++ >= steps )
            {
                clearInterval( intervalID );
                callback && callback();
            }
        }, interval );
}

安装此插件后实例化的任何纸张都可以使用与 Raphael 内置的 animate 方法完全相同的方法使用 animateViewBox。比如……

var paper = Raphael( 0, 0, 640, 480 );
paper.animateViewBox( 100, 100, 320, 240, 5000, '<>', function()
    {
        alert("View box updated!  What's next?" );
    } );

演示已上演here。

【讨论】：

太棒了！但是现在我遇到了一个新问题。
我很高兴看到新问题很容易解决！

【解决方案2】：

Raphael 动画通过动画元素属性来工作。当你调用 element.animate 时，你提供了最终的对象参数，到达那里所需的时间，如果你不希望它是线性的，可能还有一个缓动函数。

例如，要放大/缩小一个圆圈，您可以考虑以下示例：http://jsfiddle.net/eUfCg/

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");


var zoomed = false;

circle.click(function () { 
    if (zoomed) {
        this.animate({ transform: "s1" }, 500);
        zoomed = false;
    } else {
        this.animate({ transform: "s4" }, 500);
        zoomed = true;
    }
});

动画圆的变换属性。要缩放您的地图，您应该将所有元素放在一个组中，并为组的变换属性设置动画，同时考虑您想要最终得到的比例和平移。

有关转换属性的更多信息，请参阅http://raphaeljs.com/reference.html#Element.transform。

【讨论】：

只适用于一个对象，对于多个对象，它们只会增长，但不会移动。
您使用 paper.set() 将所有内容放入集合中并缩放集合。所以是的，它只适用于一个对象，但您可以将所有内容组合到一个对象中。
另外有许多动画视图的实现groups.google.com/forum/?fromgroups=#!topic/raphaeljs/…