How do you animate path morphs inside of loaded SVG with Snap.svg?

问题

I know you can animate path morhs with snap.svg (How to animate path morphs using snap.svg)

Is it possible to 'load' a path and then animate path morph? Or do you HAVE to define the path inside of 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 here - http://jsfiddle.net/1wqewzs3/2/

Thanks

回答1:

You can animate following a load or whatever really, the main thing is that the variables are defined somewhere accessible, and the animation is only run after the load.

In this particular case, the main error is that you are defining the arm, forearm, bicep variables within the Snap.load function, and then trying to use them in your animation function (which isn't aware of those variables).

Couple of options...

make arm, forearm, bicep all global variables ( use 'var' at the beginning of your script, if all the relevant bits are in an immediate mode function, it should limit scope which maybe better ). This is probably the simplest.

Write your animation with a select...

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

来源：https://stackoverflow.com/questions/25678159/how-do-you-animate-path-morphs-inside-of-loaded-svg-with-snap-svg

标签

javascript

jquery

animation

svg

snap.svg