更改值时动画SVG路径

我正尝试使用SVG和角度指令来创建图形以更改动态部分。现在，我已经做到了这一点：更改值时动画SVG路径

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) { 
     } 
    } 
});

我希望我的图表看起来像这样当它是100％的值，而当值是 - 让我们说 - 45％，我会喜欢看这条线，但只有45％从顶尖中心开始。我可能不得不重新计算路径的路径值，但我想问一下，是否有可能在改变路径时使用JS使其在改变大小时变为动画效果？

预先感谢您，或者如果您有任何人知道这个东西的好教程，请链接到我。

编辑：我改变了指令为一个简单的条形图，但这只是例如，我知道这可以做到没有SVG，因为你可以使用divs，但我希望图表后更复杂。

这里有一个的jsfiddle http://jsfiddle.net/fg9e7eo4/1/

在我的例子，图表一直保持一个，我想使它动画只有一次，不是停留在这一点上。

顺便说一句，这是我想出来，使其工作指令：

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(); 
     }); 

    } 
    }; 
});

来源

2014-12-03 Pacuraru Daniel

您需要$观察attr – Dylan 2014-12-03 18:46:23

的值我得到的值是我在指令中调用的范围更新的值，但我不知道何时更改模板中的路径，如何从上一个'd '到新的 – 2014-12-03 18:49:08

您将必须使用一些缓动功能间隔地修改路径。有框架（如snap或d3）可以为你做到这一点 - [这里]（http://bl.ocks.org/mbostock/31ec1817b2be2660c453）是一个使用d3的例子。 – user1620220 2014-12-03 19:12:13

如果你想让它只有一次动画然后停止更换repeatCount =“无限期”由repeatCount = “1”fill =“freeze”

如果确保值中的路径在命令的数字和类型中是一致的，则应该获得平滑的动画。这里有一个例子：

<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测试套件具有an example of path animation.，并有一个w3c primer on animation。

来源

2014-12-10 22:39:27

然后动画死了。 – 2014-12-10 22:54:42

是的，我在jsfiddle中测试过它，但动画不再工作 – 2014-12-10 23:36:17

除非你让我看到更新的小提琴，否则我看不到你做错了什么。并且“不再工作”是指它不光滑或者什么都不做？ – 2014-12-11 05:15:52

如果要使用条形图，为什么不使用rect而不是path？ IMO，rect比path更具描述性。

这里是我的例子，使用rect为它设置动画。

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

对于AngularJS，您只需设置width和to属性。

<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>

这个答案也是有帮助的，我想。
SMIL animation on SVG ng-repeat'ed element only occurs on page load

来源

2014-12-15 22:03:33 allenhwkim

我很欣赏你的回应，但我正在寻找一种方式来通过角度指令来启动/停止动画，有没有一种方法可以在指令中使用函数来钩住动画的开始/停止？所以我可以在模型更改时调用 – 2014-12-18 00:40:39

@PacuraruDaniel，我可能是错的，但我没有看到你的问题是停止/开始SVG动画。我有我自己的答案，但我们不要让读者困惑。我会建议你发布另一个问题，并让我知道，我会很乐意为此回答。 – allenhwkim 2014-12-18 04:33:20

不知道，如果你弥补尝试新的插件，但是从Easy Pie Chart.js长相有你想要的东西，它是真正的快速配置和漂亮轻巧。如果你开始使用SVG，看看Raphael.js，我知道你可以为SVG创建动画（甚至可以从一个到另一个）。

希望这有助于！

来源

2014-12-17 14:16:13

更改值时动画SVG路径

回答

相关问题