Question

我试图为具有3个阶段的SVG设置动画：初始，悬停和点击。我想从一行动画所有舞台。我使用Snap SVG来实现它。

您可以在http://codepen.io/anon/pen/BjEeZR查看工作代码表请点击笔中的红色圆圈

如您所见，路径是从视图框的左上角设置的。点击＆＃39;点击＆＃39;阶段比其他两个阶段更大。因此，当触发点击时，路径将向下动画。

如何在我的路径之间设置动画，以便从视图框的中心点触发动画？

提前致谢！

HTML：

<a href="#" id="chooseLang" class="hotCornersBtn">
     <svg></svg>
</a>

jquery的：

//SVG-snap
    var none = "none"
        sausRed = "#ff1a29"
        strokeWidth = 3

        chooseLang = Snap("#chooseLang svg");

        initLangSvg = "M21.5,11.5c0,2.8-1.1,5.3-2.9,7.1c-1.8,1.8-4.3,2.9-7.1,2.9c-2.8,0-5.3-1.1-7.1-2.9c-1.8-1.8-2.9-4.3-2.9-7.1c0-2.8,1.1-5.3,2.9-7.1c1.8-1.8,4.3-2.9,7.1-2.9c2.8,0,5.3,1.1,7.1,2.9C20.4,6.2,21.5,8.7,21.5,11.5z"
        hoverLangSvg = "M21.5,13.5c0,2.8-2.1,3.8-4.6,5c-4.7,2.3-3.7,5.7-6.3,7s-8.4,0.8-9.1-3.9c-0.6-4.1,1.1-5.3,1.1-8.1c0-2.8-2.5-4.9-0.1-8.1c1.8-2.3,3.6-3.9,9.1-3.9c5.2,0,4.1,4.2,7,6C20.9,8.8,21.5,10.7,21.5,13.5z"
        clickLangSvg = "M33.1,18.2c1.1,3.9-4.3,8.6-10.6,9.3c-5.4,0.6-1.8,6.9-7.1,8.9c-6.7,2.6-9-0.7-8.5-6c0.5-4.6-9.6-6-3.5-12C6.7,15.3,0.6,10.1,4.9,7c4-2.9,4,7.6,13-4.1c2.7-3.5,11.4-0.1,7.4,8.2C22.4,17.2,31.2,11.6,33.1,18.2z"

        boundingBox = chooseLang.rect(0, 0, 40, 40).attr({fill: none, stroke: none, strokeWidth: none});

        outerCircle = chooseLang.path(initLangSvg).attr({viewBox:"0,0,40,40", preserveAspectRatio:"xMidYMin", fill: none, stroke: sausRed, strokeWidth: strokeWidth});

        boundingBoxGroup = chooseLang.group(outerCircle, boundingBox); 


    function chooseLangInit() {
        outerCircle.animate({d:initLangSvg}, 400);
    }

    function chooseLangHover() {
        outerCircle.animate({d:hoverLangSvg}, 400);
    } 

    function chooseLangClick() {
        outerCircle.animate({d:clickLangSvg}, 400);
    } 


////
$('document').ready(function() {


    //  
    $( "#chooseLang" ).hover(
      function() {
         chooseLangHover(); 
      }, function() {
         chooseLangInit();

      }
    ).click(function() {
        chooseLangClick();
    });



});

Answer 1

以下是使用@ Ian Snap.path.map()方法在动画制作动画之前将两条第一条路径移近中心的方法：

var matrix = new Snap.Matrix();
initLangSvg  = Snap.path.map(initLangSvg, matrix.translate(4,7));
hoverLangSvg = Snap.path.map(hoverLangSvg, matrix.translate(1,-1));

更新了笔：http://codepen.io/Sphinxxxx/pen/EPzmgO

来自中心点的SVG路径动画

1 个答案: