animacja ścieżki SVG przy zmianie wartości

Question

Próbuję utworzyć wykres za pomocą SVG i dyrektywy kątowej, aby zmienić dynamiczne części. Teraz zrobiłem tak:

http://plnkr.co/edit/TcbK7kyzM3tapDISxndh?p=preview

app.directive('pieChart', function($document) { 
    return { 
     restrict: "E", 
     template: '<svg width="500" height="500">' + 
      '<path d="M100,200 a150,150 0 1,0 150,-150" stroke="black" stroke-width="10" fill="none"></path>' + 
     '</svg>', 
     scope: { 
      value: '=' 
     }, 
     link: function(scope, elem, attr) { 
     } 
    } 
}); 

chcę mój wykres, aby wyglądać tak, kiedy to wartość 100%, a jeżeli wartość jest - powiedzmy - 45%, chciałbym lubię widzieć tę linię, ale tylko 45% jej długości od górnej środkowej. Prawdopodobnie muszę ponownie obliczyć wartość ścieżki ścieżki, ale chciałem zapytać, czy to możliwe, gdy zmieniam ścieżkę z JS, aby było animowane, podczas gdy zmienia się rozmiar?

Z góry dziękuję, lub jeśli ktoś z was zna dobry tutorial na ten temat, proszę go połączyć ze mną.

EDYCJA: Zmieniłem dyrektywę na prosty wykres słupkowy, ale jest to tylko na przykład, wiem, że można to zrobić bez SVG, ponieważ można zrobić to za pomocą div, ale chcę, aby wykres był bardziej złożony po.

Oto jsfiddle http://jsfiddle.net/fg9e7eo4/1/

w moim przykładzie, wykres wciąż animowanie i chciałbym, aby animować tylko raz i nie pozostają w tym punkcie.

Nawiasem mówiąc, jest to dyrektywa, że ​​staram się, aby to działało:

testApp.directive('pieChart', function() { 
    var html = 
    '<svg width="510" height="20" style="background: #fff">' + 
     '<path d="{{path}}" stroke="red" stroke-width="10" fill="none">' + 
     '<animate dur="1s" repeatCount="indefinite" attributeName="d" values="{{path2}}"/>' + 
     '</path>' + 
    '</svg>'; 

    return { 
    restrict: 'E', 
    template: html, 
    scope: { 
     'value': '=' 
    }, 

    link: function(scope, elem, attrs) { 

     scope.$watch('value', function(newValue, oldValue) { 
     scope.path = 'M 5 10, L ' + (newValue * 5) + ' 10'; 
     scope.path2 = 'M 5 10, L ' + (oldValue * 5) + ' 10; M 5 10, L ' + (newValue * 5) + ' 10'; 
     elem.children().children().beginElement(); 
     }); 

    } 
    }; 
}); 

Answer 1

Jeśli chcesz go animować tylko raz, a następnie zatrzymać zastąpić repeatCount = „nieokreślony” przez repeatCount = "1" wypełnienie = "zamrożenie"

Jeśli upewnisz się, że ścieżki w wartościach są spójne w liczbach i typach poleceń, powinieneś uzyskać płynną animację. Oto przykład:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> 
 
    <path d="M100,200 L150,200" stroke="black" stroke-width="10" fill="none"> 
 
     <animate attributeName="d" values="M100,200 L150,200;M100,200 L200, 200" fill="freeze" begin="1s" dur="2s" /> 
 
    </path> 
 
</svg>

SVG testsuite ma an example of path animation. i tam w3c primer on animation.

Answer 2

Jeśli chcesz użyć wykresu słupkowego, dlaczego nie używasz rect zamiast path? IMO, rect jest bardziej opisowy niż path.

Oto mój przykład użycia rect do animacji.

http://plnkr.co/edit/2hEzBqIVgh0rgE3D0Pd4?p=preview

Dla angularjs, wystarczy ustawić width i to atrybut.

<rect x="10" y="10" height="110" width="500" 
    style="stroke:#ff0000; fill: #0000ff"> 
    <animate 
     attributeName="width" 
     begin="0s" 
     dur="2s" 
     from="0" 
     to="500" 
    /> 
</rect> 

Ta odpowiedź jest również przydatna, jak sądzę.
SMIL animation on SVG ng-repeat'ed element only occurs on page load

Answer 3

Nie wiem, czy jesteś na próbowanie nowych wtyczek, ale od spojrzeń Easy Pie Chart.js ma to, co chcesz, to bardzo szybko skonfigurować i bardzo lekki. Jeśli jesteś ustawiony na używanie SVG, spójrz na Raphael.js, wiem, że możesz animować SVG (a nawet przekształcać je z jednego na drugiego).

Mam nadzieję, że to pomoże!