使用GreenSock動畫不是SVG高空作業

我只想做一個很簡單的tweenMax動畫，其中條的高度去從"0"到"100%"，現在我的SVG看起來象下面這樣：使用GreenSock動畫不是SVG高空作業

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 69 64" style="enable-background:new 0 0 69 64;" xml:space="preserve"> 
      <style type="text/css"> 
       .st0{fill:#712215;} 
       .st1{fill:none;stroke:#712215;stroke-miterlimit:10;} 
      </style> 
      <path id="XMLID_8_" class="st0" d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9 
       C24,47,23.5,47.4,23,47.4z"/> 
      <path id="XMLID_7_" class="st0" d="M31.9,47.4h-5.4c-0.5,0-1-0.5-1-1V32.9c0-0.5,0.5-1,1-1h5.4c0.6,0,1,0.5,1,1v13.5 
       C32.9,47,32.5,47.4,31.9,47.4z"/> 
      <path id="XMLID_6_" class="st0" d="M41.9,47.4h-5.4c-0.6,0-1-0.5-1-1V36c0-0.5,0.4-1,1-1h5.4c0.5,0,1,0.5,1,1v10.5 
       C42.9,47,42.5,47.4,41.9,47.4z"/> 
      <path id="XMLID_5_" class="st0" d="M51,47.4h-5.4c-0.5,0-1-0.5-1-1V30c0-0.5,0.5-1,1-1H51c0.6,0,1,0.5,1,1v16.4 
       C52,47,51.5,47.4,51,47.4z"/> 
      <polygon id="XMLID_4_" class="st0" points="16.6,35 18,36.4 29.6,25.6 38.9,33 49.3,21.9 47.3,20 38.9,29.5 29.2,21.8 15.9,34.5 "/> 
      <polygon id="XMLID_3_" class="st0" points="43.2,17.8 51.7,17.9 51.9,26 "/> 
      <rect id="XMLID_2_" x="2.5" y="11.6" class="st1" width="63.5" height="40.8"/> 
      </svg>

FIDDLE HERE ，現在我有以下的javascript動畫條：

$(function() { 
    var tx = new TimelineMax(); 
    TweenMax.fromTo($('path')[0] , 2 , { css : { height : 0 } } , { css : { height : '100px' } }); 
});

但高度動畫簡化版，似乎工作，可有人指出完全是一個我做錯了什麼？

謝謝。

來源

2016-04-24 Alexander Solonik

問題是height不是路徑元素支持的屬性;

一個簡單的辦法將使用transform:scaleY：

TweenMax.fromTo($('path')[0], 2, { 
    css: { 
     transform: 'scaleY(0)' 
    // height: 0 
    } 
    }, { 
    css: { 
    transform: 'scaleY(1)' 
    //height: '100px' 
    } 
    });

fiddle

對於一個更加個性化的解決方案，你可能會考慮改變d屬性...

來源

2016-04-24 20:27:54 maioman

通常我會用clipPath並將整個酒吧移到頂部。見

<clipPath id="myClip"> 
    <path d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9 
      C24,47,23.5,47.4,23,47.4z" /> 
</clipPath> 

<g clip-path="url(#myClip)"> 
    <g id="path0" transform="translate(0 10)"> 
    <path id="XMLID_8_" class="st0" d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9 
      C24,47,23.5,47.4,23,47.4z" /> 
    </g> 
</g>

來源

2016-04-24 20:48:28

使用GreenSock動畫不是SVG高空作業

回答

相關問題