-1

我正在尝试使用 jQuery 为 svg 对象设置动画。动画应该是这样的：

  • 单击主要对象-> 向上翻译主要对象。
  • 单击另一个对象->从实际位置开始以另一种方式翻译主要对象。

看看这个http://jsfiddle.net/MaxMarkson/khZqW/2/

$('#ellipseRed').click(function() {
    $(this)
    .css({"min-height": 0})
    .animate(
        {"min-height": -150},
        {duration: 1000,
         step: function(top){
             this.setAttribute("transform", "translate(0,"+top+")");
         }
        }
    );
});

$('#ellipseBlue').click(function() {
    // Getting
    var xforms = $('#ellipseRed')[0].getAttribute('transform');
    var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
    var firstX,firstY;
    if(parts == null){
        $('#ellipseRed')[0].setAttribute('transform','translate(0,0)');
        firstX = 0;
        firstY = 0;
    }
    else{
        firstX = parts[1];
        firstY = parts[2];
    }
    // Setting
    //
    var animation = {};
    animation.x = firstX + 200;
    animation.y = firstY - 100;

    $('#ellipseRed')
    .css({"min-height": 0})
    .css({"left":0})
    .animate(
        {"min-height": animation.y},
        {"left": animation.x},
        {duration: 1000,
         step: function(top, left){
             this.setAttribute("transform", "translate("+left+","+top+")");
         }
        }
    );
});

主要对象是红色椭圆，通过单击它应用的翻译工作正常，其他动画不起作用，我不知道为什么。

谢谢！

4

2 回答 2

3

试试这个：- http://jsfiddle.net/adiioo7/khZqW/8/

JS

$('#ellipseRed').click(function () {
    $(this)
        .css({
        "min-height": 0
    })
        .animate({
        "min-height": -150
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(0," + top + ")");
        }
    });
});

$('#ellipseBlue').click(function () {
    // Get the value of the transform attribute
    var ellipse_red = $('#ellipseRed');
    var xforms = ellipse_red.attr('transform');
    var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
    var firstX, firstY;
    // If the transform attribute doesn't exist then add it.
    if (parts == null) {
        ellipse_red.attr('transform', 'translate(0,0)');
        firstX = 0;
        firstY = 0;
    }
    // Otherwise take the values read.
    else {
        firstX = parseInt(parts[1]);
        firstY = parseInt(parts[2]);
    }
    // Set the arrive point
    var animation = {};
    animation.x = firstX + 200;
    animation.y = firstY - 100;

    // Try to animate!
    ellipse_red.animate({
        "min-height": -200
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(" + -top + "," + firstY + ")");
        }
    });
});
于 2013-05-29T08:54:54.820 回答
-2

好的，我已经达到了目标：http: //jsfiddle.net/MaxMarkson/khZqW/12/

$('#ellipseRed').click(function () {
    $(this)
        .css({
        "min-height": 0
    })
        .animate({
        "min-height": -150
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(0," + top + ")");
        }
    });
});

$('#ellipseBlue').click(function () {
    // Get the value of the transform attribute
    var ellipse_red = $('#ellipseRed');
    var xforms = ellipse_red.attr('transform');
    var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
    var firstX, firstY;
    // If the transform attribute doesn't exist then add it.
    if (parts == null) {
        ellipse_red.attr('transform', 'translate(0,0)');
        firstX = 0;
        firstY = 0;
    }
    // Otherwise take the values read.
    else {
        firstX = parseInt(parts[1]);
        firstY = parseInt(parts[2]);
    }
    // Set the arrive point
    var animation = {};
    var delta = {};
    delta.x = 20;
    delta.y = -50;
    animation.x = firstX + delta.x;
    animation.y = firstY + delta.y;

    // Try to animate!
    ellipse_red.animate({
        "increment": animation.x,
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(" + top + "," + (top*(delta.y/delta.x)) + ")");
        }
    });
});

我不确定这是不是最好的解决方案，但它有效：我只使用一个参数并使用“转换参数”评估每个轴上的移动，在这种情况下，y 轴的两个增量增量和 x 的 1 之间的划分轴。

于 2013-05-29T10:10:48.870 回答