你如何动画路径以Snap.svg加载SVG内摇身一变？ [英] How do you animate path morphs inside of loaded SVG with Snap.svg?

问题描述

我知道你可以动画路径morhs与snap.svg（如何动画路径中使用snap.svg ）摇身一变

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

有没有可能'负荷'的路径，然后动画路径变形？还是你必须定义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 - http://jsfiddle.net/1wqewzs3/2/

感谢

推荐答案

您可以动画以下的负载或任何真正的，主要的是这两个变量定义的地方访问，动画只是后负荷运行。

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.

在这种特殊情况下，主要的错误就是你所定义的上臂，前臂，在Snap.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).

选项...夫妇

1. 请上臂，前臂，二头肌所有的全局变量（使用无功在脚本的开始，如果所有相关位在即时模式功能，它应该限制范围这可能更好）。这可能是最简单的。

1. 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);

这篇关于你如何动画路径以Snap.svg加载SVG内摇身一变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！