뒤집기없이 svg 모핑

Question

저는 베 지어 모양과 그 미러 사본 사이에서 모프를 만드는 간단하고 자유로운 방법을 찾고자했습니다. 그들은 같은 점수를 가지고 있기 때문에 쉬운 일이라고 생각했습니다. 그렇지 않았습니다. 나는 KUTE와 SVG morpheus를 시도했다. Kute는 불필요한 수직 플립을 수행하고, Morpheus는 불필요한 수평 플립 (codepen here)을 수행했습니다. 트릭을 한 유일한 자바 스크립트 라이브러리는 유료 MorphSVG 플러그인이었습니다. (codepen here) 그것은 유감 스럽지만 앞으로는 더 싼 해결책을 찾을 수 있기를 바랍니다. 아무도 모른다면 알려주세요. 내 옛날 애니메이션을 기반으로

var svgMorpheus = new SVGMorpheus('#icon', {rotation: "none"}); 
var icons = ['question', 'answer']; 
var current = 0; 

Answer 1

빠른 해킹 : http://jsfiddle.net/alkhoo/JwkYm/11/ - 마우스를 통해 애니메이션을 활성화합니다.

참고 : greensock 애니메이션에는 paths 값이 포함되어 있습니다.

$(function() { 
 

 
    //Grab an array of all the main SVG Elements 
 
    var containers = $(".category .item a"); 
 

 
    //Define some vars that we will use later 
 
    var speed = 1000; 
 
    var animation = mina.backout; 
 

 
    //Loop through all of these containers and insert the SVG's 
 
    containers.each(function (index) { 
 

 
     //Get each of our SVG tags 
 
     var s = Snap(".animated-overlay.svg-" + index); 
 

 
     //Define our Paths 
 

 
     var defaultWhitePath = "M1.8978756799999998,64.59785067199999 C4.5919579200000005,94.29202528 74.7848272,99.01918832 128.25879712,95.43520928 361.0060832,78.08572735999999 468.2360832,8.157339040000004 562.54879712,6.478409280000005 646.3748272,4.004430240000005 663.93195792,95.19048896 664.08987568,93.45505007999999 664.24724128,114.2054704 664.1263182399999,144.17150224 664.1263182399999,166.67625712 443.1668704,166.67625712 222.2168704,166.67625712 1.26631824,166.67625712 1.26631824,165.36156416 -0.8027587199999999,36.217596 1.8898756799999998,64.59746416 z"; 
 

 
     //Define our Hover Paths 
 
     var hoverWhitePath = "M0.6989956799999999,94.82189867199999 C0.6932379199999996,94.83954528000001 15.029627200000007,-2.205931680000006 100.71287712,0.6387292800000068 186.5548832,3.4719673599999936 293.78488319999997,81.96869904 535.00287712,100.48192928 586.6196272000001,104.43659024 660.0332379199999,93.83112896 662.89099568,62.42577008 665.7387612800001,31.0390704 663.55047824,166.25166224 663.55047824,166.27033712000002 442.6004704,166.27033712000002 221.65047040000002,166.27033712000002 0.6904782399999999,166.27033712000002 0.6904782399999999,142.47900416000002 0.6887612800000001,118.58159599999999 0.6909956799999999,94.81490416 z"; 
 

 
     //Load up the default paths in the SVG 
 
     var whitePath = s.path(defaultWhitePath); 
 

 
     whitePath.attr({ 
 
      fill: "#00f" 
 
     }); 
 

 
     //Let's group our paths, it doesn't seem like you can animate the whole group though :(
 
     var paths = s.group(whitePath); 
 

 
     //Animate on Mouse Enter 
 
     $(containers[index]).mouseenter(function() { 
 
      whitePath.animate({ 
 
       path: hoverWhitePath 
 
      }, speed, animation); 
 
     }); 
 

 
     //Animate on Mouse Leave, return the paths to the default 
 
     $(containers[index]).mouseleave(function() { 
 
      whitePath.animate({ 
 
       path: defaultWhitePath 
 
      }, speed, animation); 
 
     }); 
 

 

 

 
    }); 
 

 
});

body { 
 
    background: #ddd; 
 
} 
 
.item { 
 
    max-height: 300px; 
 
    background: #ddd; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="category"> 
 
    <div class="item" style="background-image: url('images/category.jpg');"> <a href="#" title="Category Title"> 
 
      
 
      <svg viewbox="0, 0, 700, 300" preserveAspectRatio="none" class="animated-overlay svg-0"> 
 
       
 
      </svg> 
 
    
 
     </a> 
 

 
    </div> 
 
</div>