如何使用 Snap.svg 为加载的 SVG 内的路径变形设置动画？

Question

我知道你可以使用 snap.svg (How to animate path morphs using snap.svg) 为路径 morhs 设置动画

是否可以“加载”路径，然后为路径变形设置动画？还是必须在 Snap.svg 中定义路径？

(function($) {

    'use strict';

    // grab the empty svg element in the html
    var s = Snap(800,600);

    // load the svg and grab the #arm and its inner elemmnts
    Snap.load('body.svg', function(f) {
        var arm = f.select('#arm'),
            forearm = f.select('#forearm'),
            bicep = f.select('#bicep');
        s.append(arm);
        s.append(forearm);
        s.append(bicep);
        anim1();
    });


// animate rotate the forearm graphic
var anim1 = function() {
    forearm.animate({
        'transform': 'r45,320,120'
    }, 1000, mina.linear, anim2);
};

// animate morph from the svg images current path coordinates top the ones below
var anim2 = function() {
    bicep.animate({
        d: 'M337.889,188c-12.064-11.708-28.073-93.482-89.777-92.889c-62.222,3.333-93,104.555-93,104.555l1.667,49.445 c29.608,30.553,96.669,99.406,178.333,3.333L337.889,188z'
    }, 1000, mina.bounce, anim3);
};

// animate morph from the svg images current path coordinates top the ones below
var anim3 = function() {
    forearm.animate({
        d: 'M174.333,250.938c0,0,19.659-36.111,17.816-98.333c-25.316-59.032-31.731-75.007-24.267-84.445l-27.338,1.667 c-35.496,57.849-82.325,139.528-1.843,178.334L174.333,250.938z'
    }, 1000, mina.bounce);
};



})(jQuery);

jsfiddle 在这里 - http://jsfiddle.net/1wqewzs3/2/

谢谢

Answer 1

您可以在加载或其他任何实际情况下进行动画处理，主要是变量定义在可访问的位置，并且动画仅在加载后运行。

在这种特殊情况下，主要错误是您在 Snap.load 函数中定义手臂、前臂、二头肌变量，然后尝试在动画函数中使用它们（不知道这些变量） .

几个选项...

1. 使手臂、前臂、二头肌成为所有全局变量（在脚本开头使用“var”，如果所有相关位都处于立即模式函数中，它应该限制范围，这可能更好）。这可能是最简单的。

2. 使用选择编写动画...

   s.select('#forearm').animate({
               'transform': 'r45,320,120'
           }, 1000, mina.linear, anim2);